所谓的滑动菜单就是将一些菜单选型隐藏起来,而不是放在主屏幕上,而是通过滑动的方式将菜单显示出来。
所用到的控件:DrawerLayout
DrawerLayout
一种布局,此布局中放入两个直接子控件,第一个是显示主屏幕的所显示的内容;第二个是滑动菜单中现实的内容
<?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:layout_height="match_parent"
android:layout_width="match_parent"
android:id="@+id/a4"
>
<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>
<FrameLayout
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffffff">
<TextView
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/nav_view"
/>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
由以上代码我们可以看出两个子控件都是FrameLayout
其中第二个控件中我们需要注意Android:layout_gravirty是必须要设置的,以为它决定了侧滑界面的方向。它有三个属性:
Start:根据语言自定决定
Right:右
Lift:左
给侧滑界面加一个导航键,改动MainActivity中的代码:
mDrawerLayout=(DrawerLayout)findViewById(R.id.a4);
ActionBar actionBar=getSupportActionBar();
if(actionBar!=null)
{
actionBar.setDisplayHomeAsUpEnabled(true);
}
...........
public boolean onOptionsItemSelected(MenuItem item)
{
switch (item.getItemId())//判断点击那一个菜单
{
case android.R.id.home:
mDrawerLayout.openDrawer(GravityCompat.START);
break;
.............
分析以上代码:
首先得到DrawerLayout实例,然后调用getSupportActionBar()得到ActionBar实例,
然后调用ACtionBar的setDisplayHomeAsUpEnable()方法让导航栏显示出来
接下来在onOptionsItemSelected()方法为其设置点击事件,HomeAsUp按钮的id永远都是android.R.id.home,
在调用用DrawableLayout的openDrawable()方法,这里传入一个gravirty的参数,为了保持一致,我们传入Start
NavigationView:
谷歌为我们提供了一种可以将滑动菜单页面的实现变得简单的控件——NavigationView
此控件是Design Support库中提供的,所以我们要将这个库引入到项目中
compile 'com.android.support:design:25.3.1'
compile 'de.hdodenhof:circleimageview:2.1.0'
第一个是Design Support库,
第二个是将图片圆形化的功能
除此之外
还需要准备一个菜单文件与一个头布局
新建nav_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/b1"
android:title="了解会员特权"
/>
<item
android:id="@+id/b2"
android:title="QQ钱包"
/>
<item
android:id="@+id/b3"
android:title="个性装扮"
/>
<item
android:id="@+id/b4"
android:title="我的收藏"
/>
<item
android:id="@+id/b5"
android:title="我的相册"
/>
</group>
</menu>
我们在<menu>中嵌套了一个<group>,并将group的checkableBehavior属性指定为single,表示内容只可单选
接下来看头布局,新建一个nav_header.xml,并准备一张图片作为头像
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="180dp"
android:padding="10dp"
android:background="@mipmap/bk">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/p1"
android:layout_width="70dp"
android:layout_height="70dp"
android:src="@mipmap/qwe"
android:layout_centerInParent="true"/>
<TextView
android:id="@+id/mail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="ID:1399663177"
android:background="#FFF"
android:textSize="14sp"
/>
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="辫儿哥哥"
android:layout_above="@id/mail"
android:textColor="#FFF"
android:textSize="14sp"/>
</RelativeLayout>
这里需要注意的是CircleImageView,将传入的图片圆形化,用法和ImageView相同
准备工作完成,接下来使用NavigationView,修改activity_Main.xml中代码,原理是将Dreamweaver布局的第二个子布局换为NavigationView控件
<FrameLayout
android:layout_width="250dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ffffff">
<android.support.design.widget.NavigationView
android:layout_gravity="start"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/nav_view"
app:menu="@menu/nav_menu"
app:headerLayout="@layout/nav_header"/>
</FrameLayout>
通过将app:menu与app:headerLayout设置进来
整体布局已经搭建好了,最后我们再为其添加一个简单的点击事件
在MainActivity中的onCreate()方法中添加
NavigationView navigationView=(NavigationView)findViewById(R.id.nav_view);
navigationView.setCheckedItem(R.id.b1);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
mDrawerLayout.closeDrawers();
return false;
}
});
首先获得NavigationView实例,再调用setCheckItem()方法选中菜单第一个参数,再调用监听器。。。
整体布局已经搭建好了!
为了美观,我们将以前写的登录界面也加进来 如下: