Material Design初露鋒芒之複雜檢視輕鬆實現

為什麼一定要學習Material Design？

許多程式設計師有這樣的疑問：現有的知識能滿足工作需要了，為什麼還要費勁去學習Material Design？
那麼我可以告訴你，Material Design大大節約了UI上的開發時間，而學會她(滿足日常使用)只需花一點點功夫。

好了，讓我們集中注意力開始學習吧～

本文要點

• 保持ViewPager中Fragment的狀態。
• 快速繫結已有資料的TabLayout與ViewPager。
• 在Fragment中顯示標題欄，併為該標題欄新增選單。
• Fragment巢狀Fragment。
• 一行程式碼解決RecyclerView等檢視的滾動衝突。
• 為Fragment中的頭部檢視(含圖片)實現沉浸式。
• 最簡單的沉浸式�版本適配。

一個奇怪的需求

有這樣一個需求：

• MainActivity裡有一個ViewPager，ViewPager裡面有三個Fragment，各個Fragment標題欄是不一樣。
• 第一個Fragment需要有一個帶選單的沉浸式頭部檢視(帶圖片)以及一個ViewPager，該ViewPager包含兩個子Fragment。
• 子Fragment內包含帶下拉重新整理的RecyclerView，該RecyclerView滑動的時候，父Fragment裡的沉浸式頭部也要跟著收起或拉伸。

傳統解決方案

傳統解決方案主要需要解決這些問題：
1.頭部圖片與標題欄的伸縮協調；
2.標題欄與狀態列的沉浸式協調及版本適配；
3.滾動檢視的事件衝突。

別看只有三個主要問題，但每個問題都夠你寫一大堆的邏輯程式碼了。
美團實現了比這簡單的功能。

美團的這個頁面是一個單獨的Activity，無需解決Fragment標題欄與沉浸式的問題。然而美團並沒有實現沉浸式，多次拖拉還會出現滑不動的情況。不過，功能是實現了，也還算流暢吧，那麼還有更好的解決方案嗎？

使用Material控制元件完美解決

話不多說，獻上Demo: MaterialShow。
使用Material控制元件可以非常優雅地消滅各種問題，幾乎不需要寫任何邏輯程式碼。

如絲般順滑，效能槓槓的～往下繼續檢視要點解讀。

要點解讀

// 儲存ViewPager中Fragment的狀態
mViewPager.setOffscreenPageLimit(mFragments.size());

// 在Fragment中顯示標題欄，併為該標題欄新增選單。
mToolbar.inflateMenu(R.menu.main); 
mToolbar.setOnMenuItemClickListener(this);

// 快速繫結已有資料的TabLayout與ViewPager。
mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));
mTabLayout.addOnTabSelectedListener(this);

// Fragment中ViewPager巢狀Fragment，需要注意傳入的FragmentMangager()，不然子Fragment可能無法顯示。
mViewPager.setAdapter(new FragmentStatePagerAdapter(getChildFragmentManager()...

// 一行程式碼解決RecyclerView等檢視的滾動衝突，具體請看[原始碼](https://github.com/XunMengWinter/MaterialShow/tree/master) 。
app:layout_behavior="@string/appbar_scrolling_view_behavior"

// 為Fragment中的頭部檢視(含圖片)實現沉浸式。

<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設定該主題，會帶來一些輸入框問題，但是由於AppBar是在Fragment裡面，如果在Activity裡面的話直接設定為上面的主題就可以實現頭部圖片沉浸式了。
<style name="AppTheme.NoActionBar.Immerse">
    <item name="android:windowTranslucentStatus" tools:targetApi="kitkat">true</item>
</style>

// 最簡單的沉浸式�版本適配，請看原始碼。

// 為ToolBar設定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低的版本是沒有沉浸式這一概念的，所以設為0dp就好。

再來喵一眼，順便點個喜歡關注什麼的～～

相關連結

本文Demo
30分鐘入門Android Material Design