Custom combo controls for Android custom Controls (iii)

Objective:

The first two articles describe the basics of custom controls Basic principles of Android custom Controls (i), custom properties for custom attributes of the Android custom Control (ii). Focus today on how to improve layout reuse, reduce development costs, and maintain costs with custom composite controls.

What are the benefits of using custom composite controls?

We often meet a lot of similar or identical layouts in project development, such as the app's title bar, we have three ways to implement the title bar to compare the benefits of custom components, after all, good things are to improve development efficiency, reduce development cost-oriented.

1.) The first way: write the same title bar layout code directly in each XML layout

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "xmlns:lee=" Http://schemas.android.com/apk/res-auto "android:layout_width=" Match_parent "Android:layout_h eight= "match_parent" android:orientation= "vertical" > <relativelayout android:layout_width= "match_parent "Android:background=" @color/green "android:layout_height=" 45DP "> <button android:id            = "@+id/title_bar_left" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:layout_alignparentleft= "true" android:layout_centervertical= "true" Android:layout_mar ginleft= "5DP" android:background= "@mipmap/titlebar_back_icon" android:minheight= "45DP" an Droid:minwidth= "45DP" android:textsize= "14sp"/> <textview android:id= "@+id/title_bar_t Itle "Android:layout_widTh= "Wrap_content" android:layout_height= "Wrap_content" android:layout_centerinparent= "true"            android:text= "Login" android:singleline= "true" android:textsize= "17sp"/> <button Android:id= "@+id/title_bar_right" android:layout_width= "Wrap_content" android:layout_height= "W            Rap_content "android:layout_alignparentright=" true "android:layout_centervertical=" true "            android:layout_marginright= "7DP" android:text= "Submit" android:textcolor= "@android: Color/white" Android:background= "@null" android:minheight= "45DP" android:minwidth= "45DP" Android:te Xtsize= "14sp"/> </RelativeLayout></LinearLayout>

This approach does not have any layout reuse concept, but also makes the current layout bloated and difficult to maintain, development inefficiencies, and this also requires that each developer must be careful otherwise may make uneven title bar, so this is the least recommended.

2.) The second way: using the Include tag

First define the title bar layout

    <relativelayout android:layout_width= "match_parent" android:background= "@color/green" Android: layout_height= "45DP" > <button android:id= "@+id/title_bar_left" android:layout_width= "WR Ap_content "android:layout_height=" Wrap_content "android:layout_alignparentleft=" true "an"            Droid:layout_centervertical= "true" android:layout_marginleft= "5DP" android:minheight= "45DP" Android:minwidth= "45DP" android:textsize= "14sp"/> <textview android:id= "@+id/title_ Bar_title "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Andro Id:layout_centerinparent= "true" android:singleline= "true" android:textsize= "17sp"/> <b Utton android:id= "@+id/title_bar_right" android:layout_width= "Wrap_content" android:layou t_height= "Wrap_content"           Android:layout_alignparentright= "true" android:layout_centervertical= "true" android:layou t_marginright= "7DP" android:background= "@null" android:minheight= "45DP" android:minwidth= "45DP" android:textsize= "14sp"/> </RelativeLayout>

Then use the include tag to implement the reference where needed

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:lee= "http// Schemas.android.com/apk/res-auto "    android:layout_width=" match_parent "    android:layout_height=" Match_ Parent "    android:orientation=" vertical ">    <include layout=" @layout/view_title_bar "/></ Linearlayout>

Through the above layout code, we can use the above method does realize the layout of the reuse, but also avoids the development of the uneven title bar of the problem, but also introduced new problems, such as lower development efficiency, increased development costs, The question is, how do we define the title bar for each layout file? It is not recommended that the layout properties and activity code are highly coupled, because the title problem is set by the code, the left and right buttons, and other properties.

3.) The Third Way: by customizing the combo control

This first does not specifically describe how to implement a custom composite control, which introduces the benefits of custom composite controls.

• Improve layout file development efficiency
• Reduce layout file maintenance costs
• Reduce the coupling between layout files and activity code
• Easy to expand
• Simple to use

  How to implement a custom composite Control 1.) First define a layout file  

<merge xmlns:android= "Http://schemas.android.com/apk/res/android" > <button android:id= "@+id/title_bar_l EFT "Android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:layout_alignpar Entleft= "true" android:layout_centervertical= "true" android:layout_marginleft= "5DP" Android:backgroun D= "@null" android:minheight= "45DP" android:minwidth= "45DP" android:textsize= "14sp"/> <textv Iew android:id= "@+id/title_bar_title" android:layout_width= "wrap_content" android:layout_height= "wrap _content "android:layout_centerinparent=" true "android:singleline=" true "android:textsize=" 17SP "/&gt    ; <button android:id= "@+id/title_bar_right" android:layout_width= "Wrap_content" Android:layout_heigh t= "Wrap_content" android:layout_alignparentright= "true" Android:layout_centervertical= "true" Android: layout_marginright="7DP" android:background= "@null" android:minheight= "45DP" android:minwidth= "45DP" Android:text Size= "14SP"/></merge>

Note: Why use the merge tag here, the custom composite control will inherit the Relativelayout, LinearLayout and other controls, resulting in the layout of the level of the virtually added a layer, the following is the comparison:

The merge label is not used

Using the Merge tab

2.) Define custom properties

such as title text, title bar left button icon and so on.

 <declare-styleable name= "Customtitlebar" > <attr name= "title_background_color" format= "Reference|inte Ger "/> <attr name=" left_button_visible "format=" boolean "/> <attr name=" right_button_visible "f Ormat= "boolean"/> <attr name= "Title_text" format= "string"/> <attr name= "Title_text_color" form at= "Color"/> <attr name= "title_text_drawable" format= "Reference|integer"/> <attr name= "Right_b Utton_text "format=" string "/> <attr name=" right_button_text_color "format=" color "/> <attr name        = "Right_button_drawable" format= "Reference|integer"/> <attr name= "Left_button_text" format= "string"/> <attr name= "Left_button_text_color" format= "color"/> <attr name= "left_button_drawable" format= "refer Ence|integer "/> </declare-styleable> 

 3.) Customizing a view to inherit different viewgroup subclasses, such as: Relativelayout, linearlayout, etc., we inherit relativelayout here.  

public class Customtitlebar extends Relativelayout {private Button titlebarleftbtn;    Private Button titlebarrightbtn;    Private TextView Titlebartitle;        Public Customtitlebar (context context, AttributeSet Attrs) {Super (context, attrs);        Layoutinflater.from (context). Inflate (R.layout.custom_title_bar, this, true);        TITLEBARLEFTBTN = (Button) Findviewbyid (r.id.title_bar_left);        TITLEBARRIGHTBTN = (Button) Findviewbyid (r.id.title_bar_right);        Titlebartitle = (TextView) Findviewbyid (r.id.title_bar_title);        TypedArray attributes = Context.obtainstyledattributes (Attrs, R.styleable.customtitlebar); if (attributes! = NULL) {//handles titlebar background color int titlebarbackground = Attributes.getresourceid (R.stylea ble.            Customtitlebar_title_background_color, Color.green);            Setbackgroundresource (Titlebarbackground); Handle left button first//get whether to show Left button Boolean leftbuttonvisible = Attributes.getboolean (R.styleable.            Customtitlebar_left_button_visible, True);            if (leftbuttonvisible) {titlebarleftbtn.setvisibility (view.visible);            } else {titlebarleftbtn.setvisibility (view.invisible); }//Set the text of the left button to String Leftbuttontext = attributes.getstring (r.styleable.customtitlebar_left_button_te            XT); if (!                Textutils.isempty (Leftbuttontext)) {titlebarleftbtn.settext (leftbuttontext); Set left button text color int leftbuttontextcolor = Attributes.getcolor (R.styleable.customtitlebar_left_button_text_colo                R, Color.White);            Titlebarleftbtn.settextcolor (Leftbuttontextcolor); } else {//Set left picture icon here is two select one or only text or only picture int leftbuttondrawable = Attributes.getresource                Id (r.styleable.customtitlebar_left_button_drawable, R.mipmap.titlebar_back_icon); if (leftbuttondrawable! =-1) {Titlebarleftbtn.setbackgrouNdresource (leftbuttondrawable); }}//Handle title//get title whether to show picture icon int titletextdrawable = Attributes.getresourceid            (R.styleable.customtitlebar_title_text_drawable,-1);            if (titletextdrawable! =-1) {Titlebartitle.setbackgroundresource (titletextdrawable); } else {//if not the caption of the picture gets the text caption String TitleText = attributes.getstring (R.styleable.customtitleb                Ar_title_text); if (!                Textutils.isempty (TitleText)) {titlebartitle.settext (titletext); }//Get title display color int titletextcolor = Attributes.getcolor (r.styleable.customtitlebar_title_text_                color, color.white);            Titlebartitle.settextcolor (Titletextcolor); }//Handle right button first//get whether to display right button Boolean rightbuttonvisible = Attributes.getboolean (r.styleable.            Customtitlebar_right_button_visible, True); if (rightbuttonvisible) {titlebarrightbtn.setvisibility (view.visible);            } else {titlebarrightbtn.setvisibility (view.invisible); }//Set the text of the right button to String Rightbuttontext = attributes.getstring (r.styleable.customtitlebar_right_button_            Text); if (!                Textutils.isempty (Rightbuttontext)) {titlebarrightbtn.settext (rightbuttontext); Set right button text color int rightbuttontextcolor = Attributes.getcolor (r.styleable.customtitlebar_right_button_text_co                Lor, Color.White);            Titlebarrightbtn.settextcolor (Rightbuttontextcolor); } else {//Set the picture on the right icon here is two select one or only text or only the picture int rightbuttondrawable = ATTRIBUTES.GETRESOURC                EId (R.styleable.customtitlebar_right_button_drawable,-1);                if (rightbuttondrawable! =-1) {Titlebarrightbtn.setbackgroundresource (rightbuttondrawable);          }            }  Attributes.recycle ();            }} public void Settitleclicklistener (Onclicklistener onclicklistener) {if (Onclicklistener! = null) {            Titlebarleftbtn.setonclicklistener (Onclicklistener);        Titlebarrightbtn.setonclicklistener (Onclicklistener);    }} public Button gettitlebarleftbtn () {return titlebarleftbtn;    } public Button gettitlebarrightbtn () {return titlebarrightbtn;    } public TextView Gettitlebartitle () {return titlebartitle; }}

4.) referencing in different XML layouts

about how to use custom properties here is no longer explained, for a more intuitive view of the effect, I here in a layout file to implement the different requirements of the title bar

<?xml version= "1.0" encoding= "Utf-8"? ><linearlayout xmlns:android= "http://schemas.android.com/apk/res/ Android "xmlns:lee=" Http://schemas.android.com/apk/res-auto "android:layout_width=" Match_parent "Android:layout_h eight= "match_parent" android:orientation= "vertical" > <com.whoislcj.views.customtitlebar android:layout_ Width= "Match_parent" android:layout_height= "45DP" android:layout_margintop= "10DP" lee:right_button_dr awable= "@mipmap/titlebar_add_icon" lee:title_background_color= "@color/green" lee:title_text= "Heading 1"/> &        Lt;com.whoislcj.views.customtitlebar android:layout_width= "match_parent" android:layout_height= "45DP"        android:layout_margintop= "10DP" lee:right_button_visible= "false" lee:title_background_color= "@color/green"        lee:title_text= "Title 2"/> <com.whoislcj.views.customtitlebar android:layout_width= "Match_parent"    android:layout_height= "45DP"    android:layout_margintop= "10DP" lee:left_button_text= "left" lee:right_button_text= "right" lee:title_ba Ckground_color= "@color/red" lee:title_text= "Title 3"/> <com.whoislcj.views.customtitlebar Android:layo Ut_width= "Match_parent" android:layout_height= "45DP" android:layout_margintop= "10DP" Lee:left_button_        Text= "left" lee:right_button_drawable= "@mipmap/titlebar_add_icon" lee:title_background_color= "@color/red" lee:title_text= "Title 4"/> <com.whoislcj.views.customtitlebar android:layout_width= "Match_parent" a ndroid:layout_height= "45DP" android:layout_margintop= "10DP" lee:left_button_text= "left" Lee:left_button _text_color= "@color/red" lee:right_button_drawable= "@mipmap/titlebar_add_icon" lee:title_background_color= "@ Color/blue "lee:title_text=" Heading 5 "/> <com.whoislcj.views.customtitlebar android:layout_width=" Match_ Parent "Android:layout_height= "45DP" android:layout_margintop= "10DP" lee:left_button_text= "left" Lee:left_button_text_co Lor= "@color/red" lee:right_button_drawable= "@mipmap/titlebar_add_icon" lee:title_background_color= "@color/BL UE "Lee:title_text=" header 6 "lee:title_text_color=" @color/black "/></linearlayout>

Custom combo controls for Android custom Controls (iii)