简单导航抽屉(Navigation Drawer)

时间:2021-08-25 20:05:19

    在谷歌2015I/O大会上,发布了许多新的东西。一个特别吸引我的东西便是Design Support Library。这里我将教你毫不费力地添加一个具有Material Design风格的导航抽屉,并且可以处理抽屉的单击事件和手机方向改变如何处理。下面先看一下以前的抽屉导航和现在的抽屉导航

简单导航抽屉(Navigation Drawer)

然后我们今天做的效果图如下


简单导航抽屉(Navigation Drawer)


添加Design Support Library

我们将在你的Gradle中添加一个独立的库作为开始。

compile 'com.android.support:design:22.2.0'

由于这个库是基于AppCompatsupport-v4 library的,所以我们可以完全用这个库代替他们

导航抽屉的布局

打开你的activityXML布局并且按以下结构布局


<android.support.v4.widget.DrawerLayout 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:fitsSystemWindows="true">
<!-- your content layout -->
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/drawer" />
</android.support.v4.widget.DrawerLayout>

 

基于此,我们用<includelayout="@layout/toolbar"/>再添加一个Toolbar,因为我们可以通过Toolbar的汉堡菜单来打开抽屉导航

注意这个新的NavigationView,是来自于Design Support Library。你可以给它定义头布局和菜单布局


抽屉菜单

跟其他普通的菜单一样,只不过有一点小小的变化。所有的菜单选项必须在一个组内(group,除非你想给菜单选项以组分类。它的checkableBehaviour 属性值必须为single


<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/navigation_item_1"
android:checked="true"
android:icon="@drawable/ic_action_clear"
android:title="Item One" />
<item
android:id="@+id/navigation_item_2"
android:icon="@drawable/ic_action_add"
android:title="Item Two" />
</group>
</menu>


抽屉的头布局

我们给头布局另外创建一个XML文件,其中包括一个简单的ImageViewTextView。当然你可以添加任何东西进去。


  • <FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
  •    android:layout_width="match_parent"
  •    android:layout_height="150dp"
  •    android:orientation="vertical">
  •    <ImageView
  •        android:layout_width="match_parent"
  •        android:layout_height="match_parent"
  •        android:background="@drawable/nav_header_bg"
  •        android:scaleType="centerCrop"/>
  •    <TextView
  •        style="@style/TextAppearance.AppCompat.Subhead"
  •        android:layout_width="match_parent"
  •        android:layout_height="wrap_content"
  •        android:layout_gravity="bottom"
  •        android:layout_margin="16dp"
  •        android:text="Your Name Here"
  •        android:textColor="@android:color/white"/>
  • </FrameLayout>

布局文件就到这里,开始编写代码

 

5.设置Activity

打开你的Activity.java我们需要做以下几点

1).初始化Toolbar

2).设置导航抽屉

3).处理cchchochouch抽屉的单击事件


初始化Toolbar

坦率的说,我不喜欢onCreate()杂乱无章,所以我将创建一个方法并在onCreate中调用它

  • privatevoidsetUpToolbar(){
  •        mToolbar =(Toolbar)findViewById(R.id.toolbar);
  •       if(mToolbar != null){
  •           setSupportActionBar(mToolbar);
  •       }
  •   }
设置导航抽屉

  • privatevoidsetUpNavDrawer(){
  •       if(mToolbar != null){
  •           getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  •            mToolbar.setNavigationIcon(R.drawable.ic_drawer);
  •            mToolbar.setNavigationOnClickListener(new View.OnClickListener(){
  •               @Override
  •               publicvoidonClick(View v){
  •                    mDrawerLayout.openDrawer(GravityCompat.START);
  •               }
  •           });
  •       }
  •   }

这里我们允许toolbar可以显示主返回菜单选项(就是左上角的返回),但是我们改变它的图标来响应我们自己的抽屉打开的事件。

处理抽屉的单击事件

打开关闭抽屉我们引用DrawerLayout,但是处理菜单列表选项我们用NavigationView


  • mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
  •           @Override
  •           publicbooleanonNavigationItemSelected(MenuItem menuItem){
  •                menuItem.setChecked(true);
  •               switch(menuItem.getItemId()){
  •                   case R.id.navigation_item_1:
  •                        Snackbar.make(mContentFrame,"Item One",               
  •                            Snackbar.LENGTH_SHORT).show();
  •                        mCurrentSelectedPosition =0;
  •                       return true;
  •                   case R.id.navigation_item_2:
  •                        Snackbar.make(mContentFrame,"Item Two",
  •                            Snackbar.LENGTH_SHORT).show();
  •                        mCurrentSelectedPosition =1;
  •                       return true;
  •                   default:
  •                       return true;
  •               }
  •           }
  •       })

原文地址(需要*)