使用ToolBar,DrawerLayout,NavigationView實現(xiàn)側(cè)滑欄

image

image

如果不能使用DrawerLayout請在Projec Structure里面添加依賴項：

image

image

官方推薦把DrawerLayout放在根布局，避免覆蓋點擊事件?？匆钥吹絤ain_activity.xml由兩部分組成，main_layout，NavigationView.其中NavigationView的layout_gravity=“start”,表示在屏幕左側(cè)。

app:headerLayout表示側(cè)滑欄的頭部部分，我放的是一個headlayout,里面是一張圖片。

app:menu表示側(cè)滑欄里面的菜單項，我放的是left_menu.

image

由Toobar【作為工具欄】，F(xiàn)rameLayout【當選擇側(cè)滑欄的按鈕時，替換FrameLayout里面的Fragment】組成。

headlayout.xml: 里面放了一張圖片作為側(cè)滑欄，頂部的圖片

image

left_menu.xml Navigation里面用 app:menu="left_menu"來引用: 這個是菜單項

image

接下來是java代碼：

main_activity.java:

package com.example.copylooklook;

import android.content.res.Configuration;

import android.support.annotation.NonNull;

import android.support.design.widget.NavigationView;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.Toolbar;

import android.util.Log;

import android.view.MenuItem;

import android.view.View;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    private Toolbar mToolbar;

    private ActionBarDrawerToggle mDrawerToggle;

    private NavigationView mNavigationView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mToolbar = findViewById(R.id.toolbar);  //main_layout里面的toolbar

        setSupportActionBar(mToolbar);        //將toolbar設置到工具欄

        mNavigationView = findViewById(R.id.nav_view);

        mDrawerLayout = findViewById(R.id.drawer_layout);  //將toolbar與Drawerlayout綁定，實現(xiàn)點擊toolbar圖標打開它

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar,R.string.ic_open,R.string.ic_close){

            @Override //可參考官方教程 ：

https://developer.android.com/training/implementing-navigation/nav-drawer.html?hl=zh-cn

            public void onDrawerClosed(View drawerView) {

                super.onDrawerClosed(drawerView);

                Log.d("mainactivity", "onDrawerClosed: ");

            }

            @Override

            public void onDrawerOpened(View drawerView) {

                super.onDrawerOpened(drawerView);

                Log.d("Mainactivity", "onDrawerOpened: ");

            }

        };

        mDrawerLayout.setDrawerListener(mDrawerToggle);  //===這里真正進行將DrawerLayout與ToolBar綁定

        mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

            @Override    //NavigationView的點擊偵聽，這里監(jiān)聽了菜單的點擊

            public boolean onNavigationItemSelected(@NonNull MenuItem item) {

                updateItemCheckedView();

                switch (item.getItemId()){

                    case R.id.zhihu:

                        Toast.makeText(MainActivity.this,"點擊了知乎",Toast.LENGTH_SHORT).show();

                        item.setChecked(true);

                        break;

                    case R.id.wangyii:

                        Toast.makeText(MainActivity.this,"點擊了網(wǎng)易",Toast.LENGTH_SHORT).show();

                        item.setChecked(true);

                        break;

                    case R.id.meiri:

                        Toast.makeText(MainActivity.this,"點擊了每日",Toast.LENGTH_SHORT).show();

                        item.setChecked(true);

                        break;

                }

                return true;

            }

        });

    }

    @Override

    protected void onPostCreate(Bundle savedInstanceState) {

        super.onPostCreate(savedInstanceState);

        // Sync the toggle state after onRestoreInstanceState has occurred.

        mDrawerToggle.syncState();

    }

    @Override

    public void onConfigurationChanged(Configuration newConfig) {

        super.onConfigurationChanged(newConfig);

        mDrawerToggle.onConfigurationChanged(newConfig);

    }

    public boolean onOptionsItemSelected(MenuItem item) {

        // Pass the event to ActionBarDrawerToggle, if it returns

        // true, then it has handled the app icon touch event

        if (mDrawerToggle.onOptionsItemSelected(item)) {

            return true;

        }

        // Handle your other action bar items...

        return super.onOptionsItemSelected(item);

    }

    private void updateItemCheckedView(){  //當點擊側(cè)滑欄選項時，將其余

          for(int i = 0; i < 3; i ++){    // 選項設置成未選中

              mNavigationView.getMenu().getItem(i).setChecked(false);

          }

    }

}

此時，雖然有側(cè)滑欄，但是側(cè)滑欄的高度不是撐滿屏幕的：

因此還要更改主題風格：

image