12Material Design-滑动菜单

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

用的还是上一个项目

DrawerLayout

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

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


    

        

    

    


  • 最外层使用了DrawerLayout,这个控件是v4库提供的,在这个里面放入了两个直接子控件,第一个是FrameLayout,用于主屏幕中显示的内容,第二个是TextView,用于显示滑动菜单中显示的内容

  • 注意:第二个空间中的android:layout_gravity="start"这个属性是必须指定的,因为这个是指定滑动菜单是在屏幕的左边还是右边,left是左,right是右,而设置start是系统自己判断

  • 运行程序,在屏幕的左侧边缘向右拖就可以看到了

  • 这个时候向左滑或者点击菜单以外的区域就可以让滑动菜单关闭,从而回到主页面

  1. 但是,怎么才能让用户知道有这个功能呢,这个时候就要在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的要求来进行设计的,而且还可以将滑动的菜单页面的实现变得简单

  1. 把这个引入到项目中,在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库,第二个是一个开源项目,使用它来轻松的实现图片圆型化的功能
  1. 使用NavigationView之前,还有需要提前准备连个东西,menu和headerLayout,menu是用来显示在NavigationView中的具体菜单项,而headerLayout是用来在Navigation中显示头部布局的
  2. 先准备menu,在menu文件夹-->new -->Menu resource file,创建一个nav_menu.xml文件,事先准备好照片



    
        
        
        
        
    


  • 这里使用了标签,将group属性的checkableBehavior属性设置为single,表示组中的所有菜单项只能单选
  • 这里定义了四个item,id,icon用于指定图片,title用于指定文字
  1. 准备headerLayout,这个是一个随意定制的布局,这里设置用户的头像、用户名、邮箱地址,这里也要准备照片,在layout -->new -->Layout resource file 新建一个nav_header.xml文件



    
    
    



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



    

        

    


    



  • 这里把之前的文本换成了NavigationView,滑动菜单中显示的内容也就是这个了, app:menu="@menu/nav_menu"就是自定义的menu, app:headerLayout="@layout/nav_header"也是上面自定义
  1. 布局是完成了,但是还要去处理菜单项中的点击事件,修改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-滑动菜单)