android開發(fā)中toolbar標配的控件，之前一直寫布局來安排里面文字和圖片，雖然不難但確實麻煩理盆，今天自己弄了一個通用的控件，大家分享一下凑阶≡彻妫看圖

圖.png

下面看代碼

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="zhoufazhan.com.customtoolbar.MainActivity">

    <zhoufazhan.com.customtoolbar.CustomToolBar
        android:id="@+id/customToolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:leftImage="@drawable/ic_arrow_back_white_24dp"
        app:leftText="返回"
        app:leftTextColor="@color/white"
        app:middleText="標題"
        app:middleTextColor="@color/white"
        app:rightText="更多"
        app:rightTextColor="@color/white" />
</LinearLayout>

簡單地不得了，所有的參數(shù)都寫在一個控件里面宙橱，再也不用嵌套和布局了姨俩，里面還實現(xiàn)了按鈕的點擊實現(xiàn)。

接下來介紹一下我是如何實現(xiàn)的
首先toolbar分為3塊區(qū)域师郑，左中右
左邊：圖片加文字环葵，當然也可以單獨圖片或是單獨文字（這里沒有給出圖片）
中間：文字
右邊：文字，也可以是文字加圖片宝冕，也可以是單獨的圖片张遭，與左邊一樣
那么圖片加文字是如何排版的呢，我們知道TextView有一個屬性drawLeft和drawRight等

ToolBar的布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="@color/colorPrimary"
    android:layout_height="50dp">

    <TextView
        android:id="@+id/left"
        android:padding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center"
        />

    <TextView
        android:id="@+id/middle"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:gravity="center"

        />

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:gravity="center"
        />

</RelativeLayout>

超級簡單地梨，就是三個TextView

接下來就是重點了帝璧，自定義CustomToolBar

使用的布局文件就是上面的
自定義控件的第一步就是分析屬性，這里我們要設置湿刽，文字、圖片褐耳、文字的大小诈闺、文字的顏色等。

<resources>
    <declare-styleable name="CustomToolBar">
        <attr name="leftText" format="string" />
        <attr name="middleText" format="string" />
        <attr name="rightText" format="string" />
        <attr name="leftTextSize" format="dimension" />
        <attr name="middleTextSize" format="dimension" />
        <attr name="rightTextSize" format="dimension" />
        <attr name="leftTextColor" format="color" />
        <attr name="middleTextColor" format="color" />
        <attr name="rightTextColor" format="color" />
        <attr name="leftImage" format="reference"/>
        <attr name="rightImage" format="reference"/>
    </declare-styleable>
</resources>

具體的含義已經(jīng)很明確就不解釋了铃芦。
下面看看主要的代碼

public class CustomToolBar  extends RelativeLayout implements View.OnClickListener {
    private float leftTextSize;
    private float middleTextSize;
    private float rightTextSize;
    private int leftTextColor;
    private int middleTextColor;
    private int rightTextColor;
    private String leftText;
    private String middleText;
    private String rightText;
    private int leftImage;
    private int rightImage;
    private TextView leftView;
    private TextView middleView;
    private TextView rightView;

    public CustomToolBar(Context context) {
        this(context, null);
    }

    public CustomToolBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomToolBar, defStyleAttr, 0);

        initView(typedArray);
        typedArray.recycle();

    }

    public void initView(TypedArray typedArray) {
        LayoutInflater.from(getContext()).inflate(R.layout.toolbar, this);
        leftView = (TextView) findViewById(R.id.left);
        leftView.setOnClickListener(this);
        middleView = (TextView) findViewById(R.id.middle);
        rightView = (TextView) findViewById(R.id.right);
        rightView.setOnClickListener(this);
        leftText = typedArray.getString(R.styleable.CustomToolBar_leftText);
        rightText = typedArray.getString(R.styleable.CustomToolBar_rightText);
        middleText = typedArray.getString(R.styleable.CustomToolBar_middleText);
        leftTextSize = typedArray.getDimension(R.styleable.CustomToolBar_leftTextSize, 20);

        middleTextSize = typedArray.getDimension(R.styleable.CustomToolBar_middleTextSize, 20);
        rightTextSize = typedArray.getDimension(R.styleable.CustomToolBar_rightTextSize, 20);

        leftTextColor = typedArray.getColor(R.styleable.CustomToolBar_leftTextColor, getResources().getColor(R.color.colorPrimary));
        middleTextColor = typedArray.getColor(R.styleable.CustomToolBar_middleTextColor, getResources().getColor(R.color.colorPrimary));
        rightTextColor = typedArray.getColor(R.styleable.CustomToolBar_rightTextColor, getResources().getColor(R.color.colorPrimary));

        leftImage = typedArray.getResourceId(R.styleable.CustomToolBar_leftImage, 0);
        rightImage = typedArray.getResourceId(R.styleable.CustomToolBar_rightImage, 0);

        if (leftImage > 0) {
            setLeftImage(leftImage);
        } else {
            setLeftText(leftText);
        }
        if (rightImage > 0) {
            setRightImage(rightImage);
        } else {
            setRightText(rightText);
        }
        setLeftTextSize(leftTextSize);
        setLeftTextColor(leftTextColor);
        setMiddleTextColor(middleTextColor);
        setMiddleTextSize(middleTextSize);
        setMiddleText(middleText);
        setRightTextColor(rightTextColor);
        setRightTextSize(rightTextSize);
    }


    public CustomToolBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.left:
                if (toolBarClick != null) {
                    toolBarClick.leftClick();
                }
                break;
            case R.id.right:
                if (toolBarClick != null) {
                    toolBarClick.rightClick();
                }
                break;
        }
    }

    public void setLeftTextSize(float leftTextSize) {
        leftView.setTextSize(leftTextSize);
    }

    public void setMiddleTextSize(float middleTextSize) {
        middleView.setTextSize(middleTextSize);
    }

    public void setRightTextSize(float rightTextSize) {
        rightView.setTextSize(rightTextSize);
    }

    public void setLeftTextColor(int leftTextColor) {
        leftView.setTextColor(leftTextColor);
    }

    public void setMiddleTextColor(int middleTextColor) {
        middleView.setTextColor(middleTextColor);
    }

    public void setRightTextColor(int rightTextColor) {
        rightView.setTextColor(rightTextColor);
    }

    public void setLeftText(String leftText) {
        leftView.setText(leftText);
    }

    public void setMiddleText(String middleText) {
        middleView.setText(middleText);
    }

    public void setRightText(String rightText) {
        rightView.setText(rightText);
    }

    public void setLeftImage(int leftImage) {
        setLeftText(leftText);
        Drawable drawable = getResources().getDrawable(leftImage, null);
        drawable.setBounds(0, 0, drawable.getMinimumWidth() / 2, drawable.getMinimumHeight() / 2);
        leftView.setCompoundDrawables(drawable, null, null, null);
    }

    public void setRightImage(int rightImage) {
        setRightText(rightText);
        Drawable drawable = getResources().getDrawable(rightImage, null);
        drawable.setBounds(0, 0, drawable.getMinimumWidth() / 2, drawable.getMinimumHeight() / 2);
        rightView.setCompoundDrawables(null, null, drawable, null);
    }

    interface ToolBarClick {
        void leftClick();

        void rightClick();
    }

    public ToolBarClick toolBarClick;

    public void setToolBarClick(ToolBarClick toolBarClick) {
        this.toolBarClick = toolBarClick;
    }
}

代碼不多雅镊，也很簡單，基本都是初始化一些參數(shù)刃滓，然后定義了一個接口用于點擊回調(diào)仁烹。