自定义toolbar

1.toolbar介绍

toolbar是android5.0退出的一个新控件，其实就是用来代替actionbar的，相比之actionbar，toolbar更加灵活，而且可以对其进行自定义，由于是android里的新控件，如果我们要在之前的api中使用它就需要support v7包来兼容，下面是效果图，这里我们队原来toolbar提供的靠左的title进行了覆盖，然后增加了一个edittext和imagebutton

2.toolbar自定义控件步骤

创建一个布局文件：

这个布局里面就是我们需要在原生toolbar中增加的view，直接贴代码，布局文件名为toolbar.xml

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

    <EditText
        android:id="@+id/toolbar_search"
        style="@style/search_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginRight="60dp"
        android:drawableLeft="@mipmap/icon_search"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:hint="请输入搜索内容"
        android:layout_below="@+id/toolbar_title"
        android:visibility="gone" />

    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="30sp"
        android:visibility="gone" />

    <!--style="@android:style/Widget.Material.Toolbar.Button.Navigation"-->
    <ImageButton
        android:id="@+id/toolbar_right_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignTop="@id/toolbar_title"
        android:background="@color/transparent"
        android:visibility="gone"/>

</RelativeLayout>

创建一个MineToolBar类：

这个是自定义控件的常规步骤吧，然后让这个类继承自ToolBar类，重写他的构造函数，对需要修改的view进行覆盖，然后对需要修改的toolbar控件进行覆盖，这里只需要对titile进行覆盖就行了，其他的都是增加的控件，下面是代码：

package widget;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.TintTypedArray;
import android.support.v7.widget.Toolbar;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.TextView;

import com.lc.store.R;

/**
 * Created by jiangbo on 2016/4/4.
 * Description 自定义toolbar
 */
public class MineToolBar extends Toolbar {

    private LayoutInflater mInflater;

    private EditText mSearch;
    private TextView mTitle;
    private ImageButton mButton;

    private View mView;

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

    public MineToolBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MineToolBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initView();
        setContentInsetsRelative(10,10);

        if(attrs!=null) {
            //对attrs属性进行读取
            final TintTypedArray a = TintTypedArray.obtainStyledAttributes(context, attrs,
                    R.styleable.MineToolBar, defStyleAttr, 0);

            //读取自定义rightbutton图标
            final Drawable navIcon = a.getDrawable(R.styleable.MineToolBar_rightButtomIcon);
            if (navIcon != null) {
                //对button设置图标
                setRightButtonIcon(navIcon);
            }

            //读取isShowSearchView属性
            boolean isShowSearchView = a.getBoolean(R.styleable.MineToolBar_isShowSearchView,false);
            if(isShowSearchView){
                showSearchView();
                //hideTitleView();
            }

            a.recycle();
        }
    }

    private void setRightButtonIcon(Drawable navIcon) {
        if(mButton!=null){
            mButton.setImageDrawable(navIcon);
            mButton.setVisibility(VISIBLE);
        }
    }


    private void initView() {
        if (mView == null) {
            mView = mInflater.from(getContext()).inflate(R.layout.toolbar, null);

            mTitle = (TextView) mView.findViewById(R.id.toolbar_title);
            mButton = (ImageButton) mView.findViewById(R.id.toolbar_right_button);
            mSearch = (EditText) mView.findViewById(R.id.toolbar_search);

            LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);

            addView(mView, params);
        }
    }

    @Override
    public void setTitle(int resId) {
        setTitle(getContext().getText(resId));
    }

    @Override
    public void setTitle(CharSequence title) {
        initView();
        mTitle.setText(title);
        showTitleView();
    }

    public void setRightButtonOnClickListener(OnClickListener listener){
        mButton.setOnClickListener(listener);
    }

    public void showSearchView() {
        if (mSearch != null) {
            mSearch.setVisibility(VISIBLE);
        }
    }

    public void hideSearchView() {
        if (mSearch != null) {
            mSearch.setVisibility(GONE);
        }
    }

    public void showTitleView() {
        if (mTitle != null) {
            mTitle.setVisibility(VISIBLE);
        }
    }

    public void hideTitleView() {
        if (mTitle != null) {
            mTitle.setVisibility(GONE);
        }
    }
}

在布局文件test.xml中使用自定义的toolbar

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent"
    android:orientation="vertical">

    <widget.MineToolBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:backgroundTint="?attr/colorPrimaryDark"
        app:navigationIcon="@mipmap/icon_discover"
        app:rightButtomIcon="@mipmap/icon_discover"
        app:isShowSearchView="true"
        app:title="@string/home">
    </widget.MineToolBar>

</LinearLayout>

这里需要说明几点，在backgroud标签中我们使用到了？attr，这个是什么呢？首先我们点进去看一下

这个value可不是我的value文件，这个是android自己的标签库，其实这个是与style中使用的属性关联起来的

其实这个就和自定义属性差不多，有兴趣的可以参考这篇文章 深入理解android自定义属性

然后androidmanifest中应用了这个主题

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

这样我们就让他们关联了起来，大概逻辑差不多就是这样了