12Material Design-滑动菜单

2018-04-05 本文已影响46人何惧l

滑动菜单是Material Design中最常见的效果之一，只要借助谷歌提供的各种工具，就可以轻松的实现这个功能

用的还是上一个项目

DrawerLayout

所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来，当然了，靠自己实现是很难的，现在借助DrawerLayout控件来实现

首先它是一个布局，在布局中允许放入两个直接子控件，第一个子控件是主屏幕上显示的内容，第二个子控件是滑动菜单中显示的内容，因此在activity.xml中就可以写成

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <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="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            />

    </FrameLayout>

    <TextView
         android:layout_gravity="start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="This is menu"
        android:textSize="30sp"
        android:background="#FFF"
        />

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

最外层使用了DrawerLayout，这个控件是v4库提供的，在这个里面放入了两个直接子控件，第一个是FrameLayout，用于主屏幕中显示的内容，第二个是TextView，用于显示滑动菜单中显示的内容
注意：第二个空间中的android:layout_gravity="start"这个属性是必须指定的，因为这个是指定滑动菜单是在屏幕的左边还是右边，left是左，right是右，而设置start是系统自己判断
运行程序，在屏幕的左侧边缘向右拖就可以看到了
这个时候向左滑或者点击菜单以外的区域就可以让滑动菜单关闭，从而回到主页面

但是，怎么才能让用户知道有这个功能呢，这个时候就要在Toolbar的最左边加入一个导航按钮，点击按钮就可以将滑动菜单的内容展示出来，这样就相当于有两种方式可以打开滑动菜单

首先准备一张导航的图标，然后修改MainActivity中的代码

package com.example.tool;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // 获取到这个实例
        drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        }

    }


    // 加载这个菜单
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return true;
    }


    // 处理各个按钮的点击事件
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            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;
            //
            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;
            default:
        }

        return true;
    }
}

这里首先获取到了DrawerLayout的实例，然后调用getSupportActionBar()方法获取到了ActionBar实例，然后调用ActionBar的setDisplayHomeAsUpEnabled()方法让导航按钮显示出来，接着调用setHomeAsUpIndicator()方法来设置一个导航的按钮图标
实际上，Toolbar最左侧的这个按钮是HomeAsUp按钮，默认是一个返回的箭头，含义是返回上一个活动，这里将默认的样式和作用进行了修改
在onOptionsItemSelected()方法中对HomeAsUp按钮的点击事件进行处理，HomeAsUp按钮的id永远都是android.R.id.home，调用 drawerLayout.openDrawer()方法将滑动菜单展示出来
注意openDrawer()方法中传入一个Gravity参数，这个就是在xml中定义的滑动菜单在屏幕的左边还是右边还是start，这里传入的是GravityCompat.START
运行程序就可以看到

显示导航按钮.png

点击按钮，这个滑动菜单就会展示出来

NavigationView

虽然实现了滑动菜单的功能，但是这个菜单有点丑，怎么才能优化呢，这个时候使用到了NavigationView，NavigationViewDesign Support库中的一个控件，不仅是严格按照Material Design的要求来进行设计的，而且还可以将滑动的菜单页面的实现变得简单

把这个引入到项目中，在app/build.gradle文件中，在

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
//
    compile 'com.android.support:design:26.1.0'
    compile 'de.hdodenhof:circleimageview:2.1.0'
}

这里添加了两个依赖关系，第一个是Design Support库，第二个是一个开源项目，使用它来轻松的实现图片圆型化的功能

使用NavigationView之前，还有需要提前准备连个东西，menu和headerLayout，menu是用来显示在NavigationView中的具体菜单项，而headerLayout是用来在Navigation中显示头部布局的
先准备menu，在menu文件夹-->new -->Menu resource file,创建一个nav_menu.xml文件，事先准备好照片

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

    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/nav_call"
            android:title="Call"
            />
        <item
            android:id="@+id/nav_firends"
            android:icon="@drawable/nav_friends"
            android:title="Firends"
            />
        <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="Tsak"
            />
    </group>
</menu>

这里使用了<group>标签,将group属性的checkableBehavior属性设置为single，表示组中的所有菜单项只能单选
这里定义了四个item，id，icon用于指定图片，title用于指定文字

准备headerLayout，这个是一个随意定制的布局，这里设置用户的头像、用户名、邮箱地址，这里也要准备照片，在layout -->new -->Layout resource file 新建一个nav_header.xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary"
    >

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/a"
        android:layout_centerInParent="true"
        />
    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:textColor="#fff"
        android:textSize="14sp"
        android:text="123456@163.com"
        />
    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/username"
        android:textColor="#fff"
        android:textSize="14sp"
        android:text="shanqiu"
        />

</RelativeLayout>

这里最外层是RelativeLayout，这里的高度设置的是180dp,背景指定为colorPrimary，就是styles.xml中注册的颜色
CircleImageView是用于将图片进行圆型化的控件，这个的使用和ImageVIew非常的相似，指定了而一个头像，并且居中显示
接下来就是两个TextView分别用于显示用户名和邮箱

menu和headerLayout都准备好了，就可以使用NavigationView了，修改activity_main.xml中的代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <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="?attr/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"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"
        />

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

这里把之前的文本换成了NavigationView，滑动菜单中显示的内容也就是这个了， app:menu="@menu/nav_menu"就是自定义的menu， app:headerLayout="@layout/nav_header"也是上面自定义

布局是完成了，但是还要去处理菜单项中的点击事件，修改MainActivity中的代码


package com.example.tool;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        
        // 获取到实例
        NavigationView navigationView = (NavigationView)findViewById(R.id.nav_view);
        
        drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        }

        // 设置默认选中状态
        navigationView.setCheckedItem(R.id.nav_call);

        // 菜单的事件监听器
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.nav_mail:
                        Toast.makeText(MainActivity.this,"你点击了邮箱",Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.nav_firends:
                    // 关闭滑动菜单
                        drawerLayout.closeDrawers();
                        break;
                    default:
                }
                return true;
            }
        });
    }
    ...
}

首先获取到了实例，调用setCheckedItem()方法将打电话设置为默认选中状态
setNavigationItemSelectedListener()方法设置菜单项选中事件的监听器，当用户点击任意菜单的时候，就会回调onNavigationItemSelected()方法中的逻辑
这里调用了DrawerLayout.closeDrawers()方法将滑动菜单关闭
运行程序，点击左侧按钮就可以了

默认状态.png
点击状态.png

12Material Design-滑动菜单

DrawerLayout

NavigationView

猜你喜欢

热点阅读