Android custom composite controls-toolbar and Android controls-toolbar

Android custom composite controls-toolbar and Android controls-toolbar

Recently, I was studying Android APP development and used the toolbar Control. I first used the include layout method. However, I felt that the encapsulation was poor and I changed it to a custom composite control method.

 

The tool used is android studio 2.2 (AS for short ).

 

1. Create a new custom control, such. AS creates three files, a java file, an xml file in layout (this is a layout file), and an xml file in values (this is an attribute file)

2. Modify the layout file. The Code is as follows. RelativeLayout is used here, And match_parent is selected for both width and height. The actual width is written in the place where the control is called.

The layout is very simple. The left button (The onclick method can be defined), the middle title, and the right button (hidden, replaceable, and onclick)

<RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/toolbar_all1"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:id="@+id/toolbar_left_button1"        android:layout_width="20dp"        android:layout_height="20dp"        android:layout_alignParentLeft="true"        android:layout_centerVertical="true"        android:layout_marginLeft="10dp"        android:src="@mipmap/ic_top_back"/>    <TextView        android:id="@+id/toolbar_title1"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:gravity="center"        android:textColor="@color/toolbar_text"        android:textSize="@dimen/toolbar_text_size"/>    <ImageView        android:id="@+id/toolbar_right_button1"        android:layout_width="30dp"        android:layout_height="30dp"        android:layout_alignParentRight="true"        android:layout_centerVertical="true"        android:layout_marginRight="10dp"/></RelativeLayout>

3. Modify the attribute file. Here, a property titleText is defined to set the title for the toolbar in the layout file.

<resources>    <declare-styleable name="ToolbarControl">        <attr name="titleText" format="string"/>    </declare-styleable></resources>

 

4. Modify the java file. The ToolbarControl class inherits from the Toolbar class. The titleStr attribute is defined and getter and setter are generated. The attribute names and types must be consistent with those defined in the attribute file. Otherwise, problems may occur.

It also defines the title setting for the code, and the icon and onclick event of the function menu on the right of the Code. And The onclick event of the left-side backend button (if you want to encapsulate the backend event in the control, but you cannot find a good method, you can only add an OnclickListenser from the called place. If you have a method to encapsulate the event in the control, please advise)

 

Public class ToolbarControl extends Toolbar {private static final String TAG = ToolbarControl. class. getSimpleName (); private String titleText; @ BindView (R. id. toolbar_left_button1) public ImageView leftButton; @ BindView (R. id. toolbar_title1) public TextView titleTextView; @ BindView (R. id. toolbar_right_button1) public ImageView rightButton; public ToolbarControl (Context context) {super (context); init (Context, null);} public ToolbarControl (Context context, AttributeSet attrs) {super (context, attrs); init (context, attrs);} private void init (Context context, attributeSet attrs) {View view = LayoutInflater. from (context ). inflate (R. layout. toolbar_control, this, true); ButterKnife. bind (this, view); // very important setContentInsetsRelative (0, 0); // Load attributes final TypedArray a = getContext (). obtainS TyledAttributes (attrs, R. styleable. toolbarControl, 0, 0); titleText =. getString (R. styleable. toolbarControl_titleText); Log. d (TAG, titleText); titleTextView. setText (titleText);. recycle ();} public void setTitle (String titleStr) {if (titleTextView! = Null) {titleTextView. setText (titleStr) ;}} public void setTitleByResourceId (int rid) {if (titleTextView! = Null) {titleTextView. setText (rid) ;}} public void setRightButtonImage (int resourceId) {if (rightButton! = Null) {rightButton. setImageResource (resourceId) ;}} public void showImage () {if (rightButton! = Null) {rightButton. setVisibility (View. VISIBLE) ;}} public void hideImage () {if (rightButton! = Null) {rightButton. setVisibility (View. GONE) ;}} public void hide () {this. setVisibility (View. GONE);} public void setBackButtonOnClickListerner (OnClickListener listerner) {if (leftButton! = Null & listerner! = Null) {leftButton. setOnClickListener (listerner) ;}} public void setButtonOnClickListener (OnClickListener listener) {if (rightButton! = Null & listener! = Null) {rightButton. setOnClickListener (listener) ;}} public String getTitleText () {return titleText;} public void setTitleText (String titleText) {this. titleText = titleText ;}}

 

5. Reference in layout. Set the color and height of the control to wrap_content and set minHeight? Attr/actionBarSize

    <com.example.ben.tracktest.controls.ToolbarControl        android:id="@+id/about_me_toolbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="?attr/colorPrimary"        android:minHeight="?attr/actionBarSize"        app:titleText="@string/about_me_title">    </com.example.ben.tracktest.controls.ToolbarControl>

 

6. initialize the control in the code. Set the space to support actionbar, disable automatic title display, set the back button event (that is, finish), set the icon of the function menu on the right, and click the event.

Private void initToolBar () {setsuppactionactionbar (toolbar); getSupportActionBar (). setDisplayShowTitleEnabled (false); toolbar. setBackButtonOnClickListerner (new View. onClickListener () {@ Override public void onClick (View view) {AboutMeActivity. this. finish () ;}}); toolbar. setRightButtonImage (R. drawable. me); toolbar. setButtonOnClickListener (new View. onClickListener () {@ Override public void onClick (View view) {// your own functions }});}

 

All right, a complete toolbar Control's extremely calling function has been completed. Check the effect.

 

If you have any questions, please advise