一. 什么是DrawerLayout（抽屜式導(dǎo)航欄）
抽屜式導(dǎo)航欄是一個面板蚂四，它將應(yīng)用的主要導(dǎo)航選項顯示在屏幕左邊緣。大多數(shù)情況下，它處于隱藏狀態(tài)廓八，但是如果用戶從屏幕左邊緣滑動手指京景，同時在應(yīng)用頂層觸摸操作欄中的應(yīng)用圖標窿冯，它將會顯示出來
二. 說明
- DrawerLayout
DrawerLayout是容器ViewGroup，一般包含兩個子布局（要顯示在主頁面的布局和NavigationView（也可以是其他控件确徙，將該控件的layout_gravity指定為start就成了側(cè)邊欄了））醒串，其中要顯示在主頁面的布局一般include布局文件（在 DrawerLayout內(nèi)，添加一個包含屏幕主內(nèi)容（當(dāng)抽屜式導(dǎo)航欄處于隱藏狀態(tài)時為主要布局）的視圖和另一個包含抽屜式導(dǎo)航欄內(nèi)容的視圖鄙皇。）如下圖：
DrawerLayout
- NavigationView
NavigationView才是左邊的側(cè)滑導(dǎo)航欄芜赌，由header和menu兩部分組成，其中header是普通的layout伴逸，menu部分是普通的menu缠沈，如下圖：
NavigationView
- layout_gravity屬性的設(shè)置
- start：根據(jù)系統(tǒng)語言而定；從左往右的語言就在左邊错蝴，反之在右邊
- left：滑動菜單在左邊
- right：滑動菜單在右邊
- Toolbar上的觸發(fā)按鈕的實現(xiàn)
- 更改ActionBar的默認返回按鈕的功能和圖標讓其作為觸發(fā)DrawerLayout的按鈕
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBar actionBar = getSupportActionBar();//得到ActionBar
if(actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);//將返回按鈕顯示出來
actionBar.setHomeAsUpIndicator(R.drawable.ic_menu_white_24dp);//設(shè)置返回按鈕的圖標
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case android.R.id.home://HomeAsUp按鈕的id為android.R.id.home
mDrawerLayout.openDrawer(GravityCompat.START);//參數(shù)為打開DrawerLayout的方向洲愤，要和xml中的一致
break;
}
return super.onOptionsItemSelected(item);
}
- 使用ActionBarDrawerToggle作為觸發(fā)按鈕（該方法已被廢棄）
/*DrawerLayout初始化，以及設(shè)置ActionBar左上角的觸發(fā)按鈕*/
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
三. 使用步驟
- layout布局
activity_main.xml
<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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<!--主頁面布局-->
<include layout="@layout/app_bar_main"/>
<!--
抽屜顷锰，其中：
headerLayout屬性是header的布局
menu是menu布局
-->
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:menu="@menu/activity_main_drawer"/>
</android.support.v4.widget.DrawerLayout>
nav_header_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="@dimen/nav_header_height"
android:background="@drawable/side_nav_bar"
android:gravity="bottom"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
app:srcCompat="@android:drawable/sym_def_app_icon" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="@dimen/nav_header_vertical_spacing"
android:text="NickelFox"
android:textAppearance="@style/TextAppearance.AppCompat.Body1" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="hly49366499@gmail.com" />
</LinearLayout>
app_bar_main.xml（主布局）
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="cn.foxnickel.drawerlayout.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
app:srcCompat="@android:drawable/ic_dialog_email" />
</android.support.design.widget.CoordinatorLayout>
content_main.xml（主布局中的content布局）
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/content_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
tools:context="cn.foxnickel.drawerlayout.MainActivity"
tools:showIn="@layout/app_bar_main">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</RelativeLayout>
- menu布局
activity_main_drawer.xml（NavigationView中的menu布局）
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_camera"
android:icon="@drawable/ic_menu_camera"
android:title="Import" />
<item
android:id="@+id/nav_gallery"
android:icon="@drawable/ic_menu_gallery"
android:title="Gallery" />
<item
android:id="@+id/nav_slideshow"
android:icon="@drawable/ic_menu_slideshow"
android:title="Slideshow" />
<item
android:id="@+id/nav_manage"
android:icon="@drawable/ic_menu_manage"
android:title="Tools" />
</group>
<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_share"
android:icon="@drawable/ic_menu_share"
android:title="Share" />
<item
android:id="@+id/nav_send"
android:icon="@drawable/ic_menu_send"
android:title="Send" />
</menu>
</item>
</menu>
- 各種配置
MainActivity
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
/*初始化ToolBar*/
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
/*初始化FAB（主頁面中的）*/
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this,"You clicked the snackBar",Toast.LENGTH_SHORT).show();
}
}).show();
}
});
/*DrawerLayout初始化柬赐，以及設(shè)置ActionBar左上角的觸發(fā)按鈕*/
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
/*初始化NavigationView，設(shè)置item的監(jiān)聽器*/
NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this);
}
/*按下返回鍵關(guān)閉抽屜*/
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
/*NavigationView的item的點擊事件*/
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_camera) {
// Handle the camera action
Toast.makeText(this,"You clicked the camera",Toast.LENGTH_SHORT).show();
} else if (id == R.id.nav_gallery) {
} else if (id == R.id.nav_slideshow) {
} else if (id == R.id.nav_manage) {
} else if (id == R.id.nav_share) {
} else if (id == R.id.nav_send) {
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);//點擊item之后關(guān)閉Drawer
return true;
}
}
四. 總結(jié)
- DrawerLayout里面只能有兩個子View官紫，一個是實際顯示的布局肛宋，一個便是NavigationView（也可以是其他控件）
