美文网首页
DrawerLayout实现侧滑菜单

DrawerLayout实现侧滑菜单

作者: ytuio21 | 来源:发表于2016-05-27 23:05 被阅读1292次

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);
}

相关文章

网友评论

      本文标题:DrawerLayout实现侧滑菜单

      本文链接:https://www.haomeiwen.com/subject/vvjfdttx.html