自定义toolbar标题栏

原创 2016年08月29日 17:11:46

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 利用Toolbar打造统一风格的标题栏

如何利用Toolbar打造统一风格的标题栏,并且可以动态设置当前页面Title,以及返回上一级图标。一、首先,当然需要设置所有的Activity均不需要ActionBar,在标签设置style: ...
  • MyLero
  • MyLero
  • 2016年10月25日 17:04
  • 4183

Android中ToolBar标题栏的使用步骤

步骤: 1、在style中的Theme文件中去掉ActionBar,该为NoActionBar 2、在Activity.xml布局中文件中使用ToolBar(V4)的控件 ...
  • ytfunnysite
  • ytfunnysite
  • 2017年02月22日 13:48
  • 353

自定义ScrollView实现Toolbar(标题栏)渐变

当下,越来越多的页面Toolbar都会随着界面的滑动呈现不同的透明状态。 如图: 要做成这样的效果有很多种,这篇文章就说一下我今天用到的一种(较为简洁,不喜勿喷...
  • yanjunhui2011
  • yanjunhui2011
  • 2016年12月26日 20:12
  • 626

使用toolBar作为标题栏并使状态栏透明

1.Toolbar 是在 Android 5.0 开始推出的一个 Material Design 风格的导航控件,是actionBar的升级版。相比actionBar,更加的灵活,可任意放置。在现在...
  • meijing11
  • meijing11
  • 2017年02月12日 15:18
  • 335

Toolbar的使用和自定义Toolbar作为标题栏

搞了一个上午中午搞的差不多了,由于公司突然把以前用的自定义布局titleBar替换为Toolbar,我才有幸使用Toolbar,-_-。。。。不过刚用真的好蛋疼,其实和actionBar差不多,好了不...
  • LiuYangQiao
  • LiuYangQiao
  • 2016年06月04日 12:22
  • 8261

自定义toolbar标题栏

toolbar是什么我们在此也不详细介绍了,还不知道的同学请移步HongYang大神的博客 我们来看下面这张图,这个是一个标准的toolbar所包含的全部内容,从左至右从上至下依次:为菜单(返回)按...
  • syusikoku
  • syusikoku
  • 2016年10月29日 21:55
  • 444

自定义 ToolBar 实现标题栏

一 、自定义ToolBar前 ,先贴一下style ,相信大家一定和我一样感到既陌生又熟悉 @color/colorAccent ...
  • cai784921129
  • cai784921129
  • 2017年03月17日 18:13
  • 778

自定义 ToolBar 实现标题栏

MyToolBar自定义view public class MyToolBar extends Toolbar implements TextWatcher {     private E...
  • lixinxin0130
  • lixinxin0130
  • 2018年01月12日 15:09
  • 10

Android打造通用标题栏——让你的App统一标题栏风格

前言 在Android应用实际开发中,标题栏是App必不可少的元素之一(当然,不包括游戏),大部分情况下,系统提供的标题栏并不能完全满足我们的需求,就需要手动去编写标题栏布局,那么问题来了,如果是在...
  • IT_ZJYANG
  • IT_ZJYANG
  • 2016年09月11日 13:26
  • 7547

android滑动toolbar 很炫的标题栏

作为一名程序员,要不断的学习新的技术。不断汲取新的知识。 CoordinatorLayout 坐标局AppBarLayout 用于替换早起的actionbar CollapsingToolbar...
  • tiandiyinghun
  • tiandiyinghun
  • 2016年03月24日 11:31
  • 3168
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义toolbar标题栏
举报原因:
原因补充:

(最多只允许输入30个字)