實做畫面如下圖↓
要呈現這樣的效果,依靠的是Design Support Library中的「CoordinatorLayout」,CoordinatorLayout簡易來說就是當一個View變動的時候,其餘的View也會有特定的移動。
我們拿上一次的專案來進行這次的實做,原先三個Fragment都只有一個輸入框,無法上下滑動,需要來修改一下使其可以進滑動的動作,這裡我使用大多數APP使用來呈現資料的RecyclerView,並搭配CardView來呈現較為特殊的效果。
在Gradle中加入以下:
創建一個recycler_textview.xml,透過Cardview使Textview有不一樣的效果,用來當作RecyclerView放資料的容器,可以自行設計樣式
fragmentlist_one.xml也進行修改,使用RecyclerView元件,並將Fragment的Backgroud改為白色
要使用RecyclerView,需要一個Adapter,建立一個RecyclerViewAdapter.java
修改FragmentList_One.java,使其RecyclerView擁有資料
將原先activity_main.xml的LinearLayout轉換成CoordinatorLayout
如果你直接就這樣執行的話,會發現ToolBar以及TabLayout消失了,我們還需要使用AppBarLayout(一個垂直的LinearLayout,實現了不少關於app bar material design的概念)將ToolBar與TabLayout包覆起來,使其成為AppBarLayout的Children。
並在ToolBar中使用「app:layout_scrollFlags="scroll | enterAlways | snap"」,scrollFlags有「ENTER_ALWAYS」、「ENTER_ALWAYS_COLLAPSED」、「EXIT_UNTIL_COLLAPSED」、「SNAP」等,詳細介紹可至官方文件查看。
以為這樣就完成了嗎? 執行的話你會發現ViewPager有上面有一部分被擋住了,如下圖
原因是因為我們沒有對CoordinatorLayout中的Child view-ViewPager設置Behaviors,於ViewPager中設置「app:layout_behavior="@string/appbar_scrolling_view_behavior"」,activity_main.xml就完整了,趕快執行起來看看成果吧!
完整專案:Solinari GitHub