Android Development Learning Path--ui custom layouts and controls

The new year has already begun, today is already a second day, two days have not studied, still want to continue to study under. The general mobile phone title is Actionbar, like the iphone can be back, can be edited. Here to customize the layout to achieve this function, first prepare the next three pictures, one for the background, two for the back and edit. After you create a new project Uicostomviewstest, and then automate the project creation, new Title.xml, write the following code:

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "Android:layout_width=" Match_parent "android:layout_height=" wrap_content "android:background=" @drawable/t ITLE_BG "> <button android:id=" @+id/title_back "android:layout_height=" Wrap_content "Android: Layout_width= "wrap_content" android:layout_gravity= "center" android:layout_margin= "5dip" Android:back ground= "@drawable/back_bg"/> <textview android:id= "@+id/title_text" android:layout_width= "Wrap_con        Tent "android:layout_height=" wrap_content "android:layout_gravity=" center "android:layout_weight=" 1 " android:gravity= "center" android:text= "Title text" android:textcolor= "#fff" android:textsize= " 24sp "/> <button android:id=" @+id/title_edit "android:layout_width=" Wrap_content "Android:lay Out_height= "Wrap_content" android:layout_gravity= "center" android:layout_margin= "5dip" android:background= "@drawable/edit_bg"/></l Inearlayout>

The effect is as follows:

In general there will be many places to use this title, then if each page to write this piece of code, then the code is too redundant, here can use the include. Add the title again Main_activity.xml, and then get a textview and button. The code is written as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><tablelayout    xmlns:android= "http://schemas.android.com/apk/ Res/android "    android:layout_width=" match_parent "    android:layout_height=" match_parent ">    < Include layout= "@layout/title"/>    <textview        android:text= "Hello world!"        Android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:layout_margin= "5dip"        android:textsize= "24DP"/>    <button        android:id= "@+id/button1"        android:layout_width= " Match_parent "        android:layout_height=" wrap_content "        android:text=" Button1 "/></tablelayout>

As long as the include just write the title can be, here mainly used to linear layout, so here with Tablelayout. The effect is as follows:

Although the title above is OK, but we want to implement the Back,edit function, need to respond to the event, then the implementation of its own control. Write titlelayout with the following code:

Package Com.example.jared.uicustomviewstest;import Android.content.context;import Android.util.AttributeSet; Import Android.view.layoutinflater;import Android.view.view;import Android.widget.button;import Android.widget.linearlayout;import android.widget.textview;import android.widget.toast;/** * Created by Jared on 16/2/    9. */public class Titlelayout extends LinearLayout {private Button Back_button;    Private Button Edit_button;    Private TextView Title_text;            public class Myonclicklistener implements View.onclicklistener {@Override public void OnClick (view view) { Switch (View.getid ()) {Case R.id.title_back:toast.maketext (GetContext (), "Y                    Ou clicked Back button! ", Toast.length_short). Show ();                Break                            Case R.id.title_edit:toast.maketext (GetContext (), "You clicked Edit button!",          Toast.length_short). Show ();          Break            Default:break;        }}} public Titlelayout (context context, AttributeSet Attrs) {Super (context, attrs);        Layoutinflater.from (context). Inflate (R.layout.title, this);        Back_button = (Button) Findviewbyid (R.id.title_back);        Edit_button = (Button) Findviewbyid (R.id.title_edit);        Title_text = (TextView) Findviewbyid (R.id.title_text);        Back_button.setonclicklistener (New Myonclicklistener ());    Edit_button.setonclicklistener (New Myonclicklistener ()); }}

Titlelayout Implementation constructs the inheritance LinearLayout, and implements the function of Back,edit and so on in the constructor function. Trigger button to print some information.

Modify the XML for Activity_main as follows:

<?xml version= "1.0" encoding= "Utf-8"? ><tablelayout    xmlns:android= "http://schemas.android.com/apk/ Res/android "    android:layout_width=" match_parent "    android:layout_height=" match_parent ">    < Com.example.jared.uicustomviewstest.TitleLayout        android:layout_width= "match_parent"        android:layout_ height= "Wrap_content"        android:layout_gravity= "center"/>    <textview        android:text= "Hello world!"        Android:layout_width= "Wrap_content"        android:layout_height= "wrap_content"        android:layout_margin= "5dip "        android:textsize=" 24DP "/>    <button        android:id=" @+id/button1 "        android:layout_width=" Match_parent "        android:layout_height=" wrap_content "        android:text=" Button1 "        android:textallcaps=" False "/></tablelayout>

and general control using the same way, here is com.example.jared.uicuctomviewstest.TitleLayout, the effect is as follows: a bit ugly, the UI next time to change.

Basically, custom controls are almost there.

Android Development Learning Path--ui custom layouts and controls