Android Custom View combination controls to implement the top bar of the app like the _android

This example for you to share the Android custom view of the combination of control, The imitation of the app top bar code, for your reference, the specific content as follows

Effect Chart:

Analysis: the left and right sides can be textview and button, set Drawabletop can be, the middle of the look like EditText, but the use of Taobao Cat and other similar app will find that click Search is not in the current activit to search, is to jump to another page, so use the TextView and set the background. Implementation process

Parameter list:

Set properties File: Create Attrs.xml file under values, add attributes that need to be customized.

<?xml version= "1.0" encoding= "Utf-8"?>
<resources>
  <declare-styleable name= "Topbar" >
    <attr name= "Left_text" format= "string"/>//left text
    <attr name= "Right_text" format= "string"/>// Right text
    <attr name= "Center_text" format= "string"/>//middle text
    <attr name= "Side_text_size" Dimension "/>//Border button size <attr name=" center_text_size "format=" Dimension "/>//
    middle Text size
    <attr name=" Text_color "format=" color/>//text colors <attr name= "Back_color"
    format= "color"/>//background color <attr
    "Left_icon" format= "reference"/>//left icon <attr name= "Right_icon"
    format= "reference"/>//right icon
    <attr name= "Center_icon" format= "reference"/>//the middle of the icon
  </declare-styleable>
</ Resources>

Get the properties set in the layout file in the code:

TypedArray array = GetContext (). Obtainstyledattributes (Attrs, r.styleable.topbar);
    Mlefttext = array.getstring (r.styleable.topbar_left_text);
    Mrighttext = array.getstring (r.styleable.topbar_right_text);
    Mcentertext = array.getstring (r.styleable.topbar_center_text);
    side_text_size = (int) array.getdimension (r.styleable.topbar_side_text_size);
    center_text_size = (int) array.getdimension (r.styleable.topbar_center_text_size);
    Mleft_icon = array.getdrawable (R.styleable.topbar_left_icon);
    Mright_icon = array.getdrawable (R.styleable.topbar_right_icon);
    Mcenter_icon = array.getdrawable (R.styleable.topbar_center_icon);
    Text_color = Array.getcolor (R.styleable.topbar_text_color, Getresources (). GetColor (R.color.coloraccent));
    Back_color = Array.getcolor (R.styleable.topbar_back_color, Getresources (). GetColor (R.color.colorprimary));
    Array.recycle ();

Set Background color:

SetBackgroundColor (Back_color);

To add a button:

Set Content Mleftbutton = New button (GetContext ());//Create button Mleftbutton.settext (mlefttext);//Set Text Mleftbutton.settextsize ( side_text_size), set Text size Mleftbutton.settextcolor (text_color),//Set text color Mleftbutton.setbackgroundcolor ( color.transparent)//Set the background of the button is transparent layoutparams leftparams = new Layoutparams (80, 150);//Set layout mleft_icon.setbounds (0, 0, 55, 55); Sets the size of the icon mleftbutton.setcompounddrawables (null, MLEFT_ICON, NULL, NULL);
Add icon mleftbutton.setgravity (gravity.center);//Set in AddView (Mleftbutton, leftparams);//Add button//Right button similar, no comment
Mrightbutton = new Button (GetContext ());
Mrightbutton.settext (Mrighttext);
Mrightbutton.settextsize (side_text_size);
Mrightbutton.settextcolor (Text_color);
Mrightbutton.setbackgroundcolor (color.transparent);
Mright_icon.setbounds (0, 0, 55, 55);
Layoutparams rightparams = new Layoutparams (80, 150);
Mrightbutton.setcompounddrawables (NULL, MRIGHT_ICON, NULL, NULL);
Mrightbutton.setgravity (Gravity.center);

 AddView (Mrightbutton, rightparams);

Add middle TextView: (layout is arranged in the order of addition, so the middle TextView should be added in the middle of two buttons):

Mcentertextview = new TextView (GetContext ());//Initialize TextView
mcentertextview.settext (mcentertext);//Set Text
Mcentertextview.settextsize (center_text_size),//Set Text size
mcentertextview.settextcolor (text_color);//Set text color
mcentertextview.setgravity (gravity.center_vertical | Gravity.left)//Set text to left
mcenter_icon.setbounds (0, 0, 50, 50);/Set icon size
Mcentertextview.setcompounddrawables (Mcenter_icon, NULL, NULL, NULL);/Add icon
layoutparams params = new Layoutparams (0, 70);//Create Layout Properties  Mcentertextview.setbackground (Getresources (). getdrawable (R.drawable.bg_search) )/Set background
params.weight = 1;//set weights
params.gravity = gravity.center;//Set Center
params.setmargins (10, 0, 10, 0 )//Set bounds
addview (Mcentertextview, params);//Add

To handle the Wrap_content property of a height:

Override the Onmeasure property to set a specified value for wrap_content

@Override
protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {
    super.onmeasure ( Widthmeasurespec, Heightmeasurespec);
    int specwidth = measurespec.getsize (WIDTHMEASURESPEC);//Get width
    int specheight = Measurespec.getsize ( HEIGHTMEASURESPEC)//Get height
    int heightmode = Measurespec.getmode (HEIGHTMEASURESPEC);//Get height measurement mode

    int height = 0 ;//Initialize the height to be set if
    (Heightmode = = measurespec.exactly) {//If the value is determined, including match_parent
      height = specheight;// The final value is the measured value
    } else {
      height = 120;//If the value is not determined, set to the specified height if
      (heightmode = measurespec.at_most) {//if it is WRAP_ The content takes the measured value and specifies the minimum value as the final value of the
        height = math.min (specheight,);
      }
    Setmeasureddimension (specwidth, height);//Set Width high property
  }

Add Click event:

Need to customize a callback

Public interface OnClick {
    void Onleftbuttonclick ();

    void Oncenterbuttonclick ();

    void Onrightbuttonclick ();
  }

Create a callback and create a Setx method

Private onclick onclick;

  public void Setonclick (Topbar.onclick onclick) {
    this.onclick = onclick;
  }

Add a click event when adding a button

Mleftbutton.setonclicklistener (New Onclicklistener () {
      @Override public
      void OnClick (View v) {
        if ( OnClick!= null) {
          onclick.onleftbuttonclick ();}}}
    );
Mcentertextview.setonclicklistener (New Onclicklistener () {
      @Override public
      void OnClick (View v) {
        if ( OnClick!= null) {
          onclick.oncenterbuttonclick ();}}}
    );
 Mrightbutton.setonclicklistener (New Onclicklistener () {
      @Override public
      void OnClick (View v) {
        if ( OnClick!= null) {
          onclick.onrightbuttonclick ();}}}
    );

This custom combination control is complete, and the following methods are used:

Layout file:

  <com.brioa.diyviewtest.view.topbar xmlns:app= "Http://schemas.android.com/apk/res-auto"
    android:id= "@+id/ Topbar "
    android:layout_width=" match_parent "
    android:layout_height=" wrap_content "
    android:layout_" Alignparenttop= "true"
    app:center_icon= "@mipmap/ic_search"
    app:center_text= "input keyword search"
    app:center_ Text_size= "10SP"
    app:left_icon= "@mipmap/ic_scan"
    app:left_text= "Sweep" app:right_icon= "
    @mipmap/ic_ Msg "
    app:right_text=" message "
    app:side_text_size=" 6sp "
    app:text_color=" #ffff ">

  </ Com.brioa.diyviewtest.view.topbar>

Code settings:

Mtopbar = (Topbar) Findviewbyid (R.id.topbar);
    Mtopbar.setonclick (New Topbar.onclick () {
      @Override public
      void Onleftbuttonclick () {
        Toast.maketext ( Mcontext, "Leftclick", Toast.length_short). Show ();

      @Override public
      void Oncenterbuttonclick () {
        toast.maketext (mcontext, "Centerclick", Toast.length_short). Show ();

      }

      @Override public
      void Onrightbuttonclick () {
        toast.maketext (mcontext, "RightClick", Toast.length_short). Show ();

      }
    });

Final effect:

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