NavigationView＋DrawerLayout實現側拉抽屜效果

先上效果圖:

 

NavigationView是android-support-design包下的一個控件，在使用NavigationView時需要引入design的包依賴：

 

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.3.0'
    compile 'com.android.support:design:23.3.0'
    compile 'com.android.support:cardview-v7:23.3.0'
}

ativity_main.xml:

<android.support.v4.widget.drawerlayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/draw" tools:context=".MainActivity">

    <framelayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/container">

    <android.support.design.widget.navigationview android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:headerlayout="@layout/start_menu" app:menu="@menu/left_menu" android:id="@+id/navigat">
</android.support.design.widget.navigationview></framelayout></android.support.v4.widget.drawerlayout>

在抽屜裡，有兩個布局，一個是headerLayout就是這個抽屜的頭部，還有就是抽屜的menu,分別寫兩個布局文件：

 

start_menu.xml:

 

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:background="#76EEC6" android:layout_margin="5dp" android:id="@+id/head_menu" android:layout_height="200dp">

    <textview android:text="Header_Text" android:textsize="25sp" android:textcolor="#FFFFFF" android:layout_centerinparent="true" android:layout_width="wrap_content" android:layout_height="wrap_content">
</textview></relativelayout>

在menu資源文件夾下新建一個left_menu資源文件
left_menu.xml:

<?xml version="1.0" encoding="utf-8"?>  
<menu xmlns:android="http://schemas.android.com/apk/res/android">  
  
    <item  
        android:id="@+id/menu_index"  
        android:icon="@mipmap/ic_launcher"  
        android:title="我的首頁" />  
    <item  
        android:id="@+id/menu_photo"  
        android:icon="@mipmap/ic_launcher"  
        android:title="我的照片" />  
    <item  
        android:id="@+id/menu_fri"  
        android:icon="@mipmap/ic_launcher"  
        android:title="我的朋友" />  
    <item  
        android:id="@+id/menu_kong"  
        android:icon="@mipmap/ic_launcher"  
        android:title="我的空間" />  
    <item  
        android:id="@+id/menu_setting"  
        android:icon="@mipmap/ic_launcher"  
        android:title="我的設置" />  
</menu>  

布局寫完了，那就開始敲代碼：

MainActivity:

package com.zwb.nav_dra;

import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MenuItem;

import com.zwb.nav_dra.fragment.Frag_Index;
import com.zwb.nav_dra.fragment.Frag_Photo;

public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {


    private DrawerLayout draw;
    private NavigationView navi;
    private ActionBar bar;
    private ActionBarDrawerToggle toggle;
    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initView();

        toggle = new ActionBarDrawerToggle(this ,draw ,0 , 0);
        draw.setDrawerListener(toggle);
        toggle.syncState();

        bar = getSupportActionBar();
        bar.setDisplayHomeAsUpEnabled(true);
        bar.setDisplayShowHomeEnabled(true);
        bar.setHomeButtonEnabled(true);

        navi.setNavigationItemSelectedListener(this);
    }

    private void initView() {
        draw = ((DrawerLayout) findViewById(R.id.draw));
        navi = ((NavigationView) findViewById(R.id.navigat));

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        return toggle.onOptionsItemSelected(item) || super.onOptionsItemSelected(item);
    }

    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.menu_index:
                getSupportFragmentManager().beginTransaction().replace(R.id.container ,new Frag_Index()).commit();

                break;
            case R.id.menu_photo:
                getSupportFragmentManager().beginTransaction().replace(R.id.container ,new Frag_Photo()).commit();
                break;
        }
        draw.closeDrawer(GravityCompat.START);
        return true;
    }
}

在這裡點擊相對應的menu會切換不同的fragment,這裡就給出一個布局，其他的一樣:

Frag_Index.java:

 

public class Frag_Index extends Fragment{

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.frag_index ,container ,false);
        TextView textView = ((TextView) view.findViewById(R.id.tv));
        textView.setText("我的首頁");
        return view;
    }
}

布局文件:

 

frag_index.xml:

 

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="vertical">  
  
    <android.support.v7.widget.CardView  
        xmlns:card_view="http://schemas.android.com/apk/res-auto"  
        android:layout_width="match_parent"  
        android:layout_height="180dp"  
        android:layout_marginLeft="5dp"  
        android:layout_marginRight="5dp"  
        android:layout_centerInParent="true"  
        card_view:cardCornerRadius="8dp">  
  
        <TextView  
            android:id="@+id/tv"  
            android:layout_width="wrap_content"  
            android:layout_gravity="center"  
            android:textSize="18sp"  
            android:layout_height="wrap_content" />  
    </android.support.v7.widget.CardView>  
</RelativeLayout>