Toolbar使用与自定义Toolbar

首先，去除标题栏：

styly.xml中加两行代码去除标题栏

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
</resources>

Toolbar基本使用：

1.布局文件

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:title="大标题"
        app:subtitle="小标题"
        app:navigationIcon="@drawable/ic_arrow_back"/>

2.activity文件

toolbar=findViewById(R.id.toolbar);
        toolbar.inflateMenu(R.menu.toolbar_menu);  //加载菜单栏
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this,"clicked back",Toast.LENGTH_SHORT).show();


            }
        });
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.menu_save:
                        Toast.makeText(MainActivity.this,"clicked save",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.menu_setting:
                        Toast.makeText(MainActivity.this,"clicked seting",Toast.LENGTH_SHORT).show();
                        break;
                }
                return false;
            }
        });

3.menu文件

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_save"
        android:orderInCategory="100"
        android:title="Save"
        app:showAsAction="ifRoom"/>
    <!--
        这个属性可接受的值有：
　　      1、always：使菜单项一直显示在ToolBar上。
　　      2、ifRoom：如果有足够的空间，这个值会使菜单项显示在ToolBar上。
　　      3、never：使菜单项永远都不出现在ToolBar上,在…的子项中显示。
　　      4、withText：使菜单项和它的图标，菜单文本一起显示。
    -->
    <item
        android:id="@+id/menu_setting"
        android:enabled="true"
        android:orderInCategory="100"
        android:title="Setting"
        android:visible="true" />

</menu>

效果如下：

下面是本篇第二部分内容，也是重点掌握部分。

自定义Toolbar

这里只做了基本功能实现，可能还不太美观，目标实现如下效果：

看似两个布局，实际是一个布局文件，先用控件的visibility="gone"属性实现隐藏，需要控件时让其显示。

这样就实现了一个应用只用一个toolbar。你可能觉得有些地方利用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="wrap_content">

    <EditText
        android:id="@+id/toolbar_searchView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_centerVertical="true"
        android:drawableLeft="@android:drawable/ic_menu_search"
        android:hint="请输入搜索内容"
        android:layout_marginRight="60dp"
        android:maxLines="1"
        android:visibility="gone"/>
    <TextView
        android:id="@+id/toolbar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:layout_centerHorizontal="true"
        android:textColor="@android:color/white"
        android:textSize="20sp"
        android:visibility="gone"/>
    <ImageButton
        android:id="@+id/toolbar_rightButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:visibility="gone"
        style="@android:style/Widget.Toolbar.Button.Navigation"/>

</RelativeLayout>

2.其次自定义SwToolbar继承自Toolbar

重写构造方法

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

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

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

    initView();

    //后续具体功能实现代码都写下这里面，

    //因为一个参数的构造方法调用两个参数的构造方法，两个参数的调用三个参数的构造方法，

//所以具体实现要写在这里

}

初始化view

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

        mTextTitle = view.findViewById(R.id.toolbar_title);
        mSearchView = view.findViewById(R.id.toolbar_searchView);
        mRightImageButton = view.findViewById(R.id.toolbar_rightButton);

        LayoutParams layoutParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT, Gravity.CENTER_HORIZONTAL);
        //如果没有这行代码，title不会居中显示

        addView(view,layoutParams);
    }
}

标题和搜索框的显示与隐藏、

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

重写setTitle方法

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

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

通过以上条件，就可以实现如下界面了

<com.baiseng.zl.swmonkmall.widget.SwToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="主页"
    />

下面介绍通过标签属性设置：搜索栏是否可见、右侧按钮图片

<com.baiseng.zl.swmonkmall.widget.SwToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:title="主页"
    app:rightButtonIcon="@android:drawable/ic_menu_add"/>

<com.baiseng.zl.swmonkmall.widget.SwToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:isShowSearchView="true"/>

那么是如何通过添加一行属性实现的呢？

首先，创建属性配置文件attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="SwToolbar">
        <attr name="rightButtonIcon" format="reference"/>
        <attr name="isShowSearchView" format="boolean"/>
    </declare-styleable>
</resources>
        <!--
            关于format取值，只介绍常用：
            1. reference：参考某一资源ID。
            2. color：颜色值。
            3. string：字符串。
            4. boolean：布尔值。
            5. dimension：尺寸值。
        -->

然后在自定义的toolbar中添加如下：

（你可能不太理解为何这样写，按住Ctrl键，鼠标点击super(context, attrs, defStyleAttr);，查看他的源码）

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

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

        final Drawable rightIcon = a.getDrawable(R.styleable.SwToolbar_rightButtonIcon);
        if (rightIcon != null            
        ) {
            setRightButtonIcon(rightIcon);
        }
        boolean isShowSearchView=a.getBoolean(R.styleable.SwToolbar_isShowSearchView,false);
        if (isShowSearchView){
            showSearchView();
            hideTitleView();
        }

        a.recycle();
    }


}

public void setRightButtonIcon(Drawable icon) {
    if (mRightImageButton!=null){
        mRightImageButton.setImageDrawable(icon);
        mRightImageButton.setVisibility(VISIBLE);
    }
}

通过以上就可以实现两种Toolbar布局。

现在再为右侧ImageButton添加点击监听：

public void setRightButtonOnClickner(OnClickListener listener){
    mRightImageButton.setOnClickListener(listener);
}

这样，就可以在MainActivity中直接调用了

toolbar.setRightButtonOnClickner(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this,"click rightButton",Toast.LENGTH_SHORT).show();
    }
});