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

coder-pig發表於2018-01-06

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
可以幫助我們解決這個問題，使用也很簡單：