[Android] 撰寫Navigation View(側選單)父類別，應用在所需要的Activity

Google推出Android Design Support Library有非常久的一段時間了，要設計有Material Design的APP也不是一件難事。有許多APP都有使用到Navigation View，中文有人稱為側選單，Play商店、巴哈姆特APP、Twitch App等都有使用，如下圖 ↓

如圖上所顯示的，導覽列有著許多的項目，如果每個項目都要重複寫一次Navigation View的程式碼，重新撰寫Item被點擊的事件，不覺是一件很浪費時間的事嗎?

今天來記錄一個Navigation View的父類別，有需要的使用Navigation View的Activity，繼承這個類別即可。

按慣例，拿上一個專案來進行修改。

先創建一個navigation_drawer.xml

側選單中需要有一些項目，所以我們在menu底下創建一個menu_navigation.xml

其中navItemOne就使用我們之前的ViewPager，第二個About-呈現此APP的資訊，第三個則為出現AlertDialog詢問是否確定登出
為About，創建一個about.xml
要呈現的畫面準備好了，再來就是我們的重點，創建一個父類別，Navigation_BaseActivity.java 在這個BaceActivity中撰寫將側邊欄放入，並針對NavigationItemClick事件進行撰寫
修改MainActivity.java繼承Navigation_BaseActivity，並設置ToolBar標題以及目前位於哪一個項目

創建About.java 讓我們來看看目前的效果

恩..看起還少了點甚麼，Navigation View通常在上方都會有一個區塊顯示帳戶ID或該APP的全名之類的，要做出那樣效果也十分容易。
設計一個navigation_drawer_header.xml
並在Navigation View中加入app:headerLayout="@layout/navigation_drawer_header"
完整效果:

參考文獻：android-navigation-drawer-with-multiple
                    Android帶側滑菜單和ToolBar的BaseActivity

完整專案：Solinari GitHub

Read More

[Android] RecyclerView畫面滑動時，隱藏ToolBar [使用CoordinatorLayout]

有些APP在使用時，當你往下滑動，ToolBar就會隨之隱藏，往上滑時又會出現，這樣的好處是使用者在瀏覽時可以有更大的可視空間。

實做畫面如下圖↓

要呈現這樣的效果，依靠的是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就完整了，趕快執行起來看看成果吧!

參考文獻：How to hide/show Toolbar when list is scrolling (part 3)

　　　　　官方文件-CoordinatorLayout

完整專案：Solinari GitHub

Read More