Android 滑動導覽功能表的快速構建(二) Material Design

標籤：

原創文章，轉載請註明 ( 來自：http://blog.csdn.net/leejizhou/article/details/52046748 李濟洲的部落格 )

上一篇 http://blog.csdn.net/leejizhou/article/details/52013343 介紹了幾個滑動導覽功能表效果的快速構建，這篇文章來總結“當下”如何按照Android的設計標準去設計滑動導覽功能表，我為什麼說的“當下”呢？因為這個設計標準是會變的。

在material design之前，官方對滑動導覽功能表的設計標準是這樣的。

*圖片來自http://www.androiduipatterns.com/2014/10/navigation-drawer-where-does-it-belong.html

滑動導覽功能表需要在Actionbar（Toolbar）下面，這在Android 4.X時代是比較常見的設計，也是當時的Android Design標準設計。

隨著時間的推移，到了android 5.0時代，google帶來了material design，新的設計風格變化比較大， 當然滑動導覽功能表的設計標準也跟著改變了，下面是最新官方的滑動導覽功能表設計文檔。

在新的標準化設計當中，滑動導覽功能表一躍來到了所有介面的頂端，這跟之前的設計是截然不同的。

新的滑動導覽功能表結構介紹完，再看一下官方設計標準的排版樣式

圖片看著可能有些小，官網地址：https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-specs

當你看到這個精確到像素級的設計標準的時候，相信你也要氣的關網頁了吧，還好Android給我提供了一個叫NavigationView這個版面配置容器，我們可以很快的實現標準設計的滑動導覽功能表欄，這也是NavigationView的最主要的用途，當出現新技術的時候，我們不僅僅需要會使用，還要去瞭解為什麼使用它。

當然NavigationView如何使用已經遍地都是了，為了文章的完整性我還是放一些主要的實現代碼吧。

NavigationView是和DrawLayout配合使用的，把上一章介紹的DrawLayout使用樣本中的菜單布局換成NavigationView就OK了。

下面是實現步驟

1 因為NavigationView在Design庫中，需要添加依賴

 compile ‘com.android.support:design:24.0.0‘

2 在DrawLayout中添加NavigationView

Layout

<android.support.v4.widget.DrawerLayout    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="match_parent"    android:id="@+id/drawerlayout"    android:fitsSystemWindows="true"    >        <LinearLayout            android:id="@+id/ll_main"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:orientation="vertical">            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                android:background="@color/colorPrimary"                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>        </LinearLayout>    <android.support.design.widget.NavigationView        android:id="@+id/navigationView"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/nv_header"        app:menu="@menu/main_drawer"/></android.support.v4.widget.DrawerLayout>

因為屬於DrawLayout的導覽功能表布局，所以NavigationView要加上android:layout_gravity=”start”代表從左面滑動，反之是“end”。
其中的app:headerLayout=”@layout/nv_header” 需要傳入一個導覽功能表的頭部布局，它的作用綠框部分。

layout/nv_header.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="180dp"    android:background="@drawable/background_material"    android:orientation="vertical"    android:gravity="bottom"    android:padding="16dp"    >    <LinearLayout        android:layout_width="match_parent"        android:layout_marginTop="8dp"        android:layout_height="0dp"        android:layout_weight="1"        android:gravity="center_vertical"        >    <ImageView        android:id="@+id/profile_image"        android:layout_width="76dp"        android:layout_height="76dp"        android:background="@drawable/z"       />    </LinearLayout>    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="lijizhou"        android:textSize="14sp"        android:textColor="#FFF"        android:textStyle="bold"        android:paddingBottom="4dp"      />    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="http://www.lijizhou.com"        android:textSize="14sp"        android:textColor="#fff"      /></LinearLayout>

app:menu=”@menu/main_drawer”用於設定導覽功能表中的菜單部分，綠框中。

menu/main_drawer.xml

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group>        <item android:id="@+id/navigation_item1"            android:checkable="true"            android:title="XXXX"            android:icon="@mipmap/ic_launcher"/>        <item android:id="@+id/navigation_item2"            android:checkable="true"            android:title="XXXX"            android:icon="@mipmap/ic_launcher"/>        <item android:id="@+id/navigation_item3"            android:checkable="true"            android:title="XXXX"            android:icon="@mipmap/ic_launcher"/>        <item android:id="@+id/navigation_item4"            android:checkable="true"            android:title="XXXX"            android:icon="@mipmap/ic_launcher"/>        <item android:id="@+id/navigation_sub"        android:title="其他">        <menu>            <item android:id="@+id/navigation_sub_item1"                android:checkable="true"                android:title="xxxx"                android:icon="@mipmap/ic_launcher"/>            <item android:id="@+id/navigation_sub_item2"                android:checkable="true"                android:title="xxxx"                android:icon="@mipmap/ic_launcher"/>            <item android:id="@+id/navigation_sub_item3"                android:checkable="true"                android:title="xxxx"                android:icon="@mipmap/ic_launcher"/>        </menu>    </item>    </group></menu>

3 最後是java中代碼實現

/** * Created by www.lijizhou.com on 2016/7/23. * NavigationView Sample */public class NavigationViewActivity extends AppCompatActivity {    private DrawerLayout drawerLayout;    private Toolbar toolbar;    private NavigationView navigationView;    @Override    protected void onCreate(@Nullable Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_navigationview);        if(Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {            //透明狀態列            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);        }        setSupportActionBar(toolbar=(Toolbar)findViewById(R.id.toolbar));        drawerLayout=(DrawerLayout)findViewById(R.id.drawerlayout);        navigationView = (NavigationView) findViewById(R.id.navigationView);        ActionBarDrawerToggle actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open,R.string.close);        actionBarDrawerToggle.syncState();        drawerLayout.addDrawerListener(actionBarDrawerToggle);        // navigationView menu點擊監聽        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(MenuItem menuItem) {                selectDrawerItem(menuItem);                return true;            }        });    }    public void  selectDrawerItem(MenuItem menuItem){        switch (menuItem.getItemId()) {            // ...           default:               Toast.makeText(NavigationViewActivity.this,"menu click",Toast.LENGTH_SHORT).show();               break;        }        menuItem.setChecked(true);        drawerLayout.closeDrawers();    }}

其中下面代碼和布局代碼中的android:fitsSystemWindows=”true”起到一個半透明狀態列的作用，半透明狀態列（非叫沉浸）效果有各種實現方式，google也沒能給一個好的實現方式，後續可能會考慮寫一個全面的瞭解透明狀態效果的文章，這裡就不多做介紹了。

if(Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {            //透明狀態列                   getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);        }

OK 這一篇介紹了google最新的滑動導覽功能表設計標準，也歡迎大家在下方留言和點左上方的關注，謝謝。

原始碼：https://github.com/lijizhou/SlidingLayoutSample

Android 滑動導覽功能表的快速構建(二) Material Design