UI——Material Design设计之滑动菜单详解

滑动菜单

          滑动菜单是Material Design 中最常见的效果之一。

       所谓的滑动菜单就是将一些菜单选项隐藏起来，而不是放置在主屏幕上，然后可以通过滑动的方式将菜单显示出来。这种方式既节省了屏幕空间，又实现了非常好的动画效果，是Material Design中推荐的做法。

          DrawerLayout

         借助这个控件，实现滑动菜单简单又方便。首先它是一个布局，在布局中允许放入两个直接子控件，第一个子控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容。因此，我们可以对activity_main.xml中的代码做如下修改：

             

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

        可以看出，最外层使用了DrawerLayout，这个控件是由support-v4库提供的。DrawerLayout中放置了两个直接子控件，第一个子控件是FrameLayout，用于作为主屏幕中显示的内容；第二个子控件这里使用了一个TextView，用于作为滑动菜单中显示的内容，其实使用什么都可以。

       但是，关于第二个子控件有一点需要注意，layout_gravity这个属性是必须指定的，用于说明滑动控件所处位置。指定left表示在左边，right表示在右边，这里我指定了start，表示会根据系统语言进行判断，如果系统语言是从左往右的，比如英语、汉语，滑动菜单就在左边，如果系统语言是从右往左的，比如阿拉伯语，滑动菜单就在右边。

       现在，就可以运行程序了！！！

        上图，因为只有在屏幕的左侧边缘进行拖动时才能将菜单拖出来，但是很多用户根本就不知道？

        Material Design 建议的做法是在Toolbar的最左边加入一个导航按钮，点击按钮也会将滑动菜单的内容展示出来。防止一些用户不知道屏幕左侧边缘是可以拖动的。

        下面开始实现这个功能，修改MainActivity中的代码，如下所示：    

public class MainActivity extends AppCompatActivity{ private DrawerLayout mDrawerLayout; @Override protected void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar=(Toolbar)findViewById(R.id.toolbar); setSupportActionBar(toolbar); mDrawerLayout=(DrawerLayout)findViewById(R.id.drawer_layout); //获取ActionBar ActionBar actionBar=getSupportActionBar(); if(actionBar != null){

//显示导航按钮 actionBar.setDisplayHomeAsUpEnabled(true); //设置图片 actionBar.setHomeAsUpIndicator(R.drawable.ic_menu); } } 。 。 。 @Override public boolean onOptionsItemSelected( MenuItem item ){ switch(item.getItemId()){

//HomeAsUp按钮id永远是android.R.id.home case android.R.id.home: //显示滑动菜单 mDrawerLayout.openDrawer(GravityCompat.START); break; ... default: } return true; } }  

制作滑动菜单：

         NavigationView

       是Design Support 库中提供的一个控件，它不仅是严格按照Material Design的要求进行设计的，而且还可以将

滑动菜单页面的实现变得非常简单。下面我们来学习：

        首先，要将Design Support库引入到项目中才行。打开app/build.gradle文件，在dependencies闭包中添加如下

内容：

dependencies{
     compile fileTree(dir: 'libs', include:['*.jar'])
     compile 'com.android.support:appcompat-v7:24.2.1'
     testCompile 'junit:junit:4.12'
     compile 'com.android.support:design:24.2.1'
     compile 'de.hdodenhof:circleimageview:2.1.0'
 }