自定义ToolBar的使用

源码地址：https://github.com/Bacsonlx/Android-CNiaoShop/tree/master/CNiaoShop_02

代码中：MainActivity演示的是自定义ToolBar的使用，TestActivity演示的是原生ToolBar的使用。

演示效果：

一、原生ToolBar

1. 什么是ToolBar

Toolbar 是 android 5.0 引入的一个新控件，Toolbar出现之前，我们很多时候都是使用ActionBar以及ActionActivity实现顶部导航栏的，因此Toolbar可以理解为是ActionBar的升级版。Toolbar大大扩展了ActionBar，使用更灵活，不像ActionBar那么固定，Toolbar更像是一般的View元素，可以被放置在view树体系的任意位置，可以应用动画，可以跟着scrollView滚动，可以与布局中的其他view交互。

2. 使用ToolBar

在我们需要顶部导航栏的布局文件当中添加Toolbar，并且配置一些常用的属性（使用自定义属性的时候需要注意把命名空间“app”添加到根节点）

这里只列出一些常用的属性，比如最小高度，返回按钮的图标，背景等等。这里需要注意的是，属性值中的“?”表示对Android系统的主题样式进行重用。意思是如果我们改变了主题样式中的colorPrimary属性的话，Toolbar的背景颜色也会随之改变，因此提醒我们去主题样式中进行一些配置。

xmlns:app="http://schemas.android.com/apk/res-auto"<android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary"android:minHeight="?actionBarSize"app:navigationIcon="@mipmap/arrow_left"app:title="标题"/>

**拓展：**Android主题颜色的详解

colorPrimaryDark是我们手机最顶端的状态栏的背景颜色（改变它需要Android5.0以及以上的手机支持才行）。
colorPrimary是指导航栏的颜色。
colorAccent是指我们常用控件比如Button等的颜色。
textColorPrimary是指我们导航栏中标题的颜色。
windowBackground是指我们窗体的默认颜色。
navigationBarColor是指Android手机中虚拟按键的背景颜色。

3. 去除ActionBar：

在styles.xml文件中进行一些常用的配置。由于我们使用的是AppCompatActivity，因此必须使用AppCompat的相关主题，笔者这里使用亮色调的没有ActionBar的主题，注意需要在清单文件当中去使用自己定义的主题。为了完全去掉ActionBar，需要把windowActionBar、windowNoTitle以及加上android声明的也写上，确保把系统自带的以及第三方兼容包的ActionBar都彻底去掉。

    <!-- Base application theme. --><style name="AppTheme" parent="Theme.AppCompat"><!-- Customize your theme here. --><item name="colorPrimary">@color/colorPrimary</item><item name="colorPrimaryDark">@color/colorPrimaryDark</item><item name="android:textColorPrimary">@color/white</item><!-- 窗口的背景颜色 --><item name="android:windowBackground">@android:color/white</item><!--隐藏ActionBar--><item name="android:windowActionBar">false</item><item name="android:windowNoTitle">true</item><item name="windowActionBar">false</item><item name="windowNoTitle">true</item></style>

二、自定义ToolBar

通过下面的对比可以知道，原生的Toolbar画面太美不忍直视，一般来说要在项目当中使用Toolbar我们都应该去自定义Toolbar。下面开始讨论如何去自定义Toolbar。

核心的要点：

自定义布局，添加到Toolbar当中
有必要的时候自定义一些属性
自定义Class继承Toolbar，读取自定义属性，对Toolbar的布局显示，内容进行设置，最后需要对外公开一些函数用于设置标题、监听等。

toolbar.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="wrap_content"><EditTextandroid:id="@+id/toolbar_searchview"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:layout_centerVertical="true"android:gravity="center"android:drawableLeft="@mipmap/icon_search"style="@style/search_view"android:hint="请输入搜索内容"android:visibility="gone"/><TextViewandroid:id="@+id/toolbar_title"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:layout_gravity="center"android:gravity="center"android:textColor="@color/white"android:textSize="20sp"android:visibility="gone"/><ImageButtonandroid:id="@+id/toolbar_rightButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:visibility="gone"style="@android:style/Widget.Material.Toolbar.Button.Navigation"/></RelativeLayout>

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff"><!-- 自定义ToolBar --><widget.CnToolbarandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary"android:minHeight="?attr/actionBarSize"android:navigationIcon="@drawable/icon_back_32px"app:isShowSearchView="true"android:title="@string/title"></widget.CnToolbar>
</LinearLayout>

自定义属性

<resources><!--    自定义属性--><declare-styleable name="CnToolbar"><attr name="rightButtonIcon" format="reference"/><attr name="isShowSearchView" format="boolean"/></declare-styleable>
</resources>

CnToolbar.java

/***  自定义ToolBar： 通过重写ToolBar构造方法*/
public class CnToolbar extends Toolbar {private LayoutInflater mInflater;private View mView;private TextView mTextTitle;private EditText mSearchView;private ImageButton mRightImageButton;public CnToolbar(Context context) {this(context, null);}public CnToolbar(Context context, AttributeSet attrs) {this(context, attrs, 0);}@SuppressLint("RestrictedApi")public CnToolbar(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);initView();setContentInsetsRelative(10, 10);if (attrs != null) {// 定义自定义属性final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,R.styleable.CnToolbar, defStyleAttr, 0);final Drawable rightIcon = a.getDrawable(R.styleable.CnToolbar_rightButtonIcon);// 根据属性是否有赋值来判断是否需要设置右边的按钮if (rightIcon != null) {//setNavigationIcon(navIcon);// 设置右边的按钮图标setRightButtonIcon(rightIcon);}// 根据属性是否为true来判断是否需要设置搜索框boolean isShowSearchView = a.getBoolean(R.styleable.CnToolbar_isShowSearchView, false);if (isShowSearchView) {// 显示搜索框和隐藏标题showSearchView();hideTitleView();}a.recycle();}}private void initView() {if(mView == null) {// 找到toolbar的布局文件mInflater = LayoutInflater.from(getContext());mView = mInflater.inflate(R.layout.toolbar, null);mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);mRightImageButton = (ImageButton) mView.findViewById(R.id.toolbar_rightButton);// 定义Layout的布局 三个参数：宽、高、对齐方式LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);// 把自定义控件放入toolbar中addView(mView, lp);}}// 重写ToolBar的setTitle方法使得标题能够居中@Overridepublic void setTitle(int resId) {setTitle(getContext().getText(resId));}@Overridepublic void setTitle(CharSequence title) {initView();if (mTextTitle != null) {mTextTitle.setText(title);// 将隐藏的标题显示出来showTitleView();}}// 显示搜索框public  void showSearchView(){if(mSearchView !=null)mSearchView.setVisibility(VISIBLE);}// 隐藏搜索框public void hideSearchView(){if(mSearchView !=null)mSearchView.setVisibility(GONE);}// 显示标题public void showTitleView(){if(mTextTitle !=null)mTextTitle.setVisibility(VISIBLE);}// 隐藏标题public void hideTitleView() {if (mTextTitle != null)mTextTitle.setVisibility(GONE);}// 设置右边按钮图标public void  setRightButtonIcon(Drawable icon){if(mRightImageButton !=null){mRightImageButton.setImageDrawable(icon);mRightImageButton.setVisibility(VISIBLE);}}// 右边按钮点击事件public  void setRightButtonOnClickListener(OnClickListener li){mRightImageButton.setOnClickListener(li);}
}