Android development top toolbar with return function imitation mobile phone QQ top toolbar

Development Environment Building http://blog.csdn.net/juyangjia/article/details/9471561
HelloWorld http://blog.csdn.net/juyangjia/article/details/9491781
Welcome animation production http://blog.csdn.net/juyangjia/article/details/9494961
Menu making http://blog.csdn.net/juyangjia/article/details/9612287
Bottom tab making http://blog.csdn.net/juyangjia/article/details/9616299

I. Preface

I tried to create the magic wand button in the upper-right corner. The attempt failed. I will try again next time. Today, this tutorial will no longer show you how to create a button as before. I will select all the options in detail, after reading the previous tutorials, you should know how to create various Android directories and files. In addition, I want to explain the following questions:

1. activity switching: in fact, this is implemented by the stack. Every time a new page is opened, it is pushed into the stack (Baidu doesn't know what the stack is ), this is why we can still "return" when using our mobile phone to open many pages (provided that the activity is not finished)

2. What does. 9 mean by a large number of .9.png images? I can't explain it either. I want to know more about Baidu. Now I know that this is a very common image in Android, this image has a blank area with one pixel around it, and then a black line with one pixel. This image can be stretched by Android without becoming mosaic, similar to the web, a small 8*8 pixel solid color image is often used to automatically fill the entire background with CSS. Compared with a solid color image of 1024*768, this saves a lot of space.

3. to learn about Android, you must understand the lifecycle of an activity when you are actually using an app. If you are not using Baidu online, I will not tell you, you certainly don't believe that the interface will be re-created when the mobile phone is converted to a portrait screen, and the data entered on your page will be lost. The key to solving this problem is to understand the page lifecycle, then, you can determine when to save the data and when to restore it. If you have carefully practiced each of the previous tutorials, you can go to Baidu to learn the activity lifecycle.

4. A Layout layout file can be nested in other layout files. For example, for the top toolbar we are going to do today, you cannot copy the layout XML of the previous toolbar on every page that requires the toolbar? Reference is the smartest way.

5. When referencing, you only need to write: @ drawable/a. Can you tell me whether this is the referenced image or selector?

6. From now on, the drawable folder is used to distinguish between high-resolution, low-resolution, and medium-resolution. Android will automatically choose the folder to be called based on the resolution of the mobile phone.

Ii. production steps

As mentioned above, no new file images will be captured in the tutorial today.

:

1. As before, the first step is to prepare materials-Images

 

2. Create two selector files with the following name:

 

 

The content is as follows:

Left:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/top_back_leftpress"/>    <item android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/top_back_left"/>    <item android:drawable="@drawable/top_back_left"/></selector>

Right:

<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="http://schemas.android.com/apk/res/android">    <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/top_button_rightpress"/>    <item android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/top_button_right"/>    <!--<item android:drawable="@drawable/top_rightbtn_normal"/>--></selector>

 

3. Create an xml layout file, which contains only toolbar

 

Text mode:

<? Xml version = "1.0" encoding = "UTF-8"?> <RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: orientation = "horizontal" android: id = "@ + id/title_bar"> <RelativeLayout android: layout_width = "fill_parent" android: layout_alignParentLeft = "true" android: layout_alignParentTop = "true" android: layout_height = "40dp" android: background = "@ drawable/tool_bar_bg_pic"> <Button android: id = "@ + id/btn_title_left" android: layout_width = "wrap_content" android: layout_height = "40dp" android: background = "@ drawable/top_left_button" android: text = "return" android: layout_marginLeft = "7px" android: textSize = "12sp" android: textColor = "# ffffffff" android: gravity = "center_vertical | center_horizontal" android: layout_alignParentLeft = "true"/> <TextView android: id = "@ + id/TV _top_title" android: layout_width = "127dp" android: layout_height = "48dp" android: text = "SNT" android: layout_centerInParent = "true" android: gravity = "center_horizontal" android: lines = "1" android: textSize = "19sp" android: textColor = "# ffffff" android: layout_marginTop = "10dp"/> <Button android: id = "@ + id/btn_title_right" android: layout_width = "wrap_content" android: layout_height = "40dp" android: background = "@ drawable/top_right_button" android: text = "more" android: textSize = "12sp" android: textColor = "# ffffff" android: gravity = "center_vertical | center_horizontal" android: layout_alignParentRight = "true" android: layout_marginRight = "7dp"/> </RelativeLayout>

Here I want to explain that I used the relativelayout container for layout. In relative layout, we can set the location for the two buttons in the middle and a text display area, A setting is left (Android: layout_alignparentleft = "true"), right (Android: layout_alignparentright = "true"), and center (Android: layout_centerinparent = "true ").

 

4. Create the detailed. xml layout file. This is the detailed page layout that we will jump.

 

Source code:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: orientation = "vertical" android: layout_width = "match_parent" android: layout_height = "match_parent" android: background = "@ drawable/main_bg"> <include layout = "@ layout/title_bar"/> <LinearLayout android: orientation = "vertical" android: layout_width = "fill_parent" android: layout_height = "fill_parent"> <TextView android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: text = "New Text" android: id = "@ + id/textView" android: layout_gravity = "left | center_vertical" android: textColor = "# ff000000"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "Hide button" android: id = "@ + id/Button" android: layout_gravity = "left | center_vertical"/> <button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "display button" android: id = "@ + id/button1" android: layout_gravity = "left | center_vertical"/> </LinearLayout>

Pay attention to the include label above. This article has already explained why to use include.

 

5. Create a detailedactivity class

 

 

6. Modify view_1.xml and view1activity classes:

 

XML layout file:

<? Xml version = "1.0" encoding = "UTF-8"?> <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" android: orientation = "vertical" android: layout_width = "match_parent" android: layout_height = "fill_parent" android: gravity = "center_vertical | center_horizontal"> <TextView android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "interface 1" android: id = "@ + id/textView"/> <EditText android: layout_width = "fill_parent" android: layout_height = "wrap_content" android: text = "New EditText" android: id = "@ + id/editText"/> <Button android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: text = "" android: id = "@ + id/button" android: layout_gravity = "left | center_vertical"/> </LinearLayout>

 

Source code: http://download.csdn.net/detail/juyangjia/5839775

 

Iii. Final

I have studied the android http Communication Framework, socket communication framework, and sqlite database (the database on the mobile phone), but have not created a tutorial. The next tutorial is to create the login page and login function, we will explain the following knowledge:

1. analyze the connection between http and socket

2. Read and Write Data from the sqlite database (remember the account)

3. Communication Framework usage (httpclient and mina of apache)