DrawerLayout的简单使用

来源：互联网发布：app相册制作软件编辑：程序博客网时间：2024/05/20 06:05

使用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就显示出来了）

阅读全文

1 0