学习笔记 Tianmao 篇 自定义 ToolBar

第一步 创建一个layout 让MyToolBar使用

我这里是让ToolBar 变成

2个左右button和（一个edittext或者Textview互相切换）图片显示 是edittext

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Button
        android:id="@+id/toolbar_leftButton"
        android:layout_marginRight="10dp"
        android:layout_width="25sp"
        android:layout_height="25sp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:textColor="@color/white"
        style="@android:style/Widget.Material.Toolbar.Button.Navigation"
        />
    <EditText
        android:layout_marginRight="10dp"
        android:layout_marginLeft="10dp"
        android:id="@+id/toolbar_searchview"
        android:layout_width="270sp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_centerVertical="true"

        android:layout_toRightOf="@id/toolbar_leftButton"
        android:drawableLeft="@mipmap/icon_search"
        style="@style/search_view"
        android:hint="@string/hint_text"
        android:visibility="gone">
    </EditText>


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


    <Button
        android:id="@+id/toolbar_rightButton"
        android:layout_width="25sp"
        android:layout_height="25sp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:textColor="@color/white"

        style="@android:style/Widget.Material.Toolbar.Button.Navigation"
        />
</RelativeLayout>

第二步 创建一个MyToolBar类继承ToolBar

1.这里需要attrs的自定义属性来确定 2个button的图标以及 是显示edittext或textview

attrs起到连接资源的作用

<?xml version="1.0" encoding="utf-8"?>
 <resources>
     <declare-styleable name="MyToolBar">
         <attr name="rightButtonIcon" format="reference"/>  <!--format 提示默认类型-->
         <attr name="leftButtonIcon" format="reference"/>
         <attr name="isShowSearchView" format="boolean"/>
     </declare-styleable>
 </resources>

2.这里是mybar类

package pers.lijunxue.tianmao.ui.mybar;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.StringRes;
import android.support.v7.internal.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.Button;
import android.widget.EditText;
import android.widget.TextView;
import pers.lijunxue.tianmao.R;



public class MyToolBar extends Toolbar {


    private LayoutInflater layoutInflater;


    private TextView mTextTitle;
    private EditText mSearchView;
    private Button mRightButton;
    private Button mLeftButton;


    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);


        initView();


        //设置editText的左右边距 Toobar自带的
         setContentInsetsRelative(10,10);


        //相当自定义  属性 到 toolbar上

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



            final Drawable rightIcon = a.getDrawable(R.styleable.MyToolBar_rightButtonIcon);
            if (null != rightIcon) {

                setRightButtonIcon(rightIcon);

            }else {
                hideRightButton();
            }

            final Drawable leftIcon = a.getDrawable(R.styleable.MyToolBar_leftButtonIcon);
            if (null != leftIcon) {

                setLeftButtonIcon(leftIcon);

            }else {
                hideLeftButton();
            }

这个是设置editText控件，他不能与textview同时出现，所以出现了就要调用下面的方法，设置textview的可见性

            boolean isShowSearchView = a.getBoolean(R.styleable.MyToolBar_isShowSearchView,false);


            if(isShowSearchView){
                showSearchView();

                hideTitleView();
                //设置最左边控件的可见性

                setNavigationIcon(null);
            }
            a.recycle();//关闭a
        }
    }


    设置右边button 的值

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    public void  setRightButtonIcon(Drawable icon){
        if(null != mRightButton){
            mRightButton.setBackground(icon);
            mRightButton.setVisibility(VISIBLE);
        }
    }


     设置左边button 的值

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    public void  setLeftButtonIcon(Drawable icon){
        if(null != mRightButton){
            mLeftButton.setBackground(icon);
            mLeftButton.setVisibility(VISIBLE);
        }
    }


    右边button的点击事件 用法跟普通按钮一样

    public  void setRightButtonOnClickListener(OnClickListener li){

        //若不显示 按钮择 点击按钮不触发事件
        if (View.VISIBLE == mRightButton.getVisibility()) {
            mRightButton.setOnClickListener(li);
        }
    }


     左边button的点击事件 用法跟普通按钮一样

    public  void setLeftButtonOnClickListener(OnClickListener li){

        //若不显示 按钮择 点击按钮不触发事件
        if (View.VISIBLE == mLeftButton.getVisibility()) {
            mLeftButton.setOnClickListener(li);
        }
    }
    这个函数实际上就是初始化tool_bar中三个控件的实例对象，然后将他们放在一个LinearLayout不居中，实现ToolBar的布局
    private void initView() {
        if(null == mTextTitle) {
            layoutInflater = LayoutInflater.from(getContext());
            View view = layoutInflater.inflate(R.layout.tool_bar, null);
            mTextTitle = (TextView) view.findViewById(R.id.toolbar_title);
            mSearchView = (EditText) view.findViewById(R.id.toolbar_searchview);
            mRightButton = (Button) view.findViewById(R.id.toolbar_rightButton);
            mLeftButton = (Button) view.findViewById(R.id.toolbar_leftButton);

            //参数为   布局宽度 高度 水平还是垂直 定死了
            LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
            addView(view, lp);
        }
    }

    下面的几个getset函数实际上就是设置tool_bar中三个控件的可见性
    @Override
    public void setTitle(@StringRes int resId) {
        super.setTitle(resId);
        setTitle(getContext().getText(resId));
    }


    @Override
    public void setTitle(CharSequence title) {
        initView();
        if(null != mTextTitle){
            mTextTitle.setText(title);
            showTitleView();


        }
    }


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




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


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




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


    }


    public void hideRightButton(){
        if(null != mRightButton){
            mRightButton.setVisibility(INVISIBLE);
        }
    }

    public void hideLeftButton(){
        if(null != mLeftButton){
            mLeftButton.setVisibility(INVISIBLE);
        }
    }
}

第三步 在需要的layout中使用自定义的ToolBar

这里用到了attrs的3个属性

app:rightButtonIcon
app:leftButtonIcon
app:isShowSearchView

<!--沿用主题的属性 用?attr/-->
<pers.lijunxue.tianmao.ui.mybar.MyToolBar
        android:id="@+id/mToobar"
        android:layout_width="match_parent"
        android:textColorPrimary="@color/white"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:title="@string/bar_text"
        app:rightButtonIcon="@drawable/selector_icon_message"
        app:leftButtonIcon="@mipmap/icon_scan"
        app:isShowSearchView="true">
 </pers.lijunxue.tianmao.ui.mybar.MyToolBar>

其他样式及主题

styles文件

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- 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:windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
    <!--editText的样式-->
    <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>
</resources>

selector_search_view.xml 文件

<?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="10dp"/>
            <solid android:color="#BFD3D3D3"/>
        </shape>
    </item>


    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <corners android:radius="10dp" />
            <solid android:color="#BFD3D3D3"/>
        </shape>
    </item>


    <item>
        <shape android:shape="rectangle">
            <corners android:radius="10dp"/>
            <solid android:color="#7FD3D3D3"/>
        </shape>
    </item>

</selector>