DrawerLayout的简单使用

最新推荐文章于 2018-07-29 12:20:27 发布

原创最新推荐文章于 2018-07-29 12:20:27 发布 · 405 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#android #material-design #布局 #界面

Android第一行代码专栏收录该内容

25 篇文章

订阅专栏

使用DrawerLayout的注意事项:
1，主内容View一定必须是DrawerLayout的第一个子View，并且只能是布局，如果是 Button 就会导致 Button 覆盖整个界面。
2，主视图宽度和高度需要match_parent
3，必须指定侧滑视图在左边还是右边
android:layout_gravity=”start” 在左边。
android:layout_gravity=”end” 在右边。
4，在导航View声明时：宽度用dp为单位、高度匹配父View。为了保证用户无论怎样都能看到主内容的一部分，导航抽屉的宽度不能超过320dp。

这里写图片描述
主界面

这里写图片描述
滑动左边抽屉

这里写图片描述
滑动右边抽屉

直接上代码
首先要在app/build.gradle文件dependencies闭包中添加如下内容
compile’com.android.support:design:26.+’
compile ‘de.hdodenhof:circleimageview:2.1.0’
Syles.xml 的AppTheme的parent设置为Theme.AppCompat.Light.NoActionBar

acticity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical">

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawer_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="start">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="@color/colorPrimary"
                    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

            </FrameLayout>

            <android.support.design.widget.NavigationView
                android:id="@+id/nav_view_start"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="start"
                app:headerLayout="@layout/nav_header_start"
                app:menu="@menu/nav_menu_start"/>

            <android.support.design.widget.NavigationView
                android:id="@+id/nav_view_end"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="end"
                app:headerLayout="@layout/nav_header_end"
                app:menu="@menu/nav_menu_end"/>

        </android.support.v4.widget.DrawerLayout>

</LinearLayout>

Toolbar就是ActionBar的替换产品，是Material的控件。
NavigationView：就是抽屉要显示的侧滑视图。
左边NavigationView把 nav_header_start.xml 作为侧滑视图头部和 nav_menu_end.xml 作为侧滑视图菜单放置了进去。
右边NavigationView把 nav_header_end.xml 作为侧滑视图头部和 nav_menu_end.xml 作为侧滑视图菜单放置了进去。

左边侧滑视图的nav_header_start.xml：

<?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="150dp"
    android:orientation="vertical"
    android:padding="10dp"
    android:background="@color/colorPrimary">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <de.hdodenhof.circleimageview.CircleImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:src="@drawable/nav_icon"
            android:layout_gravity="left"/>

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="打扰一下"
            android:layout_gravity="center"
            android:textColor="#FFF"
            android:textSize="30sp"
            android:paddingLeft="20dp"
            />

    </LinearLayout>

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="123456@qq.com"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:layout_marginTop="10dp"/>

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tony Green"
        android:textColor="#FFF"
        android:textSize="14sp"/>

</LinearLayout>

CircleImageView：是一个开源项目，它可以用来实现图片圆形化功能。

左边侧滑视图的nav_menu_start.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:id="@+id/group1" android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/nav_call"
            android:title="Call" />

        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="Friends" />

        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="Location" />
    </group>

    <group android:id="@+id/group2" android:checkableBehavior="single">
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="Mail" />

        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="Tasks" />
    </group>

</menu>

添加Group实现分组,如果加上id就会出现组和组的分割线,
android:checkableBehavior=”single” 指定为single表示组中的所有菜单项只能单选

右边的侧滑视图的nav_header_end.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="150dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/circleImageView"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/nav_personal"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/circleImageView"
        android:paddingTop="10dp"
        android:layout_centerHorizontal="true"
        android:text="Personal"
        android:textSize="18dp"/>

</RelativeLayout>

右边侧滑视图的nav_menu_end.xml：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

   <group android:id="@+id/group1">
       <item
           android:id="@+id/myinfo"
           android:icon="@drawable/nav_myinfo"
           android:title="My Info"
           />
   </group>

</menu>

MainActivity：

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private DrawerLayout mDrawerLayout;
    private NavigationView navViewStart;
    private NavigationView navViewEnd;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //标题栏
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        //抽屉
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        //左边抽屉侧滑视图
        navViewStart = (NavigationView) findViewById(R.id.nav_view_start);
        //右边抽屉侧滑视图
        navViewEnd = (NavigationView) findViewById(R.id.nav_view_end);
        //设置ActionBar为toolbar
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if(actionBar!=null){
            //设置是否显示导航按钮
            actionBar.setDisplayHomeAsUpEnabled(true);
            //设置导航按钮的图标，默认是返回按钮
            actionBar.setHomeAsUpIndicator(R.mipmap.ic_launcher_round);
            //设置logo
            //actionBar.setLogo(R.drawable.nav_icon);
            //设置标题
            actionBar.setTitle("Title");
            //设置副标题
            actionBar.setSubtitle("SubTitle");
        }
        //左边抽屉侧滑视图菜单默认选中call
        navViewStart.setCheckedItem(R.id.nav_call); 
        //左边抽屉侧滑视图菜单选项事件
        navViewStart.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //任意点击菜单项都会退出抽屉
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
        //右边抽屉侧滑视图菜单选项事件
        navViewEnd.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                //任意点菜单选项都会退出抽屉
                mDrawerLayout.closeDrawers();
                return true;
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolobar,menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                //点击导航按钮显示左边抽屉
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.backup:
                Toast.makeText(this,"You clicked Backup",Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"You clicked Delete",Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"You clicked Settings",Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

主内容View（FrameLayout在最上层）必须是Drawerlayout的第一个子节点，因为XML在安排这些界面的时候是按照Z轴的顺序来安排的，同时抽屉必须
在主内容的顶部。主内容View被设置成匹配父View的宽和高，因为当导航抽屉隐藏的时候它要填充整个UI。（就像抽屉被拉出来的时候会遮住下面一层，而下面被遮住的一层就是DrawerLayout的主内容View，当上面抽屉隐藏的时候,下面主内容View就显示出来了）