关闭

自定义toolbar标题栏

标签: toolbar自定义
113人阅读 评论(0) 收藏 举报
分类:

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,还有更为复杂的你也可以像上述方法那样,自己往里面添加布局或控件

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:11575次
    • 积分:368
    • 等级:
    • 排名:千里之外
    • 原创:24篇
    • 转载:2篇
    • 译文:0篇
    • 评论:2条
    文章分类
    文章存档
    最新评论