Android 的各種Bar，從ActionBar到CollapsingToolbarLayout。
Android前前後後推出了不少跟Bar有關的元件，這篇就來介紹一下這幾種Bar的差異：ActionBar、Toolbar、AppBarLayout、CollapsingToolbarLayout。
🔸ActionBar：最早出現、最基本的Bar。
🔸Toolbar：可客制Bar裡的內容。
🔸AppBarLayout：可響應其他View的變化而跟著變化。
🔸CollapsingToolbarLayout：可折疊式的Toolbar。
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的折疊模式
- pin ： 當CollapsingToolbarLayout完全收縮時，Toolbar仍在螢幕上。
- parallax ： 在滑動內容時，CollapsingToolbarLayout中的View也會同時滑動。
- app:layout_collapseParallaxMultiplier=”0.7" ：折疊變化過程的速度。
設定完之後，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，就等到有空的時候再來介紹囉。
歡迎追蹤我的Facebook：Evan App Note
👊 給Android 初學者 的快速成長 線上課程
1️⃣ UI 進階實戰 — Material Design Component 讓你簡單做出效果超好的UI
2️⃣ 動畫入門到進階 — 用動畫提升使用者體驗
3️⃣ 架構設計 — MVP、MVVM 讓你程式碼好維護
🆙 3堂組合包更划算 — Android 架構設計 + 動畫入門到進階 + UI 進階實戰
寫測試一點都不難，參考我的實體書：
「Android TDD 測試驅動開發：從UnitTest、TDD到DevOps實踐」
APP 程式總是改壞？ — — — ☑ 用單元測試驗證正確性，再也不怕改錯！
APP 需求經常變更？ — — — ☑ TDD：紅燈、綠燈、重構，三步驟法則！
APP 人工作業耗時？ — — — ☑ 測試、部署自動化一次搞定！
