Custom combination control for Android custom Controls (iii) _android

Objective:

The first two describes the basics of customizing controls Android Custom Controls Basic Principles (i), Android custom control custom properties (ii). Today we will focus on how to improve the reuse of the layout by customizing the composite controls, reducing development costs, and maintaining costs.

Benefits of using custom grouped controls?
we often meet many similar or identical layouts in project development, such as app title bar, we implement the title bar in three ways to compare the benefits of custom components, after all, the good thing is to improve development efficiency, reduce the cost of development-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_ height= "match_parent" android:orientation= "vertical" > <relativelayout android:layout_width= "match_parent" an droid:background= "@color/green" android:layout_height= "45DP" > <button android:id= "@+id/title_bar_left" an Droid:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentleft= "true" Andr
   Oid:layout_centervertical= "true" android:layout_marginleft= "5DP" android:background= "@mipmap/titlebar_back_icon" 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 "Android:layout_centerIn" Parent= "true" android:text= "login" AndrOid:singleline= "true" android:textsize= "17sp"/> <button android:id= "@+id/title_bar_right" android:layou T_width= "Wrap_content" android:layout_height= "Wrap_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:textsize=" 14sp "/> &

 Lt;/relativelayout> </LinearLayout>

There is no concept of layout reuse in this way, but it also makes the current layout bloated, difficult to maintain, inefficient to develop, and requires each developer to be careful otherwise it is possible to make uneven title bars, so this is the least recommended way to use.

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= "4 5DP "> <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_marginl eft= "5DP" android:minheight= "45DP" android:minwidth= "45DP" android:textsize= "14sp"/> <textview Andro Id:id= "@+id/title_bar_title" android:layout_width= "wrap_content" android:layout_height= "Wrap_content" Android:lay Out_centerinparent= "true" android:singleline= "true" android:textsize= "17sp"/> <button android:id= "@+id/" Title_bar_right "android:layout_width=" wrap_content "android:layout_height=" Wrap_content "Android:layout_alignPar"
   Entright= "true" android:layout_centervertical= "true" android:layout_marginright= "7DP" android:background= "@null" Android:minheight= "45dP "android:minwidth=" 45DP "android:textsize=" 14sp "/> </RelativeLayout>



 

And then implement the reference through the include tag 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>

With the above layout code, we can use the above method to actually achieve the layout reuse, but also avoids the developer to develop the uneven title bar problem, but also introduced a new problem, such as lower development efficiency, increase the cost of development, The question is, how do we define the title bar for each layout file? Only through the way of the code to set the title problem, the left and right buttons and other properties, resulting in layout properties and activity code coupling is relatively high, so this approach is not recommended.

3.) The Third Way: by customizing the combination control
Here is not a specific description of how to implement a custom composite control, here is a description of the benefits of the custom composite control.
• Improve layout file development efficiency
• Reduce layout file maintenance costs
• Reduce the coupling of layout files and activity codes
• Easy to expand
• Simple and Easy-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_" Left "android:layout_width=" Wrap_content "android:layout_height=" Wrap_content "android:layout_alignparentleft=" True ' android:layout_centervertical= ' true ' android:layout_marginleft= ' 5dp ' android:background= ' @null ' Android:minH
  eight= "45DP" android:minwidth= "45DP" android:textsize= "14sp"/> <textview android:id= "@+id/title_bar_title" Android:layout_width= "Wrap_content" android:layout_height= "Wrap_content" android:layout_centerinparent= "true" and Roid:singleline= "true" android:textsize= "17sp"/> <button android:id= "@+id/title_bar_right" Android:layout_w Idth= "Wrap_content" android:layout_height= "Wrap_content" android:layout_alignparentright= "true" Android:layout_ Centervertical= "true" android:layout_marginright= "7DP" android:background= "@null" android:minheight= "45DP" Android : minwidth= "45DP" android:textsize= "14sp"/> </merge>

 

Note: Why use the Merge tab, when customizing the composite control Inherits Relativelayout, LinearLayout, and so on, resulting in a layer of layout that is virtually added to the hierarchy, as shown in the following comparison:

2.) Define Custom Attributes
such as title text, the left button icon in the title bar, and so on.

 <declare-styleable name= "Customtitlebar" >
  <attr name= "Title_background_color" format= "reference|" Integer "/>
  <attr name= left_button_visible" format= "boolean"/>
  <attr name= "Right_button_" Visible "format=" boolean "/>
  <attr name=" Title_text "format=" string "/>" <attr name=
  "Title_text_" Color "format=" color "/>
  <attr name=" title_text_drawable "format=" Reference|integer "/>
  <attr Name= "Right_button_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=" Reference|integer "/>
 </declare-styleable>

3.) Customize a view according to the requirements of the inheritance of different viewgroup subclasses, such as: Relativelayout, LinearLayout, we inherit relativelayout here.

public class Customtitlebar extends Relativelayout {private Button titlebarleftbtn;
 Private Button titlebarrightbtn;

 Private TextView Titlebartitle;
  Public Customtitlebar (context, AttributeSet attrs) {Super (context, attrs);
  Layoutinflater.from. 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) {//processing titlebar background color int titlebarbackground = Attributes.getresourceid (R.styleable.customtitleb
   Ar_title_background_color, Color.green);
   Setbackgroundresource (Titlebarbackground); First process left button//get whether to show Left button Boolean leftbuttonvisible = Attributes.getboolean (r.styleable.customtitlebar_left_button_vi
   Sible, True); if (leftbuttonvisible) {TitlebarlEftbtn.setvisibility (view.visible);
   else {titlebarleftbtn.setvisibility (view.invisible);
   //Set the text String of the left button Leftbuttontext = attributes.getstring (R.styleable.customtitlebar_left_button_text); if (!
    Textutils.isempty (Leftbuttontext)) {titlebarleftbtn.settext (leftbuttontext); Set left button text color int leftbuttontextcolor = Attributes.getcolor (R.styleable.customtitlebar_left_button_text_color,
    Color.White);
   Titlebarleftbtn.settextcolor (Leftbuttontextcolor); else {//Set left picture icon here is two select one either only text or only picture int leftbuttondrawable = Attributes.getresourceid (r.styleable.customt
    Itlebar_left_button_drawable, R.mipmap.titlebar_back_icon);
    if (leftbuttondrawable!=-1) {Titlebarleftbtn.setbackgroundresource (leftbuttondrawable); }//Handle title//First get title to display picture icon int titletextdrawable = Attributes.getresourceid (r.styleable.customtitlebar_tit
   Le_text_drawable,-1); if (titletextdrawable!=-1) {Titlebartitle.setbackgroundresource (Titletextdrawable);
    else {//If not a picture title get the text title String TitleText = attributes.getstring (R.styleable.customtitlebar_title_text); if (!
    Textutils.isempty (TitleText)) {titlebartitle.settext (titletext);
    //Get the caption display color int titletextcolor = Attributes.getcolor (R.styleable.customtitlebar_title_text_color, Color.WHITE);
   Titlebartitle.settextcolor (Titletextcolor); ///Get the right button first//fetch whether to display the right button Boolean rightbuttonvisible = Attributes.getboolean (r.styleable.customtitlebar_right_bu
   Tton_visible, True);
   if (rightbuttonvisible) {titlebarrightbtn.setvisibility (view.visible);
   else {titlebarrightbtn.setvisibility (view.invisible);
   //Set the text String of the right button 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_color, Color.White);
   Titlebarrightbtn.settextcolor (Rightbuttontextcolor); else {//Set right picture icon here is two select one either only text or only picture int rightbuttondrawable = Attributes.getresourceid (r.styleable.custom
    Titlebar_right_button_drawable,-1);
    if (rightbuttondrawable!=-1) {Titlebarrightbtn.setbackgroundresource (rightbuttondrawable);
  } attributes.recycle (); }} public void Settitleclicklistener (Onclicklistener onclicklistener) {if (Onclicklistener!= null) {Titlebarle
   Ftbtn.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 attributes here's no longer the point, for a more intuitive view of the effect, I'm here to implement different requirements in a layout file 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_ height= "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_drawable= "@ Mipmap/titlebar_add_icon "lee:title_background_color=" @color/green "lee:title_text=" Title 1 "/> < 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= "Heading 2" /> <com.whoislcj.views.customtitlebar android:layout_width= "match_parent" android:layout_height= "45DP" Andro id:layout_margintop= "10DP" lee:left_button_text= "left" lee:right_button_tExt= "Right" lee:title_background_color= "@color/red" lee:title_text= "Title 3"/> <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_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" android: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= "title 5"/> & Lt;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_color= "@color/red" Lee:right_button_ drawable= "@mipmap/titlebar_add_icon" Lee:title_Background_color= "@color/blue" lee:title_text= "title 6" lee:title_text_color= "@color/black"/> </linearlayout



 >

Display effects

Summarize:

Through this article we learned that by customizing the combination of controls can actually improve development efficiency, reduce maintenance costs, but also need to maintain a high level of UI design style, otherwise it can only be hehe! So it requires a consensus team to do a good job of the app. This article describes the end of the next article to update what I have not thought well! It is possible to customize the control's event callback, and it is possible to customize ViewGroup to implement a streaming layout, click View.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.