Titlebar customization process for android composite controls

Titlebar customization process for android composite controls

I believe that "I am born to be useful". Everyone has his role. Maybe his role is not obvious to others, maybe his role is to please others, but please do not forget that he can play his role through continuous efforts to improve his value.

In normal android development, do you have a problem, that is, you have to write a layout on your own every time, or introduce a layout, but every time you have to initialize the control in the layout. To solve this problem, Google officially launched ActionBar and the ToolBar that subsequently replaced ActionBar to make our development easier, such: using ToolBar + DrawLayout makes it easy to implement the menu effect of the push cool app. The emergence of such a control greatly reduces the burden on programmers, making android development more and more simple. I believe there will be more similar good controls in the future to simplify app development, this is what we look forward ~.

This article will introduce a self-combined control Titlebar to simplify our development. The implementation of this control combination is a physical activity (no technical content), so let's take a look at the effect to be achieved first, if you think you can write it out with your eyes closed, you can directly jump to the end of this article to give me a thumbs up for my hard work, haha.

:

To implement this composite control, we need to customize the attributes, write a class to inherit the ViewGroup, and add the subview with code in the constructor. Therefore, we will first customize our attributes.

1. Custom Attributes

By observing the above, we found that we need the following 11 attributes:

LeftButtonText leftButtonTextColor leftButtonTextSize leftButtonImage: Image titleText titleColor titleSize rightButtonText rightButtonTextColor rightButtonTextSize rightButtonImage: image of the right button

The meaning of each attribute is known by name. Therefore, we define our attributes in the resource file attrs. xml:

Note:

We can use attrs. xml Define our attributes directly under the node instead Defines or references under a node and then directly uses it in the layout file. However, this method is not recommended because some attributes are added to an attribute set. Easy to manage and use. If you want to define the same property type as that defined by the system when the custom property and system property are named again, you can directly Add Node but not the format attribute;

2. inherit ViewGroup to complete widget combination

? Observe the effect we want to implement and find that using the RelativeLayout subclass of ViewGroup can be completed very conveniently. Therefore, create a class that inherits RelativeLayout and overwrite the three constructor methods. In the constructor, obtain the values of custom attributes in the layout.

private void init(Context context,AttributeSet attrs) {    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Titlebar);    mLeftButtonText = typedArray.getString(R.styleable.Titlebar_leftButtonText);    mLeftButtonTextColor = typedArray.getColor(R.styleable.Titlebar_leftButtonTextColor, Color.GRAY);    mLeftButtonSize = typedArray.getDimension(R.styleable.Titlebar_leftButtonTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));    mLeftButtonImage = typedArray.getDrawable(R.styleable.Titlebar_leftButtonImage);    mTitleButtonText = typedArray.getString(R.styleable.Titlebar_titleText);    mTitleButtonTextColor = typedArray.getColor(R.styleable.Titlebar_titleColor, Color.GRAY);    mTitleButtonSize = typedArray.getDimension(R.styleable.Titlebar_titleSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));    mRightButtonText = typedArray.getString(R.styleable.Titlebar_rightButtonText);    mRightButtonTextColor = typedArray.getColor(R.styleable.Titlebar_rightButtonTextColor, Color.GRAY);    mRightButtonSize = typedArray.getDimension(R.styleable.Titlebar_rightButtonTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));    mRightButtonImage = typedArray.getDrawable(R.styleable.Titlebar_rightButtonImage);    typedArray.recycle();}

After using the TypedArray resource, remember to recycle the resource, just like closing the connection and closing the IO stream after using the database.

After obtaining the value of the custom property, we also need to build the left-side buttons, middle headers, and right-side buttons using the code:

Private void initView (Context context) {if (mLeftButtonImage = null & mLeftButtonText! = Null) {// when the left button image is not set and the left button text attribute is set, add the left text button mLeftTextView = new TextView (context); mLeftTextView. setText (mLeftButtonText); mLeftTextView. setTextColor (mLeftButtonTextColor); mLeftTextView. setTextSize (mLeftButtonSize); RelativeLayout. layoutParams leftParams = new RelativeLayout. layoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. WRAP_CONTENT); leftParams. addRule (RelativeLayout. ALIGN_PARENT_LEF T); leftParams. addRule (RelativeLayout. CENTER_VERTICAL); addView (mLeftTextView, leftParams);} else if (mLeftButtonImage! = Null) {// Add the left-side image button RelativeLayout. layoutParams leftParams = new RelativeLayout. layoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. WRAP_CONTENT); leftParams. addRule (RelativeLayout. ALIGN_PARENT_LEFT); leftParams. addRule (RelativeLayout. CENTER_VERTICAL); mLeftButton = new ImageView (context); mLeftButton. setImageDrawable (mLeftButtonImage); addView (mLeftButton, leftParams);} if (mTitleButtonText! = Null) {// Add the intermediate title TextView titleTextView = new TextView (context); titleTextView. setText (mTitleButtonText); titleTextView. setTextColor (mTitleButtonTextColor); titleTextView. setTextSize (mTitleButtonSize); RelativeLayout. layoutParams titleTextViewParams = new RelativeLayout. layoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. WRAP_CONTENT); titleTextViewParams. addRule (RelativeLayout. CENTER_IN_PARENT ); AddView (titleTextView, titleTextViewParams);} if (mRightButtonImage = null & mRightButtonText! = Null) {// when you have not set the button image on the right and set the button text attribute on the left, add the right text button mRightTextView = new TextView (context); mRightTextView. setText (mRightButtonText); mRightTextView. setTextColor (mRightButtonTextColor); mRightTextView. setTextSize (mRightButtonSize); RelativeLayout. layoutParams rightParams = new RelativeLayout. layoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. WRAP_CONTENT); rightParams. addRule (RelativeLayout. ALIGN_P ARENT_RIGHT); rightParams. addRule (RelativeLayout. CENTER_VERTICAL); addView (mRightTextView, rightParams);} else if (mRightButtonImage! = Null) {// Add the right image button RelativeLayout. layoutParams rightParams = new RelativeLayout. layoutParams (LayoutParams. WRAP_CONTENT, LayoutParams. WRAP_CONTENT); rightParams. addRule (RelativeLayout. ALIGN_PARENT_RIGHT); rightParams. addRule (RelativeLayout. CENTER_VERTICAL); mRightButton = new ImageView (context); mRightButton. setImageDrawable (mRightButtonImage); addView (mRightButton, rightParams );}}

Note: Because the buttons on the left and right can both use text and images, here I use two controls to represent these two situations, after you set the button image on the left, the button text on the left is not added.

Next, we need to add event listening for the buttons on the left and right. Therefore, we need to define an interface first:

/*** Click the event interface on the button */public interface OnButtonClickListener {void onLeftClick (); void onRightClick ();}

Set button listening:

/*** Set the Click Event * @ param onButtonClickListener */public void setOnButtonClickListener (final OnButtonClickListener onButtonClickListener) {if (onButtonClickListener! = Null) {if (mLeftTextView! = Null) {mLeftTextView. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {onButtonClickListener. onLeftClick () ;}});} if (mLeftButton! = Null) {mLeftButton. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {onButtonClickListener. onLeftClick () ;}});} if (mRightTextView! = Null) {mRightTextView. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {onButtonClickListener. onRightClick () ;}});} if (mRightButton! = Null) {mRightButton. setOnClickListener (new OnClickListener () {@ Override public void onClick (View v) {onButtonClickListener. onRightClick ();}});}}}

Use our composite controls in the layout:

Include_titlebar.xml

Note:

Introduction of namespaces;

The custom attributes can be combined in four cases:

Text button on the left, text button on the right, text button on the left, image button on the right, text button on the left, image button on the left, and image button on the right. When you need a title bar similar to the preceding one, you can directly include the layout file in the layout, then, initialize the control in activity, fragment, or other places where the control is used and set the interface listening.

Initialize and set the interface listening in activity:

Titlebar titlebar = (Titlebar) findViewById (R. id. titlebar); titlebar. setOnButtonClickListener (new Titlebar. onButtonClickListener () {@ Override public void onLeftClick () {Toast. makeText (MainActivity. this, "the left button is clicked", 0 ). show () ;}@ Override public void onRightClick () {Toast. makeText (MainActivity. this, "the right button is clicked", 0 ). show ();}});

It is a physical activity, and the ability to create and layout controls using code is exercised. There is nothing to summarize ~

Demo download: http://download.csdn.net/detail/ydxlt/9453262