Android 的各種Bar,從ActionBar到CollapsingToolbarLayout。

Evan Chen
Evan Chen
Jan 14 · 7 min read

Android前前後後推出了不少跟Bar有關的元件,這篇就來介紹一下這幾種Bar的差異:ActionBar、Toolbar、AppBarLayout、CollapsingToolbarLayout。

🔸ActionBar:最早出現、最基本的Bar。

🔸Toolbar:可客制Bar裡的內容。

🔸AppBarLayout:可響應其他View的變化而跟著變化。

🔸CollapsingToolbarLayout:可折疊式的Toolbar。

開始之前,你可以參考我的線上課程,
透過連結取得優惠價:Android UI 進階實戰裡面會更多的UI進階教學。

ActionBar

Action是最早出現、最基本的Bar。

在新增一個專案後,你可以在Style看到預設的AppTheme就是一個有ActionBar的Theme。

res/values/styles.xml

所以執行App開啟Activity後,就會有一個ActionBar在你的畫面上。

在ActionBar加入Item

你可以在ActionBar上加上Item,而這通常會放在右邊。

在res新增menu資料夾,再新增menu.xml

在Activity的onCreateOptionsMenu載入menu。

執行後就可以看到右邊多了2個Icon。

ActionBar上的Item點擊事件。在onOptionsItemSelected裡依照item.itemId來判斷是menu上的哪個Item被點擊。

Toolbar

Toolbar 是在android 5.0 之後,用來取代 ActionBar 的新元件,可以讓你客制Bar的內容。

例如我想在Bar裡放一個輸入欄位。

首先把現有的ActionBar的Style取消。新增一個Style,是沒有ActionBar的

res/values/styles.xml

新增一個Activity:ToolBarActivity,並在AndroidManifest.xml 設定ToolBarActivity的theme為AppTheme.NoActionBar

新增一個Toolbar,這裡面就可以放你想放的客制內容,這邊我們放一個輸入的欄位:TextInputLayout。

activity_tool_bar.xml

在Activity加上setSupportActionBar(toolbar)

如果要在ToolBar上,加上返回鍵,再加上以下處理。

執行後就可以看到Bar上面出現輸入欄位了。

AppBarLayout

AppBarLayout可以讓你搭配CoordinatorLayout,隨著其他View的變化而跟著變化。

像這個景點介紹的畫面,我們可以做到當我往上滑的時候,Toolbar跟著隱藏,往下滑的時候ToolBar就出現。

1.新增CoordinatorLayout,裡面加上AppBarLayout及NestedScrollView。

2.在AppBarLayout裡,新增Toolbar。

在NestedScrollView裡加上app:layout_behavior=”@string/appbar_scrolling_view_behavior”,表示AppBar會隨著ScrollView的變化而跟著變化。

Toolbar裡設定app:layout_scrollFlags則設定當NestedScrollView滑動時,對應的變化。當 app:layout_scrollFlags=scroll,往上滑動ScrollView時,Toolbar將跟著隱藏。

當 app:layout_scrollFlags=scroll|enterAlways,則再增加往下滑時,馬上就出現Toolbar。

CollapsingToolbarLayout

CollapsingToolbarLayout是一個可折疊式的Toolbar。

從上一個AppBarLayout的範例。在AppBarLayout裡加上CollapsingToolbarLayout,裡面再加上一個ImageView及Toolbar。原本在toolBar的app:layout_scrollFlags則改在CollapsingToolbarLayout裡設定。

CollapsingToolbarLayout的折疊模式

設定完之後,app:layout_scrollFlags 可以做更多的變化。

scroll|enterAlways
原本的這個設定則會變成一往下滑,Toolbar跟ImageView都會出現

scroll|enterAlwaysCollapsed
往下滑到最底才出現ImageView

scroll|enterAlways|enterAlwaysCollapsed
一往下滑就會出現Bar,至最底才會出現ImageView

exitUntilCollapsed
Scrollview 向上滑動時,CollapsingToolbarLayout 會隱藏到 minHeight 的高度,向下滑一點就會出現。

snap
CollapsingToolbarLayout 只會有完全隱藏或完全顯示,不會有出現一半的情況

CollapsingToolbarLayout 還有一些其他屬性可以設定

contentScrimCollapsingToolbarLayout 收縮後的背景顏色。

expandedTitleMarginStart還沒有收縮時title與左邊間距

expandedTitleMarginEnd還沒有收縮時title與右邊間距

以上就是這幾個Bar的介紹。

還有一個BottomAppBar則是在底部的Bar,就等到有空的時候再來介紹囉。


Evan Android Note

Android 的筆記心得

Evan Chen

Written by

Evan Chen

Evan Android Note

Android 的筆記心得

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade