DrawerLayout(抽屉式布局):
在Android support.v4 中有一个抽屉视图控件DrawerLayout。使用这个控件,可以生成通过在屏幕上水平滑动打开或者关闭菜单,能给用户一个不错的体验效果。
DrawerLayout配合v7包下的Toolbar和design库的NavigationView 可以快速实现一个高大上侧滑菜单,如图:
1.在build.gradle/dependencies下添加依赖
compile 'com.android.support:appcompat-v7:25.0.1'
compile 'com.android.support:design:25.0.1'
compile 'com.android.support:support-v4:25.0.1'
2.布局中引入DrawerLayout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.lm.demo.toolbar_demo.Main2Activity">
<android.support.v4.widget.DrawerLayout
android:id="@+id/id_main_DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="主页"
android:textColor="@color/colorAccent"
android:textSize="32sp" />
</FrameLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:text="侧滑菜单"
android:textColor="@color/colorAccent"
android:textSize="32sp" />
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
DrawerLayout直接继承于ViewGroup类,所以这个类也是一个容器类,它内部需要放两个任意View:
DrawerLayout的第一个子元素是主要内容,即抽屉没有打开时显示的布局。这里采用了一个FrameLayout。
DrawerLayout的第二个子元素是抽屉中的内容,即抽屉布局,值得需要注意的是android:layout_gravity="start"
,android:layout_gravity属性是必须要指定的,因为我们要告诉DrawerLayout,滑动菜单是在屏幕左边还是右边,设置为start或者left,是在屏幕左边,相反属性就是右边。
现在我们不需要添加任何的java代码,就可以实现了侧滑的功能。
3.为了让滑动菜单显得高大上,我们配合Toolbar和NavigationView使用
A.先是NavigationView:
将DrawerLayout的第二个子元素换成NavigationView
<android.support.v4.widget.DrawerLayout
android:id="@+id/id_main_DrawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="主页"
android:textColor="@color/colorAccent"
android:textSize="32sp" />
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="@+id/id_main_NavigationView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/navigationview_menu"
app:headerLayout="@layout/nav_header"
/>
</android.support.v4.widget.DrawerLayout>
在NavigationView中有两个属性app:menu
和 app:headerLayout
,作用如下图所示
@menu/navigationview_menu
是引用menu文件夹中的navigationview_menu.xml
步奏:首先在res目录下new->Directory,创建一个menu文件夹,然后再该文件夹中new->Menu resource file,创建一个xml文件,写入几个item
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/id_menu_SHOEYE"
android:icon="@mipmap/start_time"
android:title="首页" />
<item
android:id="@+id/id_menu_SOUSUO"
android:icon="@mipmap/start_time"
android:title="搜索" />
<item
android:id="@+id/id_menu_SHUOSHUO"
android:icon="@mipmap/start_time"
android:title="说说" />
<item
android:id="@+id/id_menu_WODE"
android:icon="@mipmap/start_time"
android:title="我的" />
</group>
</menu>
android:checkableBehavior指定为single,表示所有菜单只能单选
@layout/nav_header
就直接上代码了
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimaryDark"
android:padding="15dp"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="昵称:XXX"
android:textSize="16sp"
android:layout_marginTop="5dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="个人简介:*******"
android:textSize="16sp"
android:layout_marginTop="5dp"/>
</LinearLayout>
这样我们就完成了上图的内容
B.接下来是Toolbar,不懂的就看上一章Material Design系列–Toolbar详细
1). 首先我们先隐藏掉原有的ActionBar
2).布局引入,为了复用,新建一个toolbar_item布局(其实还有添加依赖的,但是我们建项目的时候,自动添加了)
3).主布局引入<include layout="@layout/toolbar_item"></include>
(这里需要注意的是,侧滑时若不想遮住Toolbar,就在引用DrawerLayout的前面引入,要是想遮住,就在DrawerLayout第一个子元素内引入)
5.Activity
package com.lm.demo.toolbar_demo;
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;
import android.widget.TextView;
public class Main2Activity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
private Toolbar mToolbar;
private DrawerLayout mDrawerLayout;
private NavigationView mNavigationView;
private TextView mTextView;
//监听器,或者说是将Toolbar跟DrawerLayout绑定的工具,V7包下的,V4也可以
private ActionBarDrawerToggle mActionBarDrawerToggle;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
initView();
}
private void initView() {
mTextView= (TextView) findViewById(R.id.id_main_textView);
mDrawerLayout= (DrawerLayout) findViewById(R.id.id_main_DrawerLayout);
mToolbar= (Toolbar) findViewById(R.id.id_Item_toolbar);
//设置标题栏
setSupportActionBar(mToolbar);
ActionBar actionBar=getSupportActionBar();
if (actionBar!=null){
actionBar.setTitle("标题");
//让导航图标显示出来
actionBar.setDisplayHomeAsUpEnabled(true);
}
//mDrawerLayout,mToolbar绑定,参数4,5是对打开和关闭的描述
mActionBarDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,mToolbar,
R.string.open_drawer,R.string.close_drawer);
//初始化状态
mActionBarDrawerToggle.syncState();
//设置抽屉监听
mDrawerLayout.setDrawerListener(mActionBarDrawerToggle);
mNavigationView= (NavigationView) findViewById(R.id.id_main_NavigationView);
//设置默认选中
mNavigationView.setCheckedItem(R.id.id_menu_SHOEYE);
//设置每项的监听
mNavigationView.setNavigationItemSelectedListener(this);
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
mTextView.setText(item.getTitle());
mDrawerLayout.closeDrawers();
return true;
}
}
如果有误,欢迎指正!