drawerlayout是一种可以隐藏的导航栏,非常适合屏幕控件有限的移动设备使用,具体效果如下图。
drawerlayout可以设置在屏幕的左侧或者右侧,通过在屏幕左侧向右滑动来打开,或是在右侧向左滑动打开
使用了drawerlayout的xml布局文件如下
<android.support.v4.widget.DrawerLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/drawer_layout"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<FrameLayout
android:id="@+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#fff"/>
</android.support.v4.widget.DrawerLayout>
其中需要注意的是,DrawerLayout中要包含一个主内容(此处为FrameLayout)用来作为填充的内容,以及一个ListView作为导航栏。
特别要注意的是,由于DrawerLayout是从前往后叠起来的结构,所以ListView必须放在最后,否则在你点击导航栏时,会点到后面的FrameLayout中的内容
ListView中需要设定属性来确定其为导航栏
android:layout_gravity="start"
其中start设定导航栏在左侧,end则为右侧
然后我们在使用这个布局的activity中进行进一步的设置,在oncreate方法中加入下列内容
ListView listView=(ListView)findViewById(R.id.left_drawer);
String[] mMenuTitles=getResources().getStringArray(R.array.teacher_drawer_list);
try {
ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(this, R.layout.drawer_list,mMenuTitles);
listView.setAdapter(arrayAdapter);
}catch (Exception e){
e.printStackTrace(System.out);
}
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
selectItem(position);
}
});
为左侧的菜单栏填充内容,并设定监听
其中菜单栏的内容在strings.xml中设定如下
<string-array name="teacher_drawer_list">
<item>学生列表</item>
<item>作业列表</item>
<item>练习列表</item>
<item>考试列表</item>
<item>作业分数</item>
</string-array>
随后定义几个Fragment作为activity的内容填充,并在在导航栏变化时进行切换
增加私有成员变量
private StudentListFragment studentListFragment;
private ExamListFragment examListFragment;
private HomeworkListFragment homeworkListFragment;
private ExerciseListFragment exerciseListFragment;
private AssignmentScoreFragment assignmentScoreFragment;
增加selectItem函数
private void selectItem(int position){
FragmentManager manager=getSupportFragmentManager();
FragmentTransaction transaction=manager.beginTransaction();
switch (position){
case 0:
if(studentListFragment==null){
studentListFragment=new StudentListFragment();
}
transaction.replace(R.id.frame,studentListFragment);
transaction.commit();
break;
case 1:
if(homeworkListFragment==null){
homeworkListFragment=new HomeworkListFragment();
}
transaction.replace(R.id.frame,homeworkListFragment);
transaction.commit();
break;
case 2:
if(exerciseListFragment==null){
exerciseListFragment=new ExerciseListFragment();
}
transaction.replace(R.id.frame,exerciseListFragment);
transaction.commit();
break;
case 3:
if(examListFragment==null){
examListFragment=new ExamListFragment();
}
transaction.replace(R.id.frame,examListFragment);
transaction.commit();
break;
case 4:
if(assignmentScoreFragment==null){
assignmentScoreFragment=new AssignmentScoreFragment();
}
transaction.replace(R.id.frame,assignmentScoreFragment);
transaction.commit();
break;
}
}
随后drawerlayout就能基本使用了。
但是此时,并不会默认选中其中一项,并打开对应的fragment,因此在oncreate的最后增加如下代码
listView.setItemChecked(1,true);
FragmentManager manager=getSupportFragmentManager();
FragmentTransaction transaction=manager.beginTransaction();
if(homeworkListFragment==null){
homeworkListFragment=new HomeworkListFragment();
}
transaction.replace(R.id.frame,homeworkListFragment);
transaction.commit();
然后就能自动选中作业列表并打开了
但是此时,每次需要滑动仍有些不便,我们需要增加toolbar帮助我们打开导航栏
点击左上角按钮可以打开导航栏,再次点击就会关闭
要做到这点,首先我们需要修改AndroidManifest.xml,将appication中的theme设为
将默认的ActionBar去掉,然后定义自己toolbar,新建toolbar.xml文件,内容如下android:theme="@style/Theme.AppCompat.Light.NoActionBar"
单独定义toolbar的目的是重用,然后我们就可以在我们需要的activity的布局文件中加入该toolbar了<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/my_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:elevation="4dp" android:theme="@style/ThemeOverlay.AppCompat.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
对于之前定义了drawerlayout的布局文件,我们先将其中的内容用一个linearlayout包裹起来,其第一个子项设置为第二个子项为之前的drawerlayout<include layout="@layout/toolbar"></include>
然后我们再修改activity的oncreate方法,增加以下代码,然后就完成了我们的全部工作了Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar); myToolbar.setNavigationIcon(R.drawable.ic_drawer); setSupportActionBar(myToolbar); getSupportActionBar().setDisplayHomeAsUpEnabled(true); DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); ActionBarDrawerToggle mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, myToolbar, R.string.drawer_open, R.string.drawer_close); mDrawerToggle.syncState(); mDrawerLayout.setDrawerListener(mDrawerToggle);
最后附上符合标准的打开toolbar的图标