DrySister看妹子應用(第二版)——1.新版Material Design主界面搭建

DrySister的第二大版本開工啦~(≧▽≦)/~啦啦啦！！！
第二版的第一節比較簡單，就是更換一波APP的頁面，把界面換成
Material Design風格，我們會用到這些控件：
DrawerLayout，CoordinatorLayout，AppBarLayout，Toolbar，
ConstraintLayout，NavigationView，FloatingActionButton，
Snackbar，ActionBarDrawerToggle
本節做的就是用他們拼出一個通用(爛大街)的MD佈局。Go，Go，Go～
最終的效果：

1.添加依賴庫

build.gradle裏需要添加下述依賴才能正常使用這些庫：

implementation 'com.android.support:appcompat-v7:26.1.0'
implementation 'com.android.support:design:26.1.0'
implementation 'com.android.support.constraint:constraint-layout:1.0.2'

2.使用DrawerLayout

界面大改，先把MainActivity裏的內容刪了，我們打算把現在的
內容放到一個Fragment裏。刪除完成後的代碼如下：

然後把activity_main.xml佈局裏的東西都刪了，用DrawerLayout作爲外層佈局：

簡介下兩個屬性：

android:fitsSystemWindows="true"    # 是否適應屏幕大小
tools:openDrawer="start"    # 將對象的X軸位置放在它容器的起始位置，並且不改變其大小

如果有點不瞭解，沒什麼，照着寫就是了，接着我們加入兩個ImageView
弄點顏色，分別表示中間的內容以及抽屜的佈局，通過
android:layout_gravity="start" 控制抽屜彈出方向，如果想右側彈出可以改成end.
修改後的代碼：

運行一波看看效果：

可以很贊，這裏可能細心的讀者可能會發現：怎麼你這個好像沒有導航欄？
是的，因爲我在AndroidManifest.xml裏設置了一個NoActionBar的sytle：

如果不設置的話默認使用的是ActionBar，巨醜而且不好拓展：

接下來我們來修改中間的內容部分，兩個大的部分組成，頂部的
Toolbar和中間顯示內容的部分(用來給Fragment填充的部分)

2.使用CoordinatorLayout，Toolbar，ConstraintLayout，AppBarLayout

先來簡單介紹下這幾個控件分別是拿來幹嘛的：

CoordinatorLayout：
是用來協調子View的一個ViewGroup，結合Behavior
可以做出很多棒棒的特效。要和ConstraintLayout區分開來，新手
最容易把這兩個記錯混淆…
ConstraintLayout
約束佈局：支持百分比的更強大的RelativeLayout
更多內容用法可見：哲♂學三幻神帶你學習ConstraintLayout(約束佈局)
AppBarLayout
一個垂直方向的LinearLayout，相比起普通的LinearLayout，可以通過一些
參數控制子View的滑動行爲，比如包裹住Toolbar可以讓它響應滾動事件。
Toolbar
5.0新出的用來取代ActionBar的導航控件，除了具有Material Design風格外，
還有更高的可定製性與靈活性。

開始編寫程序，先是內容部分吧，我們定義一個佈局：content_main.xml
用一個ConstraintLayout包着一個TextView：

接着到帶有toolbar的部分了，另外定義一個佈局：app_bar_main.xml
用CoordinatorLayout包着一個Toolbar和inclue上面的content_main.xml

然後activity_main.xml中include下這個佈局：

運行下：

這裏發現我們的toolbar並沒有顯示我們的中文，這個需要在MainActivity
中調用setSupportActionBar(toolbar); 的方法進行設置

運行下：

感覺還是有些美中不足，Material Design裏其中一點強調的就是Z軸，
用來表示元素間的層疊關係，元素離界面底層（水平面）越遠，投影越重。
這裏我們可以使用AppBarLayout容器來包裹住Toolbar。
這個Toolbar的文字顏色是黑色，有點太突兀了，可以順道給我們的
Toolbar設置一個主題：

修改後的 app_bar_main.xml

運行下看下效果：

恩，有投影效果了，對了這裏還有個小技巧要告訴你的，就是include
的時候，想在include那個佈局看到他所嵌套的那個界面的情況的話，
可以添加：tools:showIn=”@layout/嵌套在那個佈局”，進行渲染。

嘖嘖，不錯，關於頁面內容就先這樣吧，接着是左側的抽屜佈局了。

3.使用NavigationView

抽屜佈局裏的內容，我們可以自定義佈局，或者使用Design庫爲我們提供
的NavigationView，使用起來非常方便：

這個東西使用起來非常簡單，分兩部分組成：頭部以及下面的菜單列表，
頭部通過：app:headerLayout=”@layout/上面的佈局” 來進行設置；
而菜單則是指向一個menu文件：app:menu=”@menu/activity_main_drawer”

那就先來組合頭部吧，新建xml文件：nav_header_main.xml

看下效果：

接着是組合菜單，右鍵menu文件夾(沒有新建)，新建一個 activity_main_drawer.xml
我們菜單想分爲兩個部分：
上面：看小姐姐，看天氣，看資訊，小工具
下面：設置，關於

另外，這裏設置圖標的話，無論你的圖標是什麼顏色的，最後都會
變成灰色，想使用彩色的圖標的話，需要在Java裏爲NavigationView
設置setItemIconTintList(null);

運行下看下效果：

接下來爲我們的菜單設置點擊事件：NavigationView.OnNavigationItemSelectedListener
點擊按鈕觸發事件的同時，關閉DrawerLayout。

4.添加 ActionBarDrawerToggle

不知道你有沒有這樣的感覺，DrawerLayout從左側滑出，有時候因爲我們沒貼近
邊邊或者手機的問題，側滑抽屜偶爾滑不出來。一個好的方案是添加一個按鈕，
然後點擊的時候DrawerLayout滑出。MD庫裏給我們提供了一個ActionBarDrawerToggle
可以幫助我們解決這個問題，使用也很簡單：