自定义ToolBar

Android官方提供的ToolBar虽然已经很强大，但是它的样式仍然有一些单调，现在自定义ToolBar来为它添加更多的新颖样式。比如SearchText和Text可自由切换的ToolBar

实现步骤：

①自定义布局文件toolBar.xml，包括EditView，TextView和一个Button

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <EditText
        android: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"
        />

    <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:gravity="center"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:visibility="gone"
        />

    <Button
        android:id="@+id/toolbar_rightButton"
        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"
        style="@android:style/Widget.Material.Toolbar.Button.Navigation"
        />

</RelativeLayout>

 

②自定义属性文件 attr.xml

<resources>
    <declare-styleable name="MyToolBar">
        <attr name="rightButtonIcon" format="reference"/>
        <attr name="isShowSearchView" format="boolean"/>
        <attr name="rightButtonText" format="string"/>
    </declare-styleable>
</resources>

 

③自定义ToolBar-----MyToolBar，继承ToolBar

public class MyToolBar extends Toolbar {

}

④MyToolBar的构造函数

public CNiaoToolBar(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.MyToolBar, defStyleAttr, 0);
        final Drawable rightIcon = a.getDrawable(R.styleable.MyToolBar_rightButtonIcon);
        if (rightIcon != null) {
            setRightButtonIcon(rightIcon);
        }
        boolean isShowSearchView = a.getBoolean(R.styleable.MyToolBar_isShowSearchView,false);
        if(isShowSearchView){
            showSearchView();
            hideTitleView();
        }
        CharSequence rightButtonText = a.getText(R.styleable.MyToolBar_rightButtonText);
        if(rightButtonText !=null){
            setRightButtonText(rightButtonText);
        }
        a.recycle();
    }
}

 

即首先初始化布局文件中的控件initView（）：

private void initView() {
    if(mView == null) {
        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);
        mRightButton = (Button) mView.findViewById(R.id.toolbar_rightButton);

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

        addView(mView, lp);
    }
}

 

然后解析自定义属性

if(attrs !=null) {
    final TintTypedArray a = TintTypedArray.obtainStyledAttributes(getContext(), attrs,
            R.styleable.CNiaoToolBar, defStyleAttr, 0);
    final Drawable rightIcon = a.getDrawable(R.styleable.CNiaoToolBar_rightButtonIcon);
    if (rightIcon != null) {
        //setNavigationIcon(navIcon);
        setRightButtonIcon(rightIcon);
    }
    boolean isShowSearchView = a.getBoolean(R.styleable.CNiaoToolBar_isShowSearchView,false);
    if(isShowSearchView){
        showSearchView();
        hideTitleView();
    }
    CharSequence rightButtonText = a.getText(R.styleable.CNiaoToolBar_rightButtonText);
    if(rightButtonText !=null){
        setRightButtonText(rightButtonText);
    }
    a.recycle();
}

现在就算定义好了一个自定义ToolBar

⑤在项目中使用MyToolBar时，完全与ToolBar的使用方法相同，

加入布局文件，获取MyToolBar，添加监听器，添加Settings选项

⑥显示Text文本

<com.example.administrator.shopdemo.widget.CNiaoToolBar
    android:id="@id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:rightButtonText="编辑"
    app:title="购物车" />

 

显示SearchView栏

<com.example.administrator.shopdemo.widget.CNiaoToolBar
    android:id="@+id/toolbar_home"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="商品详情"
    app:isShowSearchView="true"
    app:navigationIcon="@drawable/icon_back_32px"/>

 

⑦

private void initToolBar(View view){
    mToolBar = (CNiaoToolBar) view.findViewById(R.id.toolbar_home);
    mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Toast.makeText(getContext(), "back", Toast.LENGTH_LONG).show();
        }
    });

    mToolBar.inflateMenu(R.menu.menu_main);
    mToolBar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            int id = item.getItemId();
            if(id == R.id.action_settings){
                Toast.makeText(getContext(), "menu", Toast.LENGTH_LONG).show();


                return true;
            }
            return false;

        }
    });
}