Material Design之toolbar的自定义小封装

1. 写在前面

最近看了很多toolbar的知识，但是感觉内容都大同小异，比如这个 还有这个 还有这个 而且对于实际项目并没有什么用，所以我自己总结下。先看图，这是大众点评里面的页面









其实很多app如果用到toolbar大致可以包含两种，一种是首页的toolbar非常复杂而且巧妙比如前面两张图，还有一种很简单，但是很多页面都用的着比如后面两张图。所以我认为：

1.如果是比较复杂的view，最好自己写个布局，然后添加到toolbar中，再在代码中设置到actionbar中。

2. 如果是用到地方比较多的toolbar布局，希望封装下，用的时候在xml布局中直接控制或者在java代码中代码控制，并且支持点击事件。

我下面的代码做的就是这两件事，先看下效果图。

2. 代码

a. 先看第一种情况吧，用起来比较简单，难的是将自己想要的复杂布局做出来，因为我这里只是举例子，所以布局比较简单。

因为我们是用toolbar代替了actionbar，所以theme那里需要一个不带actionbar的主题

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

因为我们需要将自己的布局添加到toolbar中，先看第一个页面xml图



这里面有几个需要注意的，

contentInsetStart

这个属性，因为我们添加一个布局到xml，如果不设置这个属性，当然也可以在代码中和theme中设置，如果不设置，里面的布局在toolbar中总会隔左边一段距离。如图



当我设置后，就会这样，所以这个属性很好理解见图



还有个需要注意的是，我这里需要使用include，这个无所谓，用不用，我这里只是试一试里面用include可不可以，因为我的项目中并没有用toolbar，感觉也方便不了多少，用include也可以实现自己想要的。include包含的布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:background="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent">

<ImageView
android:src="@mipmap/back"
android:layout_marginLeft="10dp"
android:layout_centerVertical="true"
android:layout_width="30dp"
android:layout_height="30dp" />

<TextView
android:text="英雄连们"
android:layout_centerInParent="true"
android:textSize="18sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />

<ImageView
android:src="@mipmap/setting"
android:layout_marginRight="10dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_width="30dp"
android:layout_height="30dp" />

</RelativeLayout>

最后一个点需要注意的是这个高度height,因为我这里设置的是用actionbar自带的android高度，

android:layout_height="?attr/actionBarSize"

这个如果需要修改，直接去styles下面修改成自己想要的就是了，

<item name="android:actionBarSize">自己填</item>

然后去activity中拿到toolbar，设置下就可以了，

Toolbar toolbar = (Toolbar) this.findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

b. 现在就来看第二种情况，进行一个小小的封装，每个页面用时就是一个自定义的toolbar。

<guozhaohui.com.customtoolbar.MyToolBar
android:id="@+id/my_toolbar"
app:iconRight="@mipmap/back"
app:iconLeft="@mipmap/setting"
app:textCen="地对地导弹"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">

</guozhaohui.com.customtoolbar.MyToolBar>

里面的三个app属性都是自定义的。前面这自定义步骤直接上代码了，自attrs中定义属性，继承toolbar，修改三个构造函数。

<declare-styleable name="MyToolBar">

<attr name="iconLeft" format="reference" />
<attr name="textCen" format="string" />
<attr name="iconRight" format="reference" />

</declare-styleable>

public MyToolBar(Context context) {
this(context,null);
}

public MyToolBar(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}

public MyToolBar(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}

假设这个简单模式的toolbar布局和刚才这个布局是一样的，因为确实差不多是这样的，所以我直接复制了一份include里面的布局，然后在MyToolbar代码中对他们初始化

private void initView() {

if(view==null){

layoutInflater = LayoutInflater.from(getContext());
view = layoutInflater.inflate(R.layout.item_toolbar, null);

iv_toolbar_left = (ImageView) view.findViewById(R.id.iv_toolbar_left);
tv_toolbar_cen = (TextView) view.findViewById(R.id.tv_toolbar_cen);
iv_toolbar_right = (ImageView) view.findViewById(R.id.iv_toolbar_right);

LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT, Gravity.CENTER_HORIZONTAL);
addView(view,lp);

}
}

在然后通过TintTypedArray的对象对这三个自定义属性设置，

final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
R.styleable.MyToolBar, defStyleAttr, 0);

比如设置左边的icon

//设置左边icon，其实toolbar有navigation这个属性可以用，但是为了更灵活，我们写自己的，可以随便调整
Drawable leftIcon =  a.getDrawable(R.styleable.MyToolBar_iconLeft);
if(leftIcon!=null){

//                  iv_toolbar_left.setBackground(leftIcon);
iv_toolbar_left.setImageDrawable(leftIcon);

}

同理右边的icon也是一样的代码

//同样，设置右边的icon
Drawable rightIcon =  a.getDrawable(R.styleable.MyToolBar_iconRight);
if(rightIcon!=null){
iv_toolbar_right.setImageDrawable(rightIcon);
}

设置中间文字

//设置文字
CharSequence cenText =   a.getText(R.styleable.MyToolBar_textCen);
if(!TextUtils.isEmpty(cenText)){

tv_toolbar_cen.setText(cenText);

}

差不多完成了，在任何一个布局中想用的话直接用就可以了，刚才上面代码已经贴出来了，但是为了灵活一些。

在java代码中也能控制图标和文字，

/**
* 使可以在java代码中动态修改图标
* @param iconRes
*/
public void changeLeftIcon(int iconRes){

if(iv_toolbar_left!=null){
iv_toolbar_left.setImageDrawable(getResources().getDrawable(iconRes));
}

}

在activity中使用也比较简单，拿到myToolbar实例调用方法即可

myToolBar.changeLeftIcon(R.mipmap.back);
myToolBar.changeRightIcon(R.mipmap.setting);

/**
* java 代码中支持toolbar中间的text的修改
* @param text
*/
public void setCenterText(String text){

if(tv_toolbar_cen!=null){

if(!TextUtils.isEmpty(text)){
tv_toolbar_cen.setText(text);
}

}

}

java代码中

myToolBar.setCenterText("德玛西亚");

/**
* 为图标设置点击事件
* @param listener
*/
public void setLeftIconListener(View.OnClickListener listener){
if(iv_toolbar_left!=null){
iv_toolbar_left.setOnClickListener(listener);
}
}

java代码中，也是调用方法

//点击事件
myToolBar.setLeftIconListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(CustomActivity.this,"我是点击事件",Toast.LENGTH_SHORT).show();
}
});

到这里应该差不多了，在项目中应该可以可以使用。

3. 源码

点击，，，，，，