侧滑菜单是Android5.0 Material Design中最常见的效果之一,现在市场上很多的应用都有滑动菜单的功能,如qq。利用google提供的工具,我们也可以轻松实现这种效果。这种侧滑菜单将一些功能菜单隐藏起来,手指滑动时可以显示出来,点击可以跳转到相应的功能界面,这样可以有效的节省屏幕空间。
现在我们利用系统提供的DrawerLayout控件,实现侧滑菜单不仅简单,而且很方便。效果图如下:
看名字就知道,它是一个布局,在这个布局文件中可以放两个直接子控件,第一个是屏幕显示的主内容,第二个子控件是滑动时,菜单显示的内容。
布局代码如下:
activity_main.xml
上面的包含了一个Toobar控件,为了让我们的界面更好看,我就添加进去了,如果单独要实现侧滑菜单效果的话,是不用的。这里就顺便写一下吧。然后最后的NavigationView控件,是存放菜单选项布局的,当然我们也可以不用这个,自己去实现布局,因为用navigationView比较简单,布局也好看,所以就采用了。
DrawerLayout是support-v4库提供的,可以看到我们放置了两个子控件,一个是FrameLayout,用于显示主屏幕的内容(包含了Toolbar控件),另一个是菜单项的布局,这里采用的是NavigationView控件,但是其中有个点要注意的是
android:layout_gravity="start"
这个要指定,因为这个属性是为了告诉系统滑动菜单选项放置的位置。指定left是在左边,这里指定的是start,表示是指系统语言是从左往右读的话,比如:汉语,英语,那么控件就在左边,反之是在右边,比如:阿拉伯语是从右往左读的。不得不佩服google考虑的真周到。
MainActivyt.java
package com.example.administrator.myapplication;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
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=getSupportActionBar();
if (actionBar!=null){
actionBar.setDisplayHomeAsUpEnabled(true);
actionBar.setHomeAsUpIndicator(R.mipmap.ic_menu);
}
NavigationView navView= (NavigationView) findViewById(R.id.nav_view);
navView.setCheckedItem(R.id.nav_call);
navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
switch (menuItem.getItemId()){
case R.id.nav_call:
Toast.makeText(MainActivity.this,"点击的是call",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_mail:
Toast.makeText(MainActivity.this,"点击的是mail",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_friends:
Toast.makeText(MainActivity.this,"点击的是friends",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_location:
Toast.makeText(MainActivity.this,"点击的是location",Toast.LENGTH_SHORT).show();
break;
case R.id.nav_task:
Toast.makeText(MainActivity.this,"点击的是tast",Toast.LENGTH_SHORT).show();
break;
}
mDrawerLayout.closeDrawers();
return false;
}
});
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this,"clicked BackUp",Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this,"clicked delete",Toast.LENGTH_SHORT).show();
break;
case R.id.action_settings:
Toast.makeText(this,"clicked action_settings",Toast.LENGTH_SHORT).show();
break;
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
}
return true;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu_main,menu);
return true;
}
}
接下来在onOptionsItemSelected()方法中对HomeAsUp按钮的点击事件进行处理,HomeAsUp按钮的id是系统指定的,不变的,是android.R.id.home。然后调用DrawerLayout的openDrawer()方法将滑动菜单展示出来,注意openDrawer()方法需要传入一个Gravity参数,为了保证这里的行为和xml中定义的一致,我们传入的是GravityCompat.START。这样,在Toolbar的最左边就出现了一个导航按钮,这样用户看到按钮后就知道有菜单选项了,不然如果用户不滑动,还不知道有滑动菜单选项。
接下来是菜单选项方面的布局了,这里采用的是NavigationView控件,它也是Design Support库中的控件,使用它可以让菜单选项的实现变得更简单。
当然,由于是新特性,所以我们需要导入包,AS用户只需在app/build.gradle中的dependencies的闭包下添加如下几行就好了
compile 'com.android.support:design:23.1.0'
compile 'de.hdodenhof:circleimageview:2.1.0'
其中第一行是系统依赖包,第二个是看名字就知道是一个圆形的ImageView控件,使用它后,可以很方便的将图片变成圆角。
在使用Navagation的时候,我是将它设计的和QQ的类似,即上面是个头像和一些介绍,下面的是功能菜单选项。不过好像现在的滑动菜单大都是这样的。为此,需要2个布局文件,一个是头部的图片,一个下面的功能选项。
头部布局
headLayout.xml
功能菜单选项布局采用的是menu.xml的配置的方式。为此,需要在res/menu文件夹下新建一个nav_menu.xml文件。
nav_menu.xml