上一篇已經對首頁的結構進行了簡單的分析，從今天開始，碼，編起來。
側滑菜單
The story begins: long long ago...
真的不夸張，已經好久沒有看到到過側滑君 SlidingMenu 了， 最后一次見到它還是在 Eclipse 時代。在官方推出側滑之前，側滑君統治了半壁江山。從推酷應用就可以看出，它是一個典型的 meterial design 風格的應用。因此，側滑菜單控件就選用官方 DrawerLayout + NavigationView 的組合方式。
使用 AS 創建這種組合的 Activity 頁面還是灰常簡單。點擊菜單：File -> New -> Activity，選擇 Navigation Drawer Activity，然后，符合要求的 Activity 便創建出來了（也可以在新建項目時，把默認創建的 Activity 選擇為 Navigation Drawer Activity）。編譯完成后，將生成的頁面設置為項目的啟動頁面，運行項目。你將發現，模擬器上顯示的頁面，除了需要的側滑外，Toolbar 也有了，還多了一個紅色的浮動按鈕，如圖所示：
是不是已經很像了？當然，不同之處還是有很多。經過對比，側滑菜單上需要修改的地方有兩大類：
- 菜單項名稱、菜單項圖標，菜單項點擊后的顏色
- 頭部的背景、布局
既然找到了不同，那就馬上開始修改。
頭部修改
NavigationView 控件有兩個主要的屬性：app:headLayout、app:menu，分別用來設置：頭部的布局，菜單項內容。
打開 app:headLayout 屬性指定的布局文件 nav_header_main.xml。在推酷應用中，這里應該顯示用戶的圓形頭像，和登錄/注冊的操作。上一篇中提到，圓形頭像的控件使用 vinc3m1/RoundedImageView 這個控件。打開 GitHub 網站，找到這個控件，按照說明將布局文件中的 ImageView 控件替換掉。然后從反編譯后的資源文件中，找到默認顯示的頭像圖片。當然，別忘了修改頭部的背景。最后，將圖片下的兩個 TextVew 修改為一個，并設置樣式。最終的結果和 xml 文件內容如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:background="@mipmap/left_head_1"
android:orientation="vertical"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/imageView1"
android:layout_width="68dp"
android:layout_height="68dp"
android:src="@mipmap/menu_user"
android:scaleType="fitCenter"
android:layout_marginLeft="25dp"
android:layout_marginTop="20dp"
app:riv_corner_radius="30dip"
app:riv_border_width="0dip"
app:riv_border_color="#333333"
app:riv_mutate_background="true"
app:riv_tile_mode="clamp"
app:riv_oval="true" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="@string/register_login"
android:layout_marginLeft="30dp"
android:textSize="14sp"
android:textColor="@android:color/white"/>
</LinearLayout>
菜單項修改
與頭部一樣，首先找到 app:menu 屬性指定的菜單文件 activity_main_drawer.xml。該文件的內容如下：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import"/>
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery"/>
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow"/>
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools"/>
</group>
<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share"/>
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send"/>
</menu>
</item>
</menu>
該文件分為兩部分：group 和 item。這兩部分的區別在于：
- 菜單項點擊后背景顏色會發生變化，再次打開菜單時
-
group下的菜單項的顏色仍然保持選中的狀態，并且字體顏色也有變化 -
item下菜單項的背景顏色會恢復點擊前的顏色，并且字體顏色不會發生變化
-
-
android:title屬性-
item有該屬性且必須設置，設置后會在界面上顯示屬性的值 -
group沒有該屬性
-
推酷應用的表現與上述的文件有所不同，不同之處在于，分隔線下的菜單項是沒有標題的。因為，標題對于 item 來說，是必須的屬性，因此，我們可以知道，下面的菜單不是使用 item 進行組織。menu 的直接子元素只能是 group 或 item，所以下載的菜單項肯定是包含在 group 中的。
修改完標簽，接下來修改菜單項的圖標、文字和文字顏色。修改后的效果和文件如下：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_menu_home"
android:title="@string/home"/>
<item
android:id="@+id/nav_site"
android:icon="@drawable/ic_menu_site"
android:title="@string/site"/>
<item
android:id="@+id/nav_topic"
android:icon="@drawable/ic_menu_topic"
android:title="@string/topic"/>
<item
android:id="@+id/nav_weekly"
android:icon="@drawable/ic_menu_weekly"
android:title="@string/weekly"/>
<item
android:id="@+id/nav_mine"
android:icon="@drawable/ic_menu_mine"
android:title="@string/mine"/>
</group>
<group android:id="@+id/group_func">
<item
android:id="@+id/nav_mode"
android:title="@string/night_mode"/>
<item
android:id="@+id/nav_offline_download"
android:title="@string/offline_download"/>
<item
android:id="@+id/nav_settings"
android:title="@string/settings"/>
</group>
</menu>
修改時的注意事項：
- 兩個
group元素都必須設置id屬性，要不然分隔線出不來- 上面的
group元素需要設置android:checkableBehavior="single"這個屬性，要不然點擊菜單項后（這是側滑菜單收起了）再次打開菜單時，原來的選中狀態會丟失
主頁面
主頁面的結構大家應該都很熟悉吧，騰訊新聞、網易新聞、新聞資訊這些軟件都有著同樣的結構，而且推酷的主頁面還比它們少了底部導航，更加簡單了。這種結構最典型的實現就是：Toolbar + ViewPager。
去掉 FAB（FloatingActionBar）
就是去掉那個紅色的浮動按鈕。這個超級簡單，在整個工程中搜索 FloatingActionBar，就可以找到相應的布局文件和 Java 文件的相關引用，刪除就行了。
修改 Toolbar
修改背景色
系統為我們生成的 Toolbar 顏色是藍色，這是和當前的主題相關。同時，系統在 styles.xml 文件中，為我們生成了如下樣式：
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
在 colors.xml 文件中，為我們生成了以下顏色：
<color name="colorPrimary">#389884</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
以上這三種顏色控制的部分分別如下：
-
colorPrimary對應ActionBar的顏色。 -
colorPrimaryDark對應狀態欄的顏色 -
colorAccent對應EditText編輯時、RadioButton選中、CheckBox等選中時的顏色。
根據上面的解析可知：要改變 Toolbar 的背景顏色，只需要修改 colorPrimary 的值就可以了。
去掉 5.0 及以上版本的陰影
現在的菜單在 5.0 以下的版本上是沒有任何問題的，但在 5.0 及以上的版本中有一點點小瑕疵：Toolbar 的下邊緣有陰影效果。有人說這不算瑕疵，這是官方的亮點效果。但是，每種效果都需要放在合適的環境才能發揮它最大的效果，放在不合適的環境就是敗筆了。
好了，閑話少說，直接上解決辦法：在 xml 中，在 AppBarLayout 組件上，設置屬性：app:elevation="0dp" 即可。
修改彈出菜單
- 彈出菜單的內容不對，先改之。打開
res -> menu -> main.xml文件，修改即可，完成后的效果和文件內容如下：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_chinese"
android:orderInCategory="100"
android:title="@string/only_chinese"
app:showAsAction="never"/>
<item
android:id="@+id/action_english"
android:orderInCategory="100"
android:title="@string/only_english"
app:showAsAction="never"/>
<item
android:id="@+id/action_mixture"
android:orderInCategory="100"
android:title="@string/mix_chinese_english"
app:showAsAction="never"/>
<item
android:id="@+id/action_recommend_settings"
android:orderInCategory="100"
android:title="@string/recommond_settings"
app:showAsAction="never"/>
<item
android:id="@+id/action_custom_channel"
android:orderInCategory="100"
android:title="@string/custom_channel"
app:showAsAction="never"/>
<item
android:id="@+id/action_week_miss"
android:orderInCategory="100"
android:title="@string/week_miss"
app:showAsAction="never"/>
</menu>
- 在測試的過程中，發現一個小問題：點擊手機上的
Menu鍵，黑色主題的菜單從底部升起，菜單內容與Toolbar上菜單顯示的內容一樣。修改辦法：攔截系統Menu按鍵動作。代碼如下：
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_MENU) {
return true;
}
return super.onKeyDown(keyCode, event);
}
添加搜索圖標
從反編譯的包中找到搜索圖標：abc_ic_search_api_mtrl_alpha.png。添加的方式是在 res -> menu -> main.xml 添加 item 字段，要注意的是這個屬性： app:showAsAction="ifRoom"，代碼如下：
<item
android:id="@+id/action_search"
android:orderInCategory="7"
android:title=""
android:icon="@mipmap/white_search"
app:showAsAction="ifRoom"/>
注意：title 屬性是必須的。設置了 title 屬性的問題是：長按搜索按鈕后，會彈出一個黑色的提示框。可能控件本身就是這樣的，因為推酷客戶端也有同樣的問題。
效果
首頁的界面終于修改完了，讓我們來看下效果吧：
下期預告
整整花了兩篇文章才把頁面整清楚，至于與標題相關的技術一個都沒有提到。肯定有人會說：標題黨來了，大家快跑。大家不要心急，其實，界面也很重要哦。雖然現在沒有做功能，但至少它可以讓我們看起來很爽。
Warning ：一大波干貨正在接近……
