自定义toolbar标题栏

toolbar是什么我们在此也不详细介绍了，还不知道的同学请移步HongYang大神的博客

我们来看下面这张图，这个是一个标准的toolbar所包含的全部内容，从左至右从上至下依次：为菜单（返回）按钮，app图标，主标题，子标题，标题，搜索按钮，自添加按钮，最后一个是啥我也叫不出来，暂且叫它三点按钮好了

然而在实际开发过程中，我们想要的可能不会是这个样式，例如：

或者这样：

还有很多很多，然后我们要怎么实现这个呢？查看toolbar源码的时候，我发现toolbar是直接继承ViewGroup的，这样的话那就好办了，我们可以讲toolbar作为一个容器，也就是我们所熟悉的Layout，直接在里面放东西就好了。说干就干，咱们自定义一个toolbar

（小小的封装一下，以后用起来方便）

<?xml version="1.0" encoding="utf-8"?>
<com.jack.mc.cyg.cygproject.view.widget.custom_widget.CustomToolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/main_color"
    android:fitsSystemWindows="true"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:popupTheme="@style/MyPopStyle">

    <TextView
        android:id="@+id/lt_main_title_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:singleLine="true"
        android:text="返回"
        android:gravity="center"
        android:drawableLeft="@mipmap/icon_back"
        android:textColor="@color/white"
        android:textSize="16dp"
        android:visibility="visible" />

    <TextView
        android:id="@+id/lt_main_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:singleLine="true"
        android:textColor="@android:color/white"
        android:text="标题"
        android:textSize="20dp"
        android:visibility="visible" />

    <TextView
        android:id="@+id/lt_main_title_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginRight="10dp"
        android:gravity="center"
        android:visibility="visible"
        android:drawableRight="@mipmap/icon_add"
        android:textColor="@color/white"
        android:textSize="16dp" />

</com.jack.mc.cyg.cygproject.view.widget.custom_widget.CustomToolbar>


public class CustomToolbar extends Toolbar {

    public CustomToolbar(Context context) {
        super(context);
    }

    public CustomToolbar(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    private TextView mTvMainTitleLeft;
    private TextView mTvMainTitle;
    private TextView mTvMainTitleRight;

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        mTvMainTitleLeft = (TextView) findViewById(R.id.lt_main_title_left);
        mTvMainTitle = (TextView) findViewById(R.id.lt_main_title);
        mTvMainTitleRight = (TextView) findViewById(R.id.lt_main_title_right);
    }

    //设置主title的内容
    public void setMainTitle(String text) {
        this.setTitle(" ");
        mTvMainTitle.setVisibility(View.VISIBLE);
        mTvMainTitle.setText(text);
    }

    //设置主title的内容文字的颜色
    public void setMainTitleColor(int color) {
        mTvMainTitle.setTextColor(color);
    }

    //设置title左边文字
    public void setMainTitleLeftText(String text) {
        mTvMainTitleLeft.setVisibility(View.VISIBLE);
        mTvMainTitleLeft.setText(text);
    }

    //设置title左边文字颜色
    public void setMainTitleLeftColor(int color) {
        mTvMainTitleLeft.setTextColor(color);
    }

    //设置title左边图标
    public void setMainTitleLeftDrawable(int res) {
        Drawable dwLeft = ContextCompat.getDrawable(getContext(), res);
        dwLeft.setBounds(0, 0, dwLeft.getMinimumWidth(), dwLeft.getMinimumHeight());
        mTvMainTitleLeft.setCompoundDrawables(dwLeft, null, null, null);
    }

    //设置title右边文字
    public void setMainTitleRightText(String text) {
        mTvMainTitleRight.setVisibility(View.VISIBLE);
        mTvMainTitleRight.setText(text);
    }

    //设置title右边文字颜色
    public void setMainTitleRightColor(int color) {
        mTvMainTitleRight.setTextColor(color);
    }

    //设置title右边图标
    public void setMainTitleRightDrawable(int res) {
        Drawable dwRight = ContextCompat.getDrawable(getContext(), res);
        dwRight.setBounds(0, 0, dwRight.getMinimumWidth(), dwRight.getMinimumHeight());
        mTvMainTitleRight.setCompoundDrawables(null, null, dwRight, null);
    }

    //设置toolbar状态栏颜色
    public void setToolbarBackground(int res) {
        this.setBackgroundResource(res);
    }

    //设置toolbar左边图标
    public void setToolbarLeftBackImageRes(int res) {
        this.setNavigationIcon(res);
    }

    //设置toolbar左边文字
    public void setToolbarLeftText(String text) {
        this.setNavigationContentDescription(text);
    }

    //设置toolbar的标题
    public void setToolbarTitle(String text) {
        this.setTitle(text);
    }

    //设置toolbar标题的颜色
    public void setToolbarTitleColor(int color) {
        this.setTitleTextColor(color);
    }

    //设置toolbar子标题
    public void setToolbarSubTitleText(String text) {
        this.setSubtitle(text);
    }

    //设置toolbar子标题颜色
    public void setToolbarSubTitleTextColor(int color) {
        this.setSubtitleTextColor(color);
    }

下面我来解释一下：在这里我们可以看成是有两个标题栏，一个是toolbar的，另外一个是自己定义的。然后我在自定义的toolbar中实现了一些方法来设置状态栏，上面xml代码中有一个需要注意的是：

app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"

这个是为了去掉toolbar自带的左边距。

这个只是做了简单一点的titlebar，还有更为复杂的你也可以像上述方法那样，自己往里面添加布局或控件

文／24K纯帅豆（简书作者）
原文链接：http://www.jianshu.com/p/8d59d7a01f4c
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。