通用ToolBar

android开发中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>

简单地不得了，所有的参数都写在一个控件里面，再也不用嵌套和布局了，里面还实现了按钮的点击实现。

接下来介绍一下我是如何实现的
首先toolbar分为3块区域，左中右
左边：图片加文字，当然也可以单独图片或是单独文字（这里没有给出图片）
中间：文字
右边：文字，也可以是文字加图片，也可以是单独的图片，与左边一样
那么图片加文字是如何排版的呢，我们知道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>

具体的含义已经很明确就不解释了。
下面看看主要的代码

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;
    }
}

代码不多，也很简单，基本都是初始化一些参数，然后定义了一个接口用于点击回调。