10 days to learn Android-the third day

After the second day of study, we correctly call the Baidu Weather API, the weather information displayed to the interface, to do this step, our work is completed 1%, the remaining 99% of the work will need to constantly polish the unfinished app.

First and foremost, we want to convert a lot of characters into an interface that ordinary users can easily understand, so let's take a look at the layout of the Android interface.

Open the Res/layout/activity_main.xml file, switch to the Layouts tab, you can see there are many items inside, GridLayout, LinearLayout, relativelayout, etc. What type of layout does all this represent?

Theoretical knowledge

Overall, the Android interface layout is divided into 5, linearlayout (linear layout), Relativelayout (relative layout), Framelayout (frame layout), tablelayout (table layout), GridLayout (Grid layout), the following is a brief introduction.

LinearLayout (Linear layout)

LinearLayout causes the elements inside the layout to line up horizontally (horizontal) or vertically (vertical),

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent "     android:orientation= "Horizontal" >    <textview        android:layout_width= "Wrap_content"        Android : layout_height= "wrap_content"        android:text= "first text"/>        <textview        android:layout_width= "Wrap_ Content "        android:layout_height=" wrap_content "        android:text=" second text "/></linearlayout>

Where android:orientation specifies the arrangement of elements within the layout, and, if there is no such setting, the default is a horizontal arrangement.

After setting the arrangement, the effect is as follows:

Relativelayout (relative layout)

Relativelayout makes the elements inside the layout be arranged relative to the position of the container and other elements.

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent " >    <textview        android:id= "@+id/text1"        android:layout_width= "wrap_content"        android:layout_ height= "Wrap_content"        android:layout_alignparentleft= "true"        android:layout_alignparenttop= "true"        android:text= "First text"/>    <textview        android:id= "@+id/text2        " android:layout_width= "Wrap_ Content "        android:layout_height=" wrap_content "        android:layout_below=" @id/text1 "        android:layout_ torightof= "@id/text1"        android:text= "second text"/></relativelayout>

This layout defines the first text in the upper-left corner of the layout, and the second text at the bottom right of the first text.

Framelayout (Frame layout)

Framelayout allows elements inside the layout to be stacked hierarchically in the upper-left corner, and the elements added later overwrite the previous element.

<framelayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent " >    <textview        android:id= "@+id/text1"        android:layout_width= "wrap_content"        android:layout_ height= "Wrap_content"        android:textsize= "60sp"        android:background= "#00ff00"        android:text= "first text"/ >    <textview        android:id= "@+id/text2"        android:layout_width= "Wrap_content"        android: Textsize= "40SP"        android:layout_height= "wrap_content"        android:background= "#ff00ff"        android:text= "Second Text"/></framelayout>

So the second text will be overlaid on top of the first text,

Tablelayout (Table layout)

Tablelayout the elements inside the layout are arranged in rows and columns, and each row is a tablerow or a normal view,

<tablelayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http// Schemas.android.com/tools "android:layout_width=" match_parent "android:layout_height=" Match_parent "Android:stre tchcolumns= "1" > <TableRow> <textview android:layout_column= "1" android:text= "O Pen ... "android:padding=" 3dip "/> <textview android:text=" Ctrl-o "android:gr            Avity= "Right" android:padding= "3dip"/> </TableRow> <TableRow> <textview android:layout_column= "1" android:text= "Save ..." android:padding= "3dip"/> <textvie W android:text= "Ctrl-s" android:gravity= "right" android:padding= "3dip"/> </tabl        erow> <view android:layout_height= "2dip" android:background= "#FF909090"/> <TableRow> <textview Android:layout_column= "1" android:text= "Quit" android:padding= "3dip"/> </TableRow></TableLayout> 

This layout has four rows, 1, 2, 4 lines are TableRow, each has a number of different text, the 3rd line is a normal view,

GridLayout (Grid layout)

GridLayout the elements inside the layout are arranged in rows, columns, and cells.

<?xml version= "1.0" encoding= "Utf-8"?> <gridlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Wrap_content "android:layout_height=" wrap_content "android:orientation=" Hori Zontal "android:rowcount=" 5 "android:columncount=" 4 "> <button android:text=" 1 "/> <bu Tton android:text= "2"/> <button android:text= "3"/> <button android:text= "/"/&  　　Gt <button android:text= "4"/> <button android:text= "5"/> <button android:text          = "6"/> <button android:text= "x"/> <button android:text= "7"/> <button android:text= "8"/> <button android:text= "9"/> <button android:text= "-"/> < Button android:layout_columnspan= "2" android:layout_gravity= "fill" android:text= "0"/> &l T Button Android:teXt= "." /> <button android:layout_rowspan= "2" android:layout_gravity= "Fill" android:text= "+"/ > <button android:layout_columnspan= "3" android:layout_gravity= "fill" android:text= "= "/> </GridLayout>

This defines a simple calculator layout,

Other layouts

In addition to the above 5 major layouts, there are some third-party layout, you can easily achieve some of the more cool effects, such as drawerlayout (left slide pop-up menu), Swipebacklayout (left slide back), and so on, this knowledge needs to have some development experience after the slowly groping.

Summary

The above is a brief introduction of the use of a variety of layouts, specific layout There are many properties, use these properties to produce a practical interface, these properties depend on the continuous learning of the people slowly mastered.

In all the layouts, I recommend that you use Relativelayout. If you use other layouts, you may need to nest more layers to implement the interface, usually using relativelayout will be more convenient, and if the level is more, for the interface of the exhibition need to consume more memory, all I recommend the use of relativelayout.

Well, we have worked hard, let's take a break, and we'll use Relativelayout to do our first interface.

Weather interface

Let's go back to our project, open the Res/layout/activity_main.xml file, delete the TextView, add a new control-listview.

Then switch to code mode, confirm the properties of the ListView,

    <listview        android:id= "@+id/weather_list"        android:layout_width= "match_parent"        android:layout_ height= "Wrap_content"        android:layout_centerhorizontal= "true"        android:layout_centervertical= "true" >    </ListView>

The properties here show that the listview width is full, highly adaptive, horizontally centered and vertically centered, its ID is weather_list, and you remember the function of the ID, which makes the control can be found and used in the code.

What is this listview for?

Of course it shows the weather. Also take Beijing's weather as an example, http://api.map.baidu.com/telematics/v3/weather?location=%E5%8C%97%E4%BA%AC&output=json&ak= Ykngmxiopugt7yrnrg955yls, the data returned by this link is:

{error:0,status: "Success", Date: "2015-01-19", results: [{currentcity: "Beijing", Pm25: "+", index: [{title: "Dressing", Zs: "Cold", Tipt: "Clothing Index", des: "Cold weather, recommended cotton clothes, down jacket, leather jackets and sweaters and other winter clothing." The frail and infirm are suitable for thick coat, winter coat or thick down jacket. "},{title:" Car Wash ", ZS:" More Appropriate ", Tipt:" Car Wash Index ", des:" More suitable car wash, no rain in the coming day, the wind is small, a new car scrub can at least maintain a day. " "},{title: Tourism", ZS: "Fit", Tipt: "Tourism Index", des: "The weather is better, and there is a breeze to accompany you all the way." Although it will make people feel a little cold, but still suitable for travel, do not miss the opportunity yo! "},{title:" Cold ", Zs:" Less Hair ", Tipt:" Cold Index ", des:" The weather conditions are suitable, no obvious cooling process, the occurrence of cold probability is low. " "},{title:" Sport ", ZS:" More Appropriate ", Tipt:" Sports Index ", des:" The weather is better, but considering the low temperature, we recommend that you do indoor sports, if the outdoor appropriate increase and decrease clothing and pay attention to sunscreen. " "},{title: UV Intensity", ZS: "Weakest", Tipt: "UV intensity Index", des: "is a weak ultraviolet radiation weather, no special protection." If the long-term outdoors, it is recommended to rub SPF in 8-12 between the sunscreen skin care products. "}],weather_data: [{date:" Monday January 19 (Real time: 3 ℃) ", Daypictureurl:" Http://api.map.baidu.com/images/weather/day/qing.png " , Nightpictureurl: "Http://api.map.baidu.com/images/weather/night/qing.png", Weather: "Sunny", Wind: "Breeze", Temperature: "- 5℃ "},{date:" Tuesday ", Daypictureurl:" Http://api.map.baidu.com/images/weather/day/duoyun.png ", Nightpictureurl:" http:/ /api.map.baidu.com/images/weather/night/duoyun.png ", Weather:"Cloudy ", Wind:" Breeze ", Temperature:" 5 ~ -2℃ "},{date:" Wednesday ", Daypictureurl:" http://api.map.baidu.com/images/weather/day/ Qing.png ", Nightpictureurl:" Http://api.map.baidu.com/images/weather/night/qing.png ", Weather:" Sunny ", Wind:" North of the 3-4 level ", Temperature: "5 ~ -6℃"},{date: "Thursday", Daypictureurl: "Http://api.map.baidu.com/images/weather/day/qing.png", Nightpictureurl: "Http://api.map.baidu.com/images/weather/night/qing.png", Weather: "Sunny", Wind: "Breeze", Temperature: "6 ~ -5℃ "}]}]}

This is the data in JSON format, where [Weather_data] is the current and the next 4 days of the weather, altogether 5 data, so the standard list of data is of course using the ListView control to display.

So, how do we proceed?

Zhao Benshan teacher taught us, a total of three steps,

1. Access to Data

2. Interface

3. Display the data to the interface

Then, the data has been obtained, the following is the second step, made interface.

Listview

How do I use the listview? In the Android design, here is a standard code-splitting scenario where the ListView is used as a container, and each of them is implemented separately using another view, so what exactly do we need to do?

Don't worry, take it slow.

Mail click on the res/layout directory, select New > Android XML File, fill in the popup box as shown in

Then click Finish to switch to the new view we created, which will define what is displayed in each item in the ListView. According to the Baidu data, our weather app can show the date, weather, wind, temperature and two days of the day, respectively, the weather pictures, then we can start the action, first add 4 TextView and a ImageView, location can be placed casually. It is important to note that when you add ImageView, you will be prompted to select the Image Resource dialog box, we will select the default Ic_launcher just fine.

Once these are done, look at what our interface looks like. Anyway, mine is like this:

Very that look is not, still that sentence, do not worry, we come to adjust a bit.

Check the upper left corner of the TextView, and then notice the red box in the picture, we will set its properties here, including the width, position, font, etc., you practice it, try to set up the various projects, to see what will be the reaction.

Well, let's take a look at my adjusted interface.

Not good-looking, but also a more standard list of items. Share My Code:

<?xml version= "1.0" encoding= "Utf-8"? ><relativelayout xmlns:android= "http://schemas.android.com/apk/res/    Android "Android:layout_width=" Match_parent "android:layout_height=" wrap_content "android:padding=" 10DP "> <textview android:id= "@+id/item_date" android:layout_width= "Match_parent" android:layout_height= "W Rap_content "android:text=" date "android:textcolor=" #000000 "android:textsize=" 18sp "/> <textv Iew android:id= "@+id/item_weather" android:layout_width= "wrap_content" android:layout_height= "Wrap_co Ntent "android:layout_alignparentleft=" true "android:layout_below=" @+id/item_date "Android:layout_mar gintop= "5DP" android:text= "Weather" android:textcolor= "#000000" android:textsize= "14sp"/> <textv Iew android:id= "@+id/item_wind" android:layout_width= "wrap_content" android:layout_height= "Wrap_conte NT "android:layout_below="@+id/item_date "android:layout_marginleft=" 5DP "android:layout_margintop=" 5DP "android:layout_toright of= "@id/item_weather" android:text= "Wind" android:textcolor= "#000000" android:textsize= "14sp"/> & Lt TextView android:id= "@+id/item_temperature" android:layout_width= "Wrap_content" android:layout_height = "Wrap_content" android:layout_below= "@+id/item_date" android:layout_marginleft= "5DP" Android:layout_ margintop= "5DP" android:layout_torightof= "@id/item_wind" android:text= "Temperature" android:textcolor= "#000000 "Android:textsize=" 14sp "/> <imageview android:id=" @+id/item_picture "android:layout_width= "40DP" android:layout_height= "40DP" android:layout_alignparentright= "true" Android:layout_centerverti Cal= "true" android:src= "@drawable/ic_launcher"/></relativelayout>

You can use my settings directly, so it's convenient. ^_^

Well, here, three steps inside the second step is also completed, good hard ah, rest.

Through today's toss, our interface has become not to show any content, do not worry, we continue tomorrow.

The attachment is the project document, click Download.

This series of articles is my original, if need to reprint, please specify the source www.liuzhibang.cn

10 days to learn Android-the third day