Android侧滑菜单

1.使用Android Support Library实现

Android目前提供了很方便的侧滑集成，效果如下图所示

具体实现如下：

如果你使用Android Studio，在你的build.gradle文件中添加

dependencies {
    ...
    compile 'com.android.support:design:22.2.0'
}

如果使用Eclipse（其实Android官方已经不推荐使用，如果要使用的话，可以参考http://developer.android.com/tools/support-library/setup.html）

配置对应xml布局如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <android.support.v4.widget.DrawerLayout
 3     android:id="@+id/drawer_layout"
 4     xmlns:android="http://schemas.android.com/apk/res/android"
 5     xmlns:app="http://schemas.android.com/apk/res-auto"
 6     xmlns:tools="http://schemas.android.com/tools"
 7     android:layout_width="match_parent"
 8     android:layout_height="match_parent"
 9     android:fitsSystemWindows="true"
10     tools:openDrawer="start">
11 
12     <!-- 这里添加你自己的ContentView -->
13 
14     <RelativeLayout
15         xmlns:android="http://schemas.android.com/apk/res/android"
16         android:layout_width="match_parent"
17         android:layout_height="match_parent">
18 
19         <LinearLayout
20             android:layout_width="match_parent"
21             android:layout_height="match_parent"
22             android:orientation="vertical"
23             android:paddingBottom="@dimen/activity_vertical_margin"
24             android:paddingLeft="@dimen/activity_horizontal_margin"
25             android:paddingRight="@dimen/activity_horizontal_margin"
26             android:paddingTop="@dimen/activity_vertical_margin">
27 
28             <TextView
29                 android:layout_width="wrap_content"
30                 android:layout_height="wrap_content"
31                 android:text="Hello World!"/>
32 
33         </LinearLayout>
34         
35     </RelativeLayout>
36 
37     <android.support.design.widget.NavigationView
38         android:id="@+id/nav_view"
39         android:layout_width="wrap_content"
40         android:layout_height="match_parent"
41         android:layout_gravity="start"
42         android:fitsSystemWindows="true"
43         app:headerLayout="@layout/nav_header_main"
44         app:menu="@menu/activity_main_drawer"/>
45 
46 </android.support.v4.widget.DrawerLayout>

主要是 DrawerLayout、NavigationView

对应的headerLayout:nav_header_main.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3               android:layout_width="match_parent"
 4               android:layout_height="@dimen/nav_header_height"
 5               android:background="@drawable/side_nav_bar"
 6               android:paddingBottom="@dimen/activity_vertical_margin"
 7               android:paddingLeft="@dimen/activity_horizontal_margin"
 8               android:paddingRight="@dimen/activity_horizontal_margin"
 9               android:paddingTop="@dimen/activity_vertical_margin"
10               android:theme="@style/ThemeOverlay.AppCompat.Dark"
11               android:orientation="vertical"
12               android:gravity="bottom">
13 
14     <ImageView
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content"
17         android:paddingTop="@dimen/nav_header_vertical_spacing"
18         android:src="@android:drawable/sym_def_app_icon"
19         android:id="@+id/imageView"/>
20 
21     <TextView
22         android:layout_width="match_parent"
23         android:layout_height="wrap_content"
24         android:paddingTop="@dimen/nav_header_vertical_spacing"
25         android:text="Android Studio"
26         android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
27 
28     <TextView
29         android:layout_width="wrap_content"
30         android:layout_height="wrap_content"
31         android:text="android.studio@android.com"
32         android:id="@+id/textView"/>
33 
34 </LinearLayout>

对应的menu:activity_main_drawer.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <menu xmlns:android="http://schemas.android.com/apk/res/android">
 3 
 4     <group android:checkableBehavior="single">
 5         <item
 6             android:id="@+id/nav_camara"
 7             android:icon="@android:drawable/ic_menu_camera"
 8             android:title="Import"/>
 9         <item
10             android:id="@+id/nav_gallery"
11             android:icon="@android:drawable/ic_menu_gallery"
12             android:title="Gallery"/>
13         <item
14             android:id="@+id/nav_slideshow"
15             android:icon="@android:drawable/ic_menu_slideshow"
16             android:title="Slideshow"/>
17         <item
18             android:id="@+id/nav_manage"
19             android:icon="@android:drawable/ic_menu_manage"
20             android:title="Tools"/>
21     </group>
22 
23     <item android:title="Communicate">
24         <menu>
25             <item
26                 android:id="@+id/nav_share"
27                 android:icon="@android:drawable/ic_menu_share"
28                 android:title="Share"/>
29             <item
30                 android:id="@+id/nav_send"
31                 android:icon="@android:drawable/ic_menu_send"
32                 android:title="Send"/>
33         </menu>
34     </item>
35 
36 </menu>

对应Activity中的代码如下：

 1 package com.creasylai.testdrawermenu;
 2 
 3 import android.os.Bundle;
 4 import android.support.design.widget.NavigationView;
 5 import android.support.v4.view.GravityCompat;
 6 import android.support.v4.widget.DrawerLayout;
 7 import android.support.v7.app.AppCompatActivity;
 8 import android.view.MenuItem;
 9 
10 public class MainActivity extends AppCompatActivity
11         implements NavigationView.OnNavigationItemSelectedListener {
12 
13     @Override
14     protected void onCreate(Bundle savedInstanceState) {
15         super.onCreate(savedInstanceState);
16         setContentView(R.layout.activity_main);
17         //需要监听菜单被选择事件
18         NavigationView navigationView = (NavigationView) findViewById(R.id.nav_view);
19         navigationView.setNavigationItemSelectedListener(this);
20     }
21 
22     /**
23      * 处理返回按钮时，首先检查并关闭侧滑
24      */
25     @Override
26     public void onBackPressed() {
27         DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
28         if (drawer.isDrawerOpen(GravityCompat.START)) {
29             drawer.closeDrawer(GravityCompat.START);
30         } else {
31             super.onBackPressed();
32         }
33     }
34 
35     @SuppressWarnings("StatementWithEmptyBody")
36     @Override
37     public boolean onNavigationItemSelected(MenuItem item) {
38         // Handle navigation view item clicks here.
39         int id = item.getItemId();
40 
41         if (id == R.id.nav_camara) {
42             // Handle the camera action
43         } else if (id == R.id.nav_gallery) {
44 
45         } else if (id == R.id.nav_slideshow) {
46 
47         } else if (id == R.id.nav_manage) {
48 
49         } else if (id == R.id.nav_share) {
50 
51         } else if (id == R.id.nav_send) {
52 
53         }
54         DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
55         drawer.closeDrawer(GravityCompat.START);
56         return true;
57     }
58 }

就这么简单，侧滑功能实现了

参考：http://android-developers.blogspot.tw/2015/05/android-design-support-library.html

2.使用开源侧滑MaterialDrawer实现

在使用上述的侧滑过程中，我发现常会出现侧滑栏滑出一部分之后无法再滑动出来的bug，所以寻找了网上的开源侧滑项目MaterialDrawer

具体的实现就不写了，直接看（https://github.com/mikepenz/MaterialDrawer）

posted on 2015-11-12 08:34 creasylai19 阅读(554) 评论(0) 编辑收藏举报

刷新页面返回顶部

creasylai19

公告