讓構建標題欄變得更加簡單, Toolbar 的加強之旅

前言

鄰近國慶, 給你們帶來一些乾貨, 但願可以幫助你們提升開發效率

2018 年的 GDD 大會, Google 再次力薦了全新的 Material Design 組件, 筆者深深爲之着迷, Toolbar 這個組件, 相信你們都接觸過, 它幾乎已經取代了以前 ActionBar 的地位, 不過單憑藉 Google 提供的 Toolbar 實在難以勝任開發過程當中多變的 UI 風格, 藉此契機, 將之前自定義的 CommonToolbar 的組件進行了再次加強, 以適用絕大多數的業務場景

接下來就經過幾個場景來介紹這款新的組件

場景一

場景描述

• 構建一個左邊有一個返回按鈕的標題欄
• 標題文本處於中間狀態

經過 SToolbar 的實現方式

方式一:

在 xml 文件中, 使用自定義屬性

<com.sharry.libtoolbar.SToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:backIcon="@drawable/icon_back"
        app:titleGravity="Center"
        app:titleText="Sharry"
        app:titleTextSize="18dp" />
複製代碼

• backIcon: 返回按鈕的資源文件
• titleGravity: 標題的位置(默認居中)
• textText: 標題文本
• titleTextSize: 標題文本的大小
• titleTextColor: 標題文本的顏色

方式二:

使用代碼構建, 調用使用 SToolbar.Builder 的方式來構建一個 Toolbar

SToolbar.Builder(this)
        .setStatusBarStyle(Style.TRANSPARENT)
        .setBackgroundColorRes(R.color.colorPrimary)
        .setTitleGravity(Gravity.CENTER_HORIZONTAL)
        .setTitleText("Sharry")
        .addBackIcon(R.drawable.icon_back)
        .apply()
複製代碼

• apply()
  • 最終調用 apply 會構建一個 SToolbar 的實例對象,
  • 而且將它添加到 com.android.internal.R.id.content 這個 ContentParent 中
    • 關於這個資源文件這裏就不過多介紹了(這裏有相關知識點的介紹)
  • 而且會將咱們 setContentView 中設置的佈局, 自動的移動到 Toolbar 的下方

若是你想獲取一個對象, 並且不想讓他插入到佈局文件中, 能夠調用 .build() 方式便可

SToolbar.Builder(this)
        .//...
        .build()
複製代碼

場景二

場景描述

• 標題
  • 文本大小爲 20 dp
  • 文本處於中間狀態
• 左邊有一個返回按鈕
• 菜單
  • 左邊有一個文本菜單
  • 右邊有一個文本菜單
  • 右邊有一個圖片菜單
  • 文本菜單的文本大小爲 13dp
  • 每一個菜單之間的間距爲 10dp

可見這個場景就複雜的多了

方式一

即便是這樣複雜的文本, 依舊能夠經過 xml 中提供的屬性快捷構建

<com.sharry.libtoolbar.SToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:backIcon="@drawable/icon_back"
        app:menuLeftText="left_menu"
        app:menuRightIcon="@drawable/icon_right"
        app:menuRightText="right_menu"
        app:menuTextColor="@android:color/white"
        app:menuTextSize="13dp"
        app:subItemInterval="10dp"
        app:titleGravity="Center"
        app:titleText="Sharry"
        app:titleTextColor="@android:color/white"
        app:titleTextSize="18dp" />
複製代碼

• menuLeftText: 左部菜單文本
• menuRightText: 右部菜單文本
• menuTextSize: 菜單文本的大小
• subItemInterval: 每一個一個子 Item 之間的間隔

方式二

使用代碼構建

SToolbar.Builder(this)
                .setStatusBarStyle(Style.TRANSPARENT)
                .setBackgroundColorRes(R.color.colorPrimary)
                // 設置間隔
                .setSubItemInterval(10)
                // 設置Gravity
                .setTitleGravity(Gravity.CENTER_HORIZONTAL)
                // 設置標題文本
                .setTitleText("Sharry", 18)
                .addBackIcon(R.drawable.icon_back)
                // 添加左部的菜單文本
                .addLeftMenuText(
                        TextViewOptions.Builder()
                                .setText("left")
                                .setListener { showMsg("U click left text") }
                                .build()
                )
                // 添加右邊的菜單文本
                .addRightMenuText(
                        TextViewOptions.Builder()
                                .setText("right")
                                .setListener { showMsg("U click right text") }
                                .build()
                )
                // 添加右邊的菜單圖片
                .addRightMenuImage(
                        ImageViewOptions.Builder()
                                .setDrawableResId(R.drawable.icon_right)
                                .setListener { showMsg("U click right image") }
                                .build()
                )
                .apply()
複製代碼

能夠看到關於菜單的構建, 能夠經過添加一個 Options 來構建

• SToolbar 提供了三種 Options
  • TextViewOptions
    • 傳入這個 Options 會自動建立 TextView 而且添加進指定的菜單中
  • ImageViewOptions
    • 傳入這個 Options 會自動建立 ImageView 而且添加到指定的菜單中
  • ViewOptions
    • 這個 Options 不可以單獨使用, 要配合 View 去使用

經過 Options 你能夠方便地訂製 View 的各類屬性, 能夠精確的定位 view 的 padding 來控制邊距

兩種方式的運行效果圖

這樣子可以知足你的需求嗎? 彆着急, 且看看場景三

場景三

場景描述

• 沉浸式狀態欄
• 左邊有個返回按鈕
• 左邊有個文本
• 右邊有個選中框

這樣子複雜的場景? 肯定用 SToolbar 可以實現? 不巧, 還真能

實現方式

1. 在 xml 中定義基本的簡單屬性

<com.sharry.libtoolbar.SToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:statusBarStyle="Transparent"
        app:backIcon="@drawable/icon_back"
        app:subItemInterval="10dp"
        app:titleGravity="Left"
        app:titleTextSize="18dp" />
複製代碼

• statusBarStyle: 這個屬性, 用於控制狀態欄
  • Transparent: 全透明
  • Translucent: 半透明
  • Hide: 隱藏狀態欄
  • Default: 默認狀態
• 其餘的屬性在上面的場景中已經介紹過, 這裏再也不贅述

2. 在代碼中定義自定義的 Menu

protected void initTitle() {
        SToolbar toolbar = findViewById(R.id.toolbar);
        // 1. 建立自定義 View 的屬性
        mCheckIndicator = new CheckedIndicatorView(this);
        // 2. 將這個自定義 View 經過 addRightMenuView 添加到 Toolbar 中
        toolbar.addRightMenuView(
                mCheckIndicator,
                ViewOptions.Builder()
                        .setVisibility(View.INVISIBLE)
                        .setWidthExcludePadding(dp2px(this, 25))
                        .setHeightExcludePadding(dp2px(this, 25))
                        .setPaddingRight(dp2px(this, 10))
                        .setListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                mPresenter.handleToolbarCheckedIndicatorClick(mCheckIndicator.isChecked());
                            }
                        })
                        .build()
        );
    }
複製代碼

這裏就能夠看到

• 咱們傳入了一個自定義 View
• 構建了一個 ViewOptions, 經過 Builder 設置的屬性最終都會做用到這個 View 上

總結

相信經過上面幾個場景的介紹, 你們對 SToolbar 在使用上, 有了必定程度的瞭解, 其實每一個位置上的 View, 均可以經過這種方式去實現, 這樣子我相信應該能夠知足開發過程當中絕大多數的需求了

你能夠經過 Options 調整各個位置的 View, 也能夠在各個位置上添加自定義 View, 好比構造出下面這樣子的 Title

想了解更多請移步到下方的 Github 查看源碼

github.com/SharryChoo/…