Android自定义ToolBar标题栏
GleBunning
8年前
<p>我们来看下面这张图,这个是一个标准的toolbar所包含的全部内容,从左至右从上至下依次:为菜单(返回)按钮,app图标,主标题,子标题,标题,搜索按钮,自添加按钮,最后一个是啥我也叫不出来,暂且叫它三点按钮好了</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/27c0bc02e02012110c7f019bc4507741.jpg"></p> <p>然而在实际开发过程中,我们想要的可能不会是这个样式,例如:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9bb32f46f7af91075373edba282dcbec.jpg"></p> <p>或者这样:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/878555a970c7451b48c64f57ffa3269d.jpg"></p> <p>还有很多很多,然后我们要怎么实现这个呢?查看toolbar源码的时候,我发现toolbar是直接继承ViewGroup的,这样的话那就好办了,我们可以讲toolbar作为一个容器,也就是我们所熟悉的Layout,直接在里面放东西就好了。说干就干,咱们自定义一个toolbar</p> <p>(小小的封装一下,以后用起来方便)</p> <pre> <code class="language-java"><?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); }</code></pre> <p>下面我来解释一下:在这里我们可以看成是有两个标题栏,一个是toolbar的,另外一个是自己定义的。然后我在自定义的toolbar中实现了一些方法来设置状态栏,上面xml代码中有一个需要注意的是:</p> <pre> <code class="language-java">app:contentInsetLeft="0dp" app:contentInsetStart="0dp"</code></pre> <p>这个是为了去掉toolbar自带的左边距。</p> <p>这个只是做了简单一点的titlebar,还有更为复杂的你也可以像上述方法那样,自己往里面添加布局或控件</p> <p> </p> <p>来自:http://www.jianshu.com/p/8d59d7a01f4c</p> <p> </p>