自定义toolbar教程

1.写toolbar的布局文件 ，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="45dp">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/toolbar_searchview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_centerVertical="true"
        android:imeOptions="actionSearch"
        android:singleLine="true"
        style="@style/search_view"
        android:drawablePadding="8dp"
        android:visibility="gone"
        />

    <android.support.v7.widget.AppCompatTextView
        android: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"
        />

    <android.support.v7.widget.AppCompatImageView
        android:id="@+id/toolbar_rightImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:textColor="@color/white"
        android:visibility="gone"
        />
</RelativeLayout>

2.新建一个toolbar类，继承原生toolbar

public class MyToolbar extends Toolbar {

    private LayoutInflater mInflater;

    private View mView;
    private TextView mTextTitle;
    private EditText mSearchView;
    private ImageView mRightImageView;
    private Drawable mEditTextSearchIcon;

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

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

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


        initView();

        setContentInsetsRelative(20,20);

        if(attrs!=null){
            TypedArray a= context.obtainStyledAttributes(attrs,R.styleable.MyToolbar);
            Drawable rightImageIcon = a.getDrawable(R.styleable.MyToolbar_rightImageIcon);

            //获得右边的图标
            if(rightImageIcon!=null){
                setRightButtonIcon(rightImageIcon);
            }
            //获得搜索的图标
            Drawable searchIcon = a.getDrawable(R.styleable.MyToolbar_editTextSearchIcon);
            if(searchIcon!=null){
                searchIcon.setBounds(0,0,searchIcon.getIntrinsicWidth(), searchIcon.getIntrinsicHeight());
                mSearchView.setCompoundDrawables(searchIcon,null,null,null);
            }

            //获得搜索的hint
            String hint = a.getString(R.styleable.MyToolbar_searchViewHint);
            if(hint!=null){
                mSearchView.setHint(hint);
            }

            boolean isShowSearchView  =a.getBoolean(R.styleable.MyToolbar_isShowSearchView,false);
            if(isShowSearchView){
                showSearchView();
                hideTitleView();
            }else{
                hideSearchView();
                showTitleView();
            }
            a.recycle();
        }

    }


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


    public void setRightImageViewOnClickListener(OnClickListener listener){
        mRightImageView.setOnClickListener(listener);
    }

    private void initView() {


        if(mView == null) {

            mInflater = LayoutInflater.from(MyApplication.getContext());
            mView = mInflater.inflate(R.layout.toolbar, null);


            mTextTitle = (TextView) mView.findViewById(R.id.toolbar_title);
            mSearchView = (EditText) mView.findViewById(R.id.toolbar_searchview);
            mRightImageView = (ImageView) mView.findViewById(R.id.toolbar_rightImage);


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

            addView(mView, lp);
        }



    }










    @Override
    public void setTitle(int resId) {

        setTitle(getContext().getText(resId));
    }

    @Override
    public 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);
    }
}

3设置需要自定义的属性，在values下新建attrs.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyToolbar">
        <attr name="rightImageIcon" format="reference"/>
        <attr name="editTextSearchIcon" format="reference"/>
        <attr name="isShowSearchView" format="boolean"/>
        <attr name="searchViewHint" format="string"/>
    </declare-styleable>
</resources>

4.搜索框的样式文件 在values->styles.xml

 <style name="search_view">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">@color/white</item>
        <item name="android:textColorHint">@color/white</item>

        <item name="android:background">@drawable/selector_search_view</item>
        <item name="android:paddingTop">6dp</item>
        <item name="android:paddingBottom">6dp</item>
        <item name="android:paddingLeft">4dp</item>
        <item name="android:singleLine">true</item>
    </style>

5.样式中有个自己绘制的图片

<?xml version="1.0" encoding="utf-8"?>

    <selector
        xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_enabled="false" >
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#eb4f38" />
            </shape>
        </item>
        <item android:state_pressed="true">
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#eb4f38" />
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="8dp" />
                <solid android:color="#D82917" />
            </shape>
        </item>
    </selector>

6.在布局中正式调用例子

<com.lingdangmao.myapplication.MyToolbar
        android:id="@+id/mytoolbar"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:isShowSearchView="true"
        app:editTextSearchIcon="@mipmap/icon_search"
        app:searchViewHint="请输入提示内容啊"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

    </com.lingdangmao.myapplication.MyToolbar>

<com.lingdangmao.myapplication.MyToolbar
    android:id="@+id/mytoolbar"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:isShowSearchView="false"
    app:title="asdasdad"
    app:navigationIcon="@drawable/icon_back_32px"
    app:rightImageIcon="@drawable/icon_back_32px"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</com.lingdangmao.myapplication.MyToolbar>

 

实际效果  2种样式，通过参数不同进行配置