Android DrawerLayout和NavigationView實作左右側滑和自定義toolbar。

首先看效果，如圖所示。

由于項目已經完成一部分了，各種效果已經夾雜在一起了，代碼就不單獨提取出來了，大緻代碼如下。

布局檔案代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            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="55dp"
                android:background="@color/white" />

            <android.support.design.widget.TabLayout
                android:id="@+id/id_tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="center"
                app:tabIndicatorColor="@color/black"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/black"
                app:tabTextAppearance="@style/TabLayout"
                app:tabTextColor="@color/gray" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewpager"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/id_tabLayout"></android.support.v4.view.ViewPager>
        </LinearLayout>

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_start"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start" />

        <android.support.design.widget.NavigationView
            android:id="@+id/navigation_end"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:layout_marginTop="55dp" />
    </android.support.v4.widget.DrawerLayout>
</RelativeLayout>
           

android:layout_gravity="start"就是左邊的，end就是右邊的。

然後在activity裡面綁定各個控件。

@Bind(R.id.navigation_start)
    NavigationView navigationStart;
    @Bind(R.id.navigation_end)
    NavigationView navigationEnd;
	@Bind(R.id.toolbar)
    Toolbar bar;
    @Bind(R.id.drawer_layout)
    DrawerLayout drawerLayout
	NavigationStartFragment startFragment;
    NavigationEndFragment endFragment;
           

然後用自定義的fragment替換掉NavigationView，用自定義的布局檔案替換掉toolbar的預設布局

getLayoutInflater().inflate(R.layout.toolbar,bar);
        start = (ImageView) findViewById(R.id.iv_start);
        end = (ImageView) findViewById(R.id.iv_end);
		setSupportActionBar(bar);
		start.setOnClickListener(onClickListener);
        end.setOnClickListener(onClickListener);
           

R.layout.toolbar就是自定義的布局檔案，左右兩個image，中間一個标題image。設定點選打開關閉側滑事件。

startFragment = new NavigationStartFragment();
        endFragment = new NavigationEndFragment();
        getSupportFragmentManager().beginTransaction().replace(R.id.navigation_start, startFragment).commit();
        getSupportFragmentManager().beginTransaction().replace(R.id.navigation_end, endFragment).commit();
        //addDrawerListener可以監聽側滑打開關閉事件
        drawerLayout.addDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View drawerView, float slideOffset) {


            }


            @Override
            public void onDrawerOpened(View drawerView) {


            }


            @Override
            public void onDrawerClosed(View drawerView) {
                
            }


            @Override
            public void onDrawerStateChanged(int newState) {


            }
        });
           

監聽到之後裡面的具體實作根據項目需求自己發揮。

//drawerLayout.isDrawerOpen可以判斷布局菜單是否打開和關閉
	private View.OnClickListener onClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            switch (view.getId()){
                case R.id.iv_start:
                    if(drawerLayout.isDrawerOpen(navigationStart)){
                        drawerLayout.closeDrawer(navigationStart);
                    }else{
                        drawerLayout.openDrawer(navigationStart);
                    }
                    break;
                case R.id.iv_end:
                    if(drawerLayout.isDrawerOpen(navigationEnd)){
                        drawerLayout.closeDrawer(navigationEnd);
                    }else{
                        drawerLayout.openDrawer(navigationEnd);
                    }
                    break;
            }
        }
    };
           

到此結束。老闆把雙休改成單休了，真是太累了，受不了。最近都懶得寫部落格。加油，堅持吧。