Android Material Design 學習（二）

Material Design 學習（二）——Toolbar+DrawerLayout+NavigationView 實現側滑

• 基本效果

  
  
• ##### 佈局

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main2_drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.alex.administrator.medicalcase.activities.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 注意toolbar的主題 -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/main2_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorToolbar"
            android:theme="@style/Theme.ToolBar.MedicalCase"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        </android.support.v7.widget.Toolbar>

        <include
            android:id="@+id/main2_bottom_bar"
            layout="@layout/main_bottom_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="2dp" />

        <android.support.v4.view.ViewPager
            android:id="@+id/main2_content_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/main2_bottom_bar"
            android:layout_below="@id/main2_toolbar"></android.support.v4.view.ViewPager>
    </RelativeLayout>

    <!-- app:menu 設置底部菜單佈局 頭部佈局在代碼中實現，以便響應相關的事件-->
    <android.support.design.widget.NavigationView
        android:id="@+id/main2_nv"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:fitsSystemWindows="true"
        app:menu="@menu/main_drawer_menu">
    </android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

• toolbar的初始化

/**
* 初始化標題欄
*/
private void initToolbar(){
    mToolbar= (Toolbar)findViewById(R.id.main2_toolbar);
    //設置toolbar 爲標題欄
    setSupportActionBar(mToolbar);
    mDrawer= (DrawerLayout)findViewById(R.id.main2_drawer_layout);
    //關聯側滑佈局與toolbar上按鈕
    mDrawerToggle=new ActionBarDrawerToggle(this,mDrawer,mToolbar,
            R.string.drawer_open,R.string.drawer_close);
    mDrawerToggle.syncState();
    mDrawer.addDrawerListener(mDrawerToggle);

    //側滑開關與返回按鈕
    getSupportActionBar().setDisplayShowTitleEnabled(false);
    mToolbar.setTitle("醫案通");
    mToolbar.setTitleTextColor(Color.parseColor("#ffffff"));
}

• Toolbar菜單佈局文件

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_search"
        android:icon="@mipmap/ic_search"
        android:title="搜索"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_notification"
        android:icon="@mipmap/ic_notifications"
        android:title="通知"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="設置"
        app:showAsAction="never"/>
    <item
        android:id="@+id/action_about"
        android:orderInCategory="101"
        android:title="關於"
        app:showAsAction="never"/>
</menu>

• 側滑菜單佈局文件

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/menu_favorite"
        android:icon="@mipmap/ic_favorite"
        android:title="收藏"/>
    <item
        android:id="@+id/menu_history"
        android:icon="@mipmap/ic_history"
        android:title="我的動態"/>
    <item
        android:id="@+id/menu_setting"
        android:icon="@mipmap/ic_setting"
        android:title="設置"/>

</menu>

• 加載側滑菜單以及相關點擊事件

@Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_toolbar_menu,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch(item.getItemId()){
            /**
             * 標題欄菜單
             */
            case R.id.action_search://搜索
                break;
            case R.id.action_notification://通知
                break;
            case R.id.action_about://關於
                break;
            case R.id.action_settings://設置
                break;
        }
        return super.onOptionsItemSelected(item);
    }

• 側滑菜單初始化及相關點擊事件

private void initNavigationView(){
        mNavigationView= (NavigationView) findViewById(R.id.main2_nv);
        mHeaderView=mNavigationView.inflateHeaderView(R.layout.nv_header_layout);
        //頭像ImageView的實例
        mHeaderProfileIv= (CircleImageView) mHeaderView.findViewById(R.id.header_profile_img_iv);
        /**
         * 設置側滑菜單點擊事件
         */
        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch(item.getItemId()){
                    //收藏
                    case R.id.menu_favorite:
                        break;
                    //我的動態
                    case R.id.menu_history:
                        toast("我的動態");
                        break;
                    //設置
                    case R.id.menu_setting:
                        break;
                }
                return false;
            }
        });
    }