為什么一定要學(xué)習(xí)Material Design？
許多程序員有這樣的疑問：現(xiàn)有的知識(shí)能滿足工作需要了，為什么還要費(fèi)勁去學(xué)習(xí)Material Design？
那么我可以告訴你，Material Design大大節(jié)約了UI上的開發(fā)時(shí)間，而學(xué)會(huì)她(滿足日常使用)只需花一點(diǎn)點(diǎn)功夫。
好了，讓我們集中注意力開始學(xué)習(xí)吧～
本文要點(diǎn)
- 保持ViewPager中Fragment的狀態(tài)。
- 快速綁定已有數(shù)據(jù)的TabLayout與ViewPager。
- 在Fragment中顯示標(biāo)題欄，并為該標(biāo)題欄添加菜單。
- Fragment嵌套Fragment。
- 一行代碼解決RecyclerView等視圖的滾動(dòng)沖突。
- 為Fragment中的頭部視圖(含圖片)實(shí)現(xiàn)沉浸式。
- 最簡(jiǎn)單的沉浸式?版本適配。
一個(gè)奇怪的需求
有這樣一個(gè)需求：
- MainActivity里有一個(gè)ViewPager，ViewPager里面有三個(gè)Fragment，各個(gè)Fragment標(biāo)題欄是不一樣。
- 第一個(gè)Fragment需要有一個(gè)帶菜單的沉浸式頭部視圖(帶圖片)以及一個(gè)ViewPager，該ViewPager包含兩個(gè)子Fragment。
- 子Fragment內(nèi)包含帶下拉刷新的RecyclerView，該RecyclerView滑動(dòng)的時(shí)候，父Fragment里的沉浸式頭部也要跟著收起或拉伸。
傳統(tǒng)解決方案
傳統(tǒng)解決方案主要需要解決這些問題：
1.頭部圖片與標(biāo)題欄的伸縮協(xié)調(diào)；
2.標(biāo)題欄與狀態(tài)欄的沉浸式協(xié)調(diào)及版本適配；
3.滾動(dòng)視圖的事件沖突。
別看只有三個(gè)主要問題，但每個(gè)問題都?jí)蚰銓懸淮蠖训倪壿嫶a了。
美團(tuán)實(shí)現(xiàn)了比這簡(jiǎn)單的功能。
美團(tuán)使用傳統(tǒng)方案部分實(shí)現(xiàn)
美團(tuán)的這個(gè)頁(yè)面是一個(gè)單獨(dú)的Activity，無(wú)需解決Fragment標(biāo)題欄與沉浸式的問題。然而美團(tuán)并沒有實(shí)現(xiàn)沉浸式，多次拖拉還會(huì)出現(xiàn)滑不動(dòng)的情況。不過，功能是實(shí)現(xiàn)了，也還算流暢吧，那么還有更好的解決方案嗎？
使用Material控件完美解決
話不多說，獻(xiàn)上Demo: MaterialShow。
使用Material控件可以非常優(yōu)雅地消滅各種問題，幾乎不需要寫任何邏輯代碼。
如絲般順滑，性能杠杠的～往下繼續(xù)查看要點(diǎn)解讀。
使用Martial Design優(yōu)雅實(shí)現(xiàn)
要點(diǎn)解讀
// 保存ViewPager中Fragment的狀態(tài)
mViewPager.setOffscreenPageLimit(mFragments.size());
// 在Fragment中顯示標(biāo)題欄，并為該標(biāo)題欄添加菜單。
mToolbar.inflateMenu(R.menu.main);
mToolbar.setOnMenuItemClickListener(this);
// 快速綁定已有數(shù)據(jù)的TabLayout與ViewPager。
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.addOnTabSelectedListener(this);
// Fragment中ViewPager嵌套Fragment，需要注意傳入的FragmentMangager()，不然子Fragment可能無(wú)法顯示。
mViewPager.setAdapter(new FragmentStatePagerAdapter(getChildFragmentManager()...
// 一行代碼解決RecyclerView等視圖的滾動(dòng)沖突，具體請(qǐng)看[源碼](https://github.com/XunMengWinter/MaterialShow/tree/master) 。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
// 為Fragment中的頭部視圖(含圖片)實(shí)現(xiàn)沉浸式。
<style name="AppTheme.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDrawsSystemBarBackgrounds" tools:targetApi="lollipop">true</item>
<item name="android:statusBarColor" tools:targetApi="lollipop">@android:color/transparent </item>
</style>
// 為該Fragment所在的Activity設(shè)定該主題，會(huì)帶來一些輸入框問題，但是由于AppBar是在Fragment里面，如果在Activity里面的話直接設(shè)定為上面的主題就可以實(shí)現(xiàn)頭部圖片沉浸式了。
<style name="AppTheme.NoActionBar.Immerse">
<item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>
</style>
// 最簡(jiǎn)單的沉浸式?版本適配，請(qǐng)看源碼。
// 為ToolBar設(shè)置MarginTop.
android:layout_marginTop="@dimen/height_status_bar"
//在 dimen.xml 文件中添加
<dimen name="height_status_bar">0dp</dimen>
//在 dimen.xml(v19) 文件中添加
<dimen name="height_status_bar">22dp</dimen>
// p.s 這樣一來安卓4.4以上toolbar就距離頂部22dp了，而比4.4低的版本是沒有沉浸式這一概念的，所以設(shè)為0dp就好。
再來喵一眼，順便點(diǎn)個(gè)喜歡關(guān)注什么的～～
Material Design各個(gè)控件?自動(dòng)協(xié)調(diào)
