Android composite controls enable powerful custom controls _android

In general, Android implements custom controls in three different ways.

Ⅰ, inherits existing controls, and expands the functionality of its controls.

Ⅱ, combine existing controls to achieve more powerful controls.

Ⅲ, overriding view implementation of new controls

As I've said before, how to inherit an existing control from the Define control:Android inherits existing controls extend implementation custom Controls TextView, we'll discuss the second topic. How to combine controls to implement a powerful custom control.

Take a look at the benefits of creating a composite control, and creating a composite control can create a collection of controls that have a combination of features. So how do we usually do it, we usually inherit a suitable viewgroup, and then create a new function for him, so as to form a new function of the control. We also specify some new attributes for the control, which makes him very extensible. Okay, so much for the crap, here's what we'll do with the controls in almost every app--the title bar, for example--to introduce the practice of combining controls.

First, I'll answer why I want to reuse the title bar:

Ⅰ, so that the application has a unified style.

Ⅱ, reuse title bar, but also we will change the title bar is very convenient, really achieve "write, run Everywhere" effect, without the great trouble, each page is modified.

Ⅲ, to the caller exposed to the call interface, so more flexible control of the title bar, so that its function more powerful.

So, as the title bar looks like, see the figure below:

　　

Let's start with a simple analysis, which is a custom control that, like the native controls on Android, makes it easier for callers to set properties on a control. Therefore, it is very necessary to set some properties for this control, it is very simple to provide some custom attributes for a view, just create a Attrs.xml property file under the values directory in the RES resource directory and define the attributes you need in the file. This custom control has custom properties as follows:

 <declare-styleable name= "titlebar" >
  <attr name= "title" format= "string"/>
  <attr "Name=" Titletextsize "format=" Dimension "/> <attr name=" Titletextcolor "
  format=" color "/> <attr name=
  " Titlelefttext "format=" string "/>
  <attr name=
  " Titleleftbackground "format=" Color|reference "/>" <attr name= "Titlelefttextcolor" format= "color"/> <attr "name=" Titlerighttext "
  string" format=
  <attr name= "Titlerightbackground" format= "color|reference"/> <attr name=
  "Titlerighttextcolor" format= "Color"/>
 </declare-styleable>

We use the <declare-styleable> tag to declare the custom attributes to use, and use the Name property to determine the names of the references. Use format to determine the formatting of the reference data. In this custom control custom attribute corresponds to the list as follows:

Ⅰ, title--text corresponding to the title

Ⅱ, titletextsize--text size corresponding to the caption

Ⅲ, titletextcolor--the text color of the corresponding title

Ⅳ, titlelefttext--text corresponding to the left button

Ⅴ, titleleftbackground--corresponding to the background of the left button

Ⅵ, titlelefttextcolor--the text color corresponding to the left button

Ⅶ, titlerighttext--the text corresponding to the right button

Ⅴ, titlerightbackground--corresponding to the background of the right button

Ⅵ, titlerighttextcolor--corresponding to the right button text color

Here, you need to point out the background of the left and right buttons, that can be color type, can also correspond to the corresponding picture, so we can use the "|" To separate the different properties.

Well, now that we have the definition of a custom attribute, we need to customize a titlebar control to get these well-defined property values, and above, we refer to generic composite controls that generally inherit and ViewGroup controls, and here, for our convenience, Inherit and Relativelayout. How to get the property value, the system provides typedarray so that the data structure is very convenient to get the property set, get the property code as follows:

 private void Initattrs (AttributeSet attrs) {TypedArray ta = This.getcontext (). Obtains
  Tyledattributes (Attrs, R.styleable.titlebar);
   if (Ta!= null) {title = Ta.getstring (R.styleable.titlebar_title);
   Titletextsize = Ta.getdimension (r.styleable.titlebar_titletextsize, 16);
   Titletextcolor = ta. GetColor (r.styleable.titlebar_titletextcolor, 0);
   Titlelefttext = ta.getstring (R.styleable.titlebar_titlelefttext);
   Titleleftbackground = ta. getdrawable (R.styleable.titlebar_titleleftbackground);
   Titlelefttextcolor = Ta.getcolor (r.styleable.titlebar_titlelefttextcolor, 0);
   Titlerighttext = ta.getstring (R.styleable.titlebar_titlerighttext);
   Titlerightbackground = ta. getdrawable (R.styleable.titlebar_titlerightbackground);
   Titlerighttextcolor = Ta.getcolor (r.styleable.titlebar_titlerighttextcolor, 0);
  Ta.recycle (); }
 }

Here, it is worth mentioning that you need to call the Typedarray recycle method to reclaim the resource.

Now that we have the properties of this composite control, the next thing we want to do is combine the buttons and text boxes of this combo control, and the combined code looks like this:

 private void Initview () {LeftButton = new Button (GetContext ());
  Titletextview = new TextView (GetContext ());

  Rightbutton = new Button (GetContext ());
  Leftbutton.settextcolor (Titlelefttextcolor);
  Leftbutton.setbackgrounddrawable (Titleleftbackground);

  Leftbutton.settext (Titlelefttext);
  Rightbutton.settextcolor (Titlerighttextcolor);
  Rightbutton.setbackgrounddrawable (Titlerightbackground);

  Rightbutton.settext (Titlerighttext);
  Titletextview.settext (title);
  Titletextview.settextsize (titletextsize);

  Titletextview.settextcolor (Titletextcolor);
  Mleftlayoutparams = new Layoutparams (layoutparams.wrap_content, layoutparams.match_parent);
  Mleftlayoutparams.addrule (Relativelayout.align_parent_left);

  AddView (LeftButton, mleftlayoutparams);
  Mcenterlayoutparams = new Layoutparams (layoutparams.wrap_content, layoutparams.match_parent);
  Mcenterlayoutparams.addrule (relativelayout.center_in_parent);

  AddView (Titletextview, mcenterlayoutparams); MrightlayouTparams = new Layoutparams (layoutparams.wrap_content, layoutparams.match_parent);
  Mrightlayoutparams.addrule (Relativelayout.align_parent_right);
 AddView (Rightbutton, mrightlayoutparams);
 }

We saw that some of the attributes were defined above, but they were copied to the combined controls, making the composite control "flesh and Blood".

Since this is a custom control, is a UI template, should each caller click on the right and left button, the implementation may be different, we should do is to expose the interface outward, so that the caller flexible control of these two buttons. Then the interface is defined as follows:

 Public interface Clicklistener {
  void Click (int tag);
 }

 Private Clicklistener listener;

In the template method, for the left and right button to increase the Click event, call the interface of the click Method, the code looks like this:

private void Setlistener () {
  leftbutton.setonclicklistener (this);
  Rightbutton.setonclicklistener (this);
 }

 @Override public
 void OnClick (View v) {
  if (listener!= null) {
   if (v = = LeftButton) {
    listener. Click (Left_button);
   } else if (v = = Rightbutton) {
    listener. Click (Right_button);
   }}}

 

In the code, we effectively judge whether the left button clicked, or the right button clicked.

With the definition of the interface in this template method, we call this callback code externally as follows:

Titlebar.setlistener (New Clicklistener () {
   
   @Override public
   void Click (int tag) {
    switch (tag)
   {case Titlebar.left_button:
    toast.maketext (Mainactivity.this, "left button clicked", 0). Show ();
    break;
   Case Titlebar.right_button:
    toast.maketext (Mainactivity.this, "right button was clicked", 0). Show ();
    break;
   Default: Break;}}}
  );

In this way, it can effectively control the click events of the left and right buttons.

With so much to do, you want to be able to invoke the combined control effectively, and the code for the combined control is called as follows:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"
  xmlns:custom= "http:// Schemas.android.com/apk/res/com.example.test "
 xmlns:tools=" Http://schemas.android.com/tools "
 android: Layout_width= "Match_parent"
 android:layout_height= "match_parent"
 android:padding= "5DP"
 tools: Context= ". Mainactivity ">

 <!--<include layout=" @layout/topbar "/>-->

 <com.example.test.titlebar
  android:id= "@+id/titlebar"
  android:layout_width= "match_parent"
  android:layout_height= "40DP"
  custom:titleleftbackground= "@drawable/blue_button"
  custom:titlelefttext= "Back"
  Custom: Titlelefttextcolor= "#FFFFFF"
  custom:titlerightbackground= "@drawable/blue_button"
  Custom: titlerighttext= "More"
  custom:titlerighttextcolor= "#FFFFFF"
  custom:title= "custom title"
  : Titletextcolor= "#123412"
  custom:titletextsize= "10sp"/>

</RelativeLayout>

Here, what you need to tell us is that the custom control differs from the native control call:

The Ⅰ, referencing a custom control must reference its full class name.

When you Ⅱ, reference a custom control custom property, you must refer to the custom namespace as follows:

Xmlns:custom= "Http://schemas.android.com/apk/res/com.example.test"

This control, the final effect of the operation is:

The above is the entire content of this article, I hope to help you learn.