上一篇已經(jīng)對(duì)首頁(yè)的結(jié)構(gòu)進(jìn)行了簡(jiǎn)單的分析，從今天開(kāi)始，碼，編起來(lái)。

側(cè)滑菜單

The story begins: long long ago...

真的不夸張，已經(jīng)好久沒(méi)有看到到過(guò)側(cè)滑君 SlidingMenu 了， 最后一次見(jiàn)到它還是在 Eclipse 時(shí)代。在官方推出側(cè)滑之前，側(cè)滑君統(tǒng)治了半壁江山。從推酷應(yīng)用就可以看出，它是一個(gè)典型的 meterial design 風(fēng)格的應(yīng)用。因此，側(cè)滑菜單控件就選用官方 DrawerLayout + NavigationView 的組合方式。

使用 AS 創(chuàng)建這種組合的 Activity 頁(yè)面還是灰常簡(jiǎn)單。點(diǎn)擊菜單：File -> New -> Activity，選擇 Navigation Drawer Activity，然后，符合要求的 Activity 便創(chuàng)建出來(lái)了（也可以在新建項(xiàng)目時(shí)，把默認(rèn)創(chuàng)建的 Activity 選擇為 Navigation Drawer Activity）。編譯完成后，將生成的頁(yè)面設(shè)置為項(xiàng)目的啟動(dòng)頁(yè)面，運(yùn)行項(xiàng)目。你將發(fā)現(xiàn)，模擬器上顯示的頁(yè)面，除了需要的側(cè)滑外，Toolbar 也有了，還多了一個(gè)紅色的浮動(dòng)按鈕，如圖所示：

側(cè)滑菜單

首頁(yè)

是不是已經(jīng)很像了？當(dāng)然，不同之處還是有很多。經(jīng)過(guò)對(duì)比，側(cè)滑菜單上需要修改的地方有兩大類：

1. 菜單項(xiàng)名稱、菜單項(xiàng)圖標(biāo)，菜單項(xiàng)點(diǎn)擊后的顏色
2. 頭部的背景、布局

既然找到了不同，那就馬上開(kāi)始修改。

頭部修改

NavigationView 控件有兩個(gè)主要的屬性：app:headLayout、app:menu，分別用來(lái)設(shè)置：頭部的布局，菜單項(xiàng)內(nèi)容。

打開(kāi) app:headLayout 屬性指定的布局文件 nav_header_main.xml。在推酷應(yīng)用中，這里應(yīng)該顯示用戶的圓形頭像，和登錄/注冊(cè)的操作。上一篇中提到，圓形頭像的控件使用 vinc3m1/RoundedImageView 這個(gè)控件。打開(kāi) GitHub 網(wǎng)站，找到這個(gè)控件，按照說(shuō)明將布局文件中的 ImageView 控件替換掉。然后從反編譯后的資源文件中，找到默認(rèn)顯示的頭像圖片。當(dāng)然，別忘了修改頭部的背景。最后，將圖片下的兩個(gè) TextVew 修改為一個(gè)，并設(shè)置樣式。最終的結(jié)果和 xml 文件內(nèi)容如下：

側(cè)滑頭部

<?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>

菜單項(xiàng)修改

與頭部一樣，首先找到 app:menu 屬性指定的菜單文件 activity_main_drawer.xml。該文件的內(nèi)容如下：

<?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。這兩部分的區(qū)別在于：

• 菜單項(xiàng)點(diǎn)擊后背景顏色會(huì)發(fā)生變化，再次打開(kāi)菜單時(shí)
  • group 下的菜單項(xiàng)的顏色仍然保持選中的狀態(tài)，并且字體顏色也有變化
  • item 下菜單項(xiàng)的背景顏色會(huì)恢復(fù)點(diǎn)擊前的顏色，并且字體顏色不會(huì)發(fā)生變化
• android:title 屬性
  • item 有該屬性且必須設(shè)置，設(shè)置后會(huì)在界面上顯示屬性的值
  • group 沒(méi)有該屬性

推酷應(yīng)用的表現(xiàn)與上述的文件有所不同，不同之處在于，分隔線下的菜單項(xiàng)是沒(méi)有標(biāo)題的。因?yàn)?，?biāo)題對(duì)于 item 來(lái)說(shuō)，是必須的屬性，因此，我們可以知道，下面的菜單不是使用 item 進(jìn)行組織。menu 的直接子元素只能是 group 或 item，所以下載的菜單項(xiàng)肯定是包含在 group 中的。

修改完標(biāo)簽，接下來(lái)修改菜單項(xiàng)的圖標(biāo)、文字和文字顏色。修改后的效果和文件如下：

側(cè)滑下部

<?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>

修改時(shí)的注意事項(xiàng)：

1. 兩個(gè) group 元素都必須設(shè)置 id 屬性，要不然分隔線出不來(lái)
2. 上面的 group 元素需要設(shè)置 android:checkableBehavior="single" 這個(gè)屬性，要不然點(diǎn)擊菜單項(xiàng)后（這是側(cè)滑菜單收起了）再次打開(kāi)菜單時(shí)，原來(lái)的選中狀態(tài)會(huì)丟失

主頁(yè)面

主頁(yè)面的結(jié)構(gòu)大家應(yīng)該都很熟悉吧，騰訊新聞、網(wǎng)易新聞、新聞資訊這些軟件都有著同樣的結(jié)構(gòu)，而且推酷的主頁(yè)面還比它們少了底部導(dǎo)航，更加簡(jiǎn)單了。這種結(jié)構(gòu)最典型的實(shí)現(xiàn)就是：Toolbar + ViewPager。

去掉 FAB（FloatingActionBar）

就是去掉那個(gè)紅色的浮動(dòng)按鈕。這個(gè)超級(jí)簡(jiǎn)單，在整個(gè)工程中搜索 FloatingActionBar，就可以找到相應(yīng)的布局文件和 Java 文件的相關(guān)引用，刪除就行了。

修改 Toolbar

修改背景色

系統(tǒng)為我們生成的 Toolbar 顏色是藍(lán)色，這是和當(dāng)前的主題相關(guān)。同時(shí)，系統(tǒng)在 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 對(duì)應(yīng) ActionBar 的顏色。
• colorPrimaryDark 對(duì)應(yīng)狀態(tài)欄的顏色
• colorAccent 對(duì)應(yīng) EditText 編輯時(shí)、RadioButton 選中、CheckBox 等選中時(shí)的顏色。

根據(jù)上面的解析可知：要改變 Toolbar 的背景顏色，只需要修改 colorPrimary 的值就可以了。

去掉 5.0 及以上版本的陰影

現(xiàn)在的菜單在 5.0 以下的版本上是沒(méi)有任何問(wèn)題的，但在 5.0 及以上的版本中有一點(diǎn)點(diǎn)小瑕疵：Toolbar 的下邊緣有陰影效果。有人說(shuō)這不算瑕疵，這是官方的亮點(diǎn)效果。但是，每種效果都需要放在合適的環(huán)境才能發(fā)揮它最大的效果，放在不合適的環(huán)境就是敗筆了。

好了，閑話少說(shuō)，直接上解決辦法：在 xml 中，在 AppBarLayout 組件上，設(shè)置屬性：app:elevation="0dp" 即可。

修改彈出菜單

• 彈出菜單的內(nèi)容不對(duì)，先改之。打開(kāi) res -> menu -> main.xml 文件，修改即可，完成后的效果和文件內(nèi)容如下：

彈出菜單

<?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>

• 在測(cè)試的過(guò)程中，發(fā)現(xiàn)一個(gè)小問(wèn)題：點(diǎn)擊手機(jī)上的 Menu 鍵，黑色主題的菜單從底部升起，菜單內(nèi)容與 Toolbar 上菜單顯示的內(nèi)容一樣。修改辦法：攔截系統(tǒng) Menu 按鍵動(dòng)作。代碼如下：

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_MENU) {
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

添加搜索圖標(biāo)

從反編譯的包中找到搜索圖標(biāo)：abc_ic_search_api_mtrl_alpha.png。添加的方式是在 res -> menu -> main.xml 添加 item 字段，要注意的是這個(gè)屬性： app:showAsAction="ifRoom"，代碼如下：

<item
        android:id="@+id/action_search"
        android:orderInCategory="7"
        android:title=""
        android:icon="@mipmap/white_search"
        app:showAsAction="ifRoom"/>

注意：title 屬性是必須的。設(shè)置了 title 屬性的問(wèn)題是：長(zhǎng)按搜索按鈕后，會(huì)彈出一個(gè)黑色的提示框?？赡芸丶旧砭褪沁@樣的，因?yàn)橥瓶峥蛻舳艘灿型瑯拥膯?wèn)題。

效果

首頁(yè)的界面終于修改完了，讓我們來(lái)看下效果吧：

首頁(yè)效果

側(cè)滑菜單效果

下期預(yù)告

整整花了兩篇文章才把頁(yè)面整清楚，至于與標(biāo)題相關(guān)的技術(shù)一個(gè)都沒(méi)有提到?？隙ㄓ腥藭?huì)說(shuō)：標(biāo)題黨來(lái)了，大家快跑。大家不要心急，其實(shí)，界面也很重要哦。雖然現(xiàn)在沒(méi)有做功能，但至少它可以讓我們看起來(lái)很爽。

Warning ：一大波干貨正在接近……