Toolbar快速實現，讓你一分鐘上手

weixin_33866037發表於2017-09-04

原創作品，轉載請註明出處

6373593-7871d294e2e6b645.png

Toolbar在日常的App開發中，使用頻率非常高，而它的屬性也很豐富，怎樣做能快速實現呢？

嫌文章太長？那直接去看程式碼吧→_→傳送門

首先，我們先簡單瞭解下Toolbar

A standard toolbar for use within application content.
一個用於應用程式內容的標準工具欄。

java.lang.Object
↳android.view.View
↳android.view.ViewGroup
↳android.support.v7.widget.Toolbar

可以看出Toolbar繼承自ViewGroup,可以包含的元素：

  • 一個導航按鈕
  • 一個標題和副標題
  • 一個或多個自定義View
  • 一個操作選單
6373593-35d413a8730b2b1b.png

如圖，此類的Toolbar在生活中是很常見的，那為什麼不封裝個BaseToolbar呢？

  1. 定義自己的AppTheme
 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--Toolbar顏色-->
        <item name="colorPrimary">@color/colorPrimary</item>
        <!--狀態列顏色-->
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <!--checkBox 等控制元件選中顏色-->
        <item name="colorAccent">@color/colorAccent</item>
        <!--標題文字顏色-->
        <item name="titleTextColor">@color/colorTitleText</item>
        <!--設定左側返回按鈕-->
        <item name="navigationIcon">@drawable/icon_back</item>
        <!--各控制元件的預設顏色。-->
        <item name="colorControlNormal">@color/colorTitleText</item>
        <!--titleTextStyle-->
        <item name="titleTextStyle">@style/customTitleTextStyle</item>
        <!--標題欄高度-->
        <item name="actionBarSize">45dp</item>
    </style>

 /*自定義標題欄樣式*/
    <style name="customTitleTextStyle">
        <item name="android:textSize">20sp</item>
        <item name="android:textColor">@color/colorTitleText</item>
        <item name="android:layout_gravity">left|center_vertical</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:gravity">center</item>
    </style>
  1. 定義BaseToolbar佈局
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/base_title"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:translationZ="4dp"
    android:gravity="center_vertical">

    <!--此處的TextView 就是自定義View的新增位置，結合自身需求可隨意修改-->
    <TextView
        android:id="@+id/base_title_text"
        style="?attr/titleTextStyle"/>


</android.support.v7.widget.Toolbar>
  1. 建立BaseToolbar
 public static class Builder{
        private AppCompatActivity appCompatActivity;

        private OnClickListener onClickListener;

        private View.OnClickListener titleOnClickListener;

        private int rsIdTitle;

        private String textTitle;

        private Drawable titleDrawable;

        private boolean isHideNavigationIcon;

        private BaseToolbar baseToolbar;

        private Builder(AppCompatActivity appCompatActivity) {
            this.appCompatActivity = appCompatActivity;
        }

        public Builder setOnClickListener(OnClickListener onClickListener) {
            this.onClickListener = onClickListener;
            return this;
        }

        public Builder setTitleOnClickListener(View.OnClickListener onClickListener){
            this.titleOnClickListener = onClickListener;
            return this;
        }

        public Builder setRsIdTitle(int rsIdTitle) {
            this.rsIdTitle = rsIdTitle;
            return this;
        }

        public Builder setTextTitle(String textTitle) {
            this.textTitle = textTitle;
            return this;
        }

        public Builder isHideNavigationIcon(boolean isHideNavigationIcon) {
            this.isHideNavigationIcon = isHideNavigationIcon;
            return this;
        }

        public Builder setTitleDrawable(Drawable titleDrawable) {
            this.titleDrawable = titleDrawable;
            return this;
        }

        public BaseToolbar getBaseToolbar(){
            return  baseToolbar;
        }

        public void build(){
            baseToolbar = new BaseToolbar(this);
            baseToolbar.initToolbar();
        }
    }

由於程式碼篇幅過長，這裡只展示了Builder部分。
BaseToolbar的本質上是一個工具類，其中的擴充套件方法可以根據自己的實際需求自定義。

它的好處是顯而易見的

  1. 簡潔清晰的鏈式呼叫
 toolBarBuilder
                .setTextTitle("Toolbar演示")
                .setTitleDrawable(getResources().getDrawable(R.mipmap.ic_launcher_round))
                .setOnClickListener(new BaseToolbar.OnClickListener() {
                    @Override
                    public void navigationOnClick(View v) {
                    }

                    @Override
                    public boolean onMenuItemClick(MenuItem item) {
                        return true;
                    }
                })
                .setTitleOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        toast("title");
                    }
                }).build();
  1. 靈活的封裝方式

像這樣：

//在BaseActivity中提供例項化方法

    protected void initDefaultBaseToolbar(String title) {
        toolBarBuilder.setOnClickListener(DefaultBarOnClickListener.newInstance(this))
                .setRsIdTitle(titleId)
                .build();
    }

//ChildActivity中例項化

    initDefaultBaseToolbar("title");
  1. 快速的使用方式
//在layout中引入佈局
<include layout="@layout/base_title"/>

//activity中例項化
BaseToolbar.Builder toolBarBuilder = BaseToolbar.newInstance(this);

總結

分裝BaseToolbar的想法來源於對重複程式碼的排斥，能寫一遍絕不寫兩遍，這也是在實際開發中極力提倡的。
使用了Builder模式實現鏈式呼叫，邏輯更清晰，呼叫更方便 。
提供相應的擴充套件介面，以便於後期功能增刪。

BaseToolbar被我封裝在 ZBaseLib 中，此專案持續維護中，歡迎Star、Fork

每星期至少一篇跟新本系列，感興趣可以關注。
一起學習，一起進步。

相關文章