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>