drawerLayout是谷歌官方提供的Support Library包中实现了侧滑菜单效果的控件,具体效果如下图

具体的实现
1.drawerLayout其实是一个布局控件,跟LinearLayout等控件是一种东西,但是drawerLayout带有滑动的功能。只要按照drawerLayout的规定布局方式写完布局,就能有侧滑的效果,所以一般把drawerLayout作为最外层的布局。
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/id_drawer_layout"
tools:context=".MainActivity">
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/bg999"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="@+id/id_nv_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="left"
android:fitsSystemWindows="true"
app:headerLayout="@layout/header_just_username"
app:menu="@menu/menu_drawer"
/>
</android.support.v4.widget.DrawerLayout>
为了方便直接套在了上一节由CoordinatorLayout布局包裹的AppBarLayout,CollapsingToolbarLayout做的可折叠的toolbar外面,CoordinatorLayout标签的内容可以随便替换成你想要的主页面布局,侧滑页面的布局主要是由下面的NavigationView决定的。其中侧滑菜单的具体样式又是由引用的子布局决定的:
app:headerLayout="@layout/header_just_username" app:menu="@menu/menu_drawer"
其中headerLayout顾名思义是头布局,而 app:menu则是子菜单,这里顺便给出头布局和子菜单的布局:
头布局header_just_username:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="192dp"
android:background="?attr/colorPrimaryDark"
android:orientation="vertical"
android:padding="16dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<TextView
android:id="@+id/id_link"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="16dp"
android:text="http://ytuio21.github.io"/>
<TextView
android:id="@+id/id_username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/id_link"
android:text="Ytuio21"/>
<ImageView
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_above="@id/id_username"
android:layout_marginBottom="16dp"
android:src="@mipmap/ic_launcher"/>
</RelativeLayout>
子菜单menu_drawer:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_dashboard"
android:title="Home"/>
<item
android:id="@+id/nav_messages"
android:icon="@drawable/ic_class"
android:title="Messages"/>
<item
android:id="@+id/nav_friends"
android:icon="@drawable/ic_card"
android:title="Friends"/>
<item
android:id="@+id/nav_discussion"
android:icon="@drawable/ic_des"
android:title="Discussion"/>
</group>
<item android:title="Sub items">
<menu>
<item
android:icon="@drawable/ic_dashboard"
android:title="Sub item 1"/>
<item
android:icon="@drawable/ic_des"
android:title="Sub item 2"/>
</menu>
</item>
</menu>
好了,看完布局我们再来看一下代码方面的:
在代码里面我自己定义一个名字叫setupDrawerContent方法来设置侧边栏的点击事件,传入的参数是侧边栏的NavigationView
private void setupDrawerContent(NavigationView navigationView)
{
navigationView.setNavigationItemSelectedListener(
new NavigationView.OnNavigationItemSelectedListener()
{
@Override
public boolean onNavigationItemSelected(MenuItem menuItem)
{
//点击响应的事件写在这里
mDrawerLayout.closeDrawers();//这个方法用来关闭侧边栏
return true;
}
});
}
如果你把toolbar设置为Actionbar:
setSupportActionBar(toolbar);
则可以通过给左上角图标设置一个返回图标:
getSupportActionBar().setDisplayHomeAsUpEnabled(true); getSupportActionBar().setHomeAsUpIndicator(R.drawable.ic)
对应ActionBar.DISPLAY_HOME_AS_UP,对应id是android.R.id.home
还可以在onOptionsItemSelected方法里设置左上角图标的点击事件,这里设置的是打开侧滑菜单:
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if(id == android.R.id.home)
{
mDrawerLayout.openDrawer(GravityCompat.START);//打开侧滑菜单
return true ;
}
return super.onOptionsItemSelected(item);
}
网友评论