Toolbar詳解 · Material Design Part 2

這是一個系列文章，在這個系列裡，我會按打造一個Material Design App的路線介紹所有應當掌握和值得掌握的系統組件。

你會在這些文章里了解到這些組件的使用和內部實現原理，以及它們背後所反映的Material Design的設計思想，希望你會喜歡。

往期回顧

Material Design Part 1 · TextInput詳解

Tips

我的每一篇博客都會提供詳盡的API介紹，如果你想快速查閱某個功能的API或如何實現，建議Ctrl+F（Commad+F）在本頁面搜索關鍵字查找。

Thanks for reading~!

前言

上一篇我介紹了關於文本輸入控制項的使用，同時也完成了登錄頁面。接下來，app會進入主頁，主頁的控制項通常是最多的，那麼決定介紹的先後順序便很重要。

原本我打算先介紹我認為最重要的組件CoordinatorLayout，可是寫著寫著我發現，由於CoordinatorLayout扮演的是一個「協調者」的角色，如果要完成它的介紹，就需要使用到各種其他的組件。如果不先對這些組件進行一一介紹就直接介紹它的話，會導致文章增加很多其他組件的描述，而這些描述通常都做不到完整和詳實。

所以我決定在介紹CoordinatorLayout前，將其他會用到的較為簡單的組件一一介紹一遍。那麼這一篇，就介紹頁面最頂部的組件——Toolbar。

我原本想把CollapsingToolbarLayout和這篇放在一塊寫的，但是發現前者要寫的東西完全足夠支撐起一篇新的文章，所以我會在後面的文章介紹CollapsingToolbarLayout。目前先把簡單的都給弄完~ 歡迎大家提意見！??

目錄

1. Toolbar簡介
2. Toolbar方法詳解
3. 代碼雜燴

Toolbar簡介

Material Design的世界其實就是一個真實世界的縮影，而在真實世界中，物體的光影效果、真實的觸感和明確合理的運動行為是我們感受大部分物體的主要渠道。所以，如果我們想要在電子屏幕里達到原質化的設計效果，做好這三點就是關鍵。

今天要介紹的Toolbar，就是這樣一個遵循Material Design規範的組件，它於Android 5.0的時候推出（呵呵，現在寫還真是早啊??），其目的是用來取代之前的Actionbar作為Android應用的導航欄。與Actionbar相比，Toolbar更加的靈活和美觀：它可以被安放到界面的任何地方，也提供了可定製化的空間。

在Material Design對Toolbar的定義里，Toolbar被視為一個台階，懸浮於會受它影響的內容頁面之上。Toolbar的寬度應受到所有會越過它的其他視圖元素的影響（這句翻譯的不好，說白了就是它的寬度應是最大的，大到足以包含所有在其之下的子View）。

那麼Toolbar中有哪些元素呢？看圖：

從左到右，依次是：

• 導航按鈕
• logo
• 標題與子標題
• 自定義的view（Toolbar本身繼承自ViewGroup）
• Action Menu

這些元素都提供了相應的方法來設置，接下來，我就結合源碼來詳細介紹一下Toolbar的方法和XML屬性。

Toolbar方法詳解

XML屬性&常用方法

• navigationIcon：設置Navigation Button的圖標

• logo：設置出現在Toolbar開始位置的logo（位於Navigation Button之後）。

• title、subtitle：設置Toolbar的title、subtitle。

• titleTextAppearance subtitleTextAppearance：設置title和subtitle的文字樣式。

• titleTextColor subtitleTextColor：設置title和subtitle的文字顏色。

• titleMargin titleMarginStart titleMarginEnd titleMarginTop titleMarginBottom：設置title的Margin，如果同時設置titleMargin和titleMarginStart(End,Top,Bottom)，則優先取後面的屬性值。

  對應方法：getTitleMargin()、getTitleMargin()、getTitleMargin()、getTitleMargin()、getTitleMargin()獲取相應的Margin值

• contentInsetLeft、contentInsetRight、contentInsetStart、contentInsetEnd：Toolbar的左右兩側都是默認有16dp的padding的，如果你需要讓Toolbar上的內容與左右兩側的距離有變化，便可以通過以上四個屬性來進行相應的設置。

  比如要讓內容緊貼左側或起始側便可以將contentInsetLeft或contentInsetStart設為0。
  對應方法：setContentInsetsRelative(int,int)——對應start和end

  setContentInsetsAbsolute(int,int)——對應left和right

• contentInsetStartWithNavigation：同樣的，如果該Toolbar有Navigation button的話，同樣也默認有16dp的距離。如果你希望navigation button右側的內容與button之間的距離有變化，便可以通過該屬性來進行相應的設置。

  對應方法：setContentInsetStartWithNavigation(int)

• contentInsetEndWithActions：詳情見上。該屬性是設置Action菜單與其左側內容的距離的，默認為16dp。

  對應方法：setContentInsetEndWithActions(int)
  注：原本想說明下內部源碼實現細節，但發現描述起來字數太多且容易給人困惑，如果讀者有興趣的話可以自行閱讀，遇到問題歡迎交流。??

• theme：設置Toolbar的Theme

• popupTheme：設置Toolbar上彈出菜單的Theme

代碼雜燴

效果圖

Toolbar詳解·效果視頻1—在線播放—優酷網，視頻高清在線觀看 http://v.youku.com/v_show/id_XMTc1NzY2OTAxMg==.html

layout/activity_toolbar_demo.xml

<?xml version="1.0" encoding="utf-8"?>n<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"n xmlns:app="http://schemas.android.com/apk/res-auto"n xmlns:tools="http://schemas.android.com/tools"n android:id="@+id/activity_toolbar_demo"n android:layout_width_="match_parent"n android:layout_height="match_parent"n android:orientation="vertical"n tools:context="com.jiandanxinli.smileback.materiallogin.ToolbarDemoActivity">nnn <android.support.v7.widget.Toolbarn android:id="@+id/toolbar"n android:layout_width_="match_parent"n android:layout_height="wrap_content"n android:background="?attr/colorPrimary"n android:minHeight="?attr/actionBarSize"n app:contentInsetEnd="0dp"n app:contentInsetEndWithActions="0dp"n app:contentInsetLeft="0dp"n app:contentInsetStart="0dp"n app:contentInsetStartWithNavigation="0dp"n app:logo="@mipmap/ic_launcher"n app:navigationIcon="@drawable/ic_home_white_24dp"n app:popupTheme="@style/AppToolbarPopup"n app:subtitle="子標題"n app:subtitleTextColor="@color/colorWhite"n app:theme="@style/AppToolbar"n app:title="標題"n app:titleTextColor="@color/colorWhite">nn <LinearLayoutn android:layout_width_="wrap_content"n android:layout_height="wrap_content"n android:gravity="center"n android:orientation="horizontal">nn <CheckBoxn android:layout_width_="wrap_content"n android:layout_height="wrap_content" />nn <TextViewn android:layout_width_="wrap_content"n android:layout_height="wrap_content"n android:text="hello~"n android:textColor="@color/colorWhite"n android:textSize="18sp" />nn </LinearLayout>n </android.support.v7.widget.Toolbar>n</LinearLayout>n

style/AppToolbar.xml

<style name="AppToolbar" parent="AppTheme">n <item name="android:textColorSecondary">@color/colorWhite</item>n</style>n

style/AppToolbarPopup.xml

<style name="AppToolbarPopup" parent="AppTheme">n <item name="actionMenuTextColor">@color/textPrimary</item>n</style>n

activity_toolbar_demo_menu.xml

<?xml version="1.0" encoding="utf-8"?>n<menu xmlns:android="http://schemas.android.com/apk/res/android"n xmlns:appcompat="http://schemas.android.com/apk/res-auto">nn <itemn android:id="@+id/search"n android:icon="@drawable/ic_search_white_24dp"n android:title="搜索"n android:visible="true"n appcompat:showAsAction="ifRoom"/>nn <itemn android:id="@+id/notification"n android:icon="@drawable/ic_notifications_white_24dp"n android:title="通知"n android:visible="true"n appcompat:showAsAction="ifRoom"/>nn <itemn android:id="@+id/feedback"n android:title="反饋意見"n android:visible="true"n appcompat:showAsAction="ifRoom"/>nn <itemn android:id="@+id/about"n android:title="關於"n android:visible="true"n appcompat:showAsAction="ifRoom"/>nn</menu>n

ToolbarDemoActivity.java

public class ToolbarDemoActivity extends AppCompatActivity {nn @BindView(R.id.toolbar)n Toolbar toolbar;nn @Overriden protected void onCreate(Bundle savedInstanceState) {n super.onCreate(savedInstanceState);n setContentView(R.layout.activity_toolbar_demo);n ButterKnife.bind(this);nn setSupportActionBar(toolbar);n if (getSupportActionBar() != null) {n getSupportActionBar().setDisplayHomeAsUpEnabled(true);n }nn toolbar.setNavigationOnClickListener(new View.OnClickListener() {n @Overriden public void onClick(View v) {n showSnackBar("歡迎來到首頁！", toolbar);n }n });n }nn @Overriden public boolean onCreateOptionsMenu(Menu menu) {n getMenuInflater().inflate(R.menu.activity_toolbar_demo_menu, menu);n return super.onCreateOptionsMenu(menu);n }nn @Overriden public boolean onOptionsItemSelected(MenuItem item) {n switch (item.getItemId()) {n case R.id.search:n showToast("搜索功能尚未開放");n break;n case R.id.notification:n showToast("暫時沒有未讀的通知");n break;n case R.id.feedback:n showToast("客服還沒有上班~");n break;n case R.id.about:n showToast("關於頁面還在路上~");n break;n }n return super.onOptionsItemSelected(item);n }nn private void showToast(String message) {n Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();n }nn private void showSnackBar(String message, View view) {n Snackbar.make(view, message, Snackbar.LENGTH_SHORT).show();n }n}n

參考文章

Toolbar | Android官方文檔

Toolbars | Material Design

微信公眾號: BugDev「bugdev」

歡迎關注啦~

推薦閱讀：