【Android UI设计与开发】第17期：滑动菜单栏（二）开源项目SlidingMenu的示例

  通过上一篇文章的讲解，相信大家对于开源项目SlidingMenu都有了一个比较初步的了解（不了解的可以参考上

一篇文章），那么从这一章开始，博主将会以SlidingMenu为重心，给大家带来非常丰富的示例演示，让大家对

SlidingMenu有一个更加深入的了解以及如何去实现一些比较炫的滑动效果。

              这篇文章会给大家带来7个不同效果的示例，每个示例都包含了最基本的使用方法，从易到难，循序渐进。能够

让初学者可以快速的掌握SlidingMenu的使用方法。下一篇文章会给大家带来三种不同的动画效果来实现滑动菜单栏

的滑动。

         关于这些示例，都是SlidingMenu开源项目中自带的一些示例，但是对于初学者来说，要想运行这些示例查看效

果，就必须要导入很多的库，使用起来也是非常的麻烦。博主这里为了能够方便大家更好的学习，就把每个示例都单

独拿了出来，并且添加了一些非常详细的注释，让初学者能够一看就懂，那么博主的目的就达到了。

         好的，话不多说，希望大家能够继续支持！

 

一、示例效果图

 

        先上效果图是博主一贯的作风，这样做可以让大家对于效果的实现有一个大概的了解，可以从中得到自己想要去

实现的效果。

 

1、示例一效果图

 

该示例主要是演示通过改变不同的值来改变滑动菜单不同的效果，可以设置的值有：

<1> 设置滑动菜单显示的位置（左边、右边或者左右两边都有）；

<2> 设置触摸屏幕的模式（全屏触摸打开滑动菜单、边缘触摸打开滑动菜单或者触摸不能打开滑动菜单）；

<3> 设置滑动菜单滑动时缩放的效果以及关闭此效果（值越大效果越明显）；

<4> 设置滑动菜单滑动时的阴影效果以及关闭此效果（值越大效果越明显）；

<5> 设置滑动菜单滑动时渐入渐出的效果（值越大效果越明显）。

                             效果图一                                                                                                      效果图二

                                  

 

2、示例二效果图

 

该示例主要就是教大家实现一个简单的放置在左边滑动菜单栏的效果。

                                    效果图一

 

3、示例三效果图

 

该示例实现了在左右两边存放两个视图，并且都可以通滑动屏幕来打开。

                

 

4、示例四效果图

 

该示例主要演示了通过Fragment来改变主视图的界面内容。

                

 

5、示例五效果图

 

      该示例也是通过Fragment来改变主视图的界面内容，但不同的是列表中存放的是图片，并且点击列表图片之后会

经过压缩显示出来。                                      

                        

 

                                                                        

 

6、示例六效果图

 

在该示例中使用ViewPager这个类，将多个Fragment存放在viewpager中，并在主界面视图内容中显示出来。

                                                           效果图 一                                                                                                                                               效果图二

             

 

7、示例七效果图

 

          该示例主要演示了当触摸屏幕滑动时，上面的标题栏TitleBar并不会跟随着一起滑动，滑动的只是中间的内容视图。（印象笔记实现了此效果）

 

二、代码讲解

 

        由于示例比较多，所以博主我就不对每个示例的代码一一进行讲解了，这里就挑一个最基础的示例给大家讲解一

下。在文章的末尾，我会把所有的示例打包供大家下载学习，里面有一些详细的注释，相信大家能一看就懂。

 

1、项目结构图

 

 

2、content_frame.xml布局

         我们先从布局文件开始讲起，这里为什么要定义一个content_frame.xml呢？主要是为了定义一个虚拟的视图，方便Fragment能够替换该视图，以达到Fragment的视图内容能够显示在屏幕上的效果。

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/content_frame"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" />  

大家可以看到这里就定义了一个FrameLayout布局，在给它附上一个id，以至于在系统中可以找到该布局对象。
       

3、menu_frame.xml布局

这个布局文件是用来存放滑动菜单打开后的视图界面的。

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@+id/menu_frame"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" />  

 

4、list.xml

这个list布局文件会在ListFragment中用到。

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <ListView xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:id="@android :id/list"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent"  
6.     android:paddingLeft="@dimen/list_padding"  
7.     android:paddingRight="@dimen/list_padding" />  

 

5、row.xml

用于存放列表中的图片和文本。

[html] view plain copy

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="50dp"  
5.     android:orientation="horizontal" >  
6.   
7.     <ImageView  
8.         android:id="@+id/row_icon"  
9.         android:layout_width="50dp"  
10.         android:layout_height="50dp"  
11.         android:padding="10dp"  
12.         android:src="@drawable/ic_launcher" />  
13.   
14.     <TextView  
15.         android:id="@+id/row_title"  
16.         android:layout_width="0dp"  
17.         android:layout_height="match_parent"  
18.         android:layout_weight="1"  
19.         android:gravity="center_vertical"  
20.         android:padding="10dp"  
21.         android:text="Medium Text"  
22.         android:textAppearance="@android :style/TextAppearance.Medium" />  
23.   
24. </LinearLayout>  

 

6、shadow.xml资源

这个资源文件是用来实现阴影效果的图形，使用了渐变的绘图效果。

[html] view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
3.   
4.     <gradient  
5.         android:endColor="#33000000"  
6.         android:centerColor="#11000000"  
7.         android:startColor="#00000000" />  
8.   
9. </shape>  

 

7、SampleListFragment类

讲完了布局文件，再让我们来看看Java文件。这个类是用来显示界面中的列表的。

[java] view plain copy

1. package com.yangyu.myslidingmenudemo02;  
2.   
3. import android.content.Context;  
4. import android.os.Bundle;  
5. import android.support.v4.app.ListFragment;  
6. import android.view.LayoutInflater;  
7. import android.view.View;  
8. import android.view.ViewGroup;  
9. import android.widget.ArrayAdapter;  
10. import android.widget.ImageView;  
11. import android.widget.TextView;  
12.   
13. /** 
14.  * @author yangyu 
15.  *  功能描述：列表Fragment，用来显示列表视图 
16.  */  
17. public class SampleListFragment extends ListFragment {  
18.   
19.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
20.         return inflater.inflate(R.layout.list, null);  
21.     }  
22.   
23.     public void onActivityCreated(Bundle savedInstanceState) {  
24.         super.onActivityCreated(savedInstanceState);  
25.         SampleAdapter adapter = new SampleAdapter(getActivity());  
26.         for (int i = 0; i < 20; i++) {  
27.             adapter.add(new SampleItem("Sample List", android.R.drawable.ic_menu_search));  
28.         }  
29.         setListAdapter(adapter);  
30.     }  
31.   
32.     private class SampleItem {  
33.         public String tag;  
34.         public int iconRes;  
35.         public SampleItem(String tag, int iconRes) {  
36.             this.tag = tag;   
37.             this.iconRes = iconRes;  
38.         }  
39.     }  
40.   
41.     public class SampleAdapter extends ArrayAdapter<SampleItem> {  
42.   
43.         public SampleAdapter(Context context) {  
44.             super(context, 0);  
45.         }  
46.   
47.         public View getView(int position, View convertView, ViewGroup parent) {  
48.             if (convertView == null) {  
49.                 convertView = LayoutInflater.from(getContext()).inflate(R.layout.row, null);  
50.             }  
51.             ImageView icon = (ImageView) convertView.findViewById(R.id.row_icon);  
52.             icon.setImageResource(getItem(position).iconRes);  
53.             TextView title = (TextView) convertView.findViewById(R.id.row_title);  
54.             title.setText(getItem(position).tag);  
55.   
56.             return convertView;  
57.         }  
58.   
59.     }  
60. }  

8、MainActivity类

这是整个程序的入口类，也是在这个类中，对SlidingMenu的属性进行设置。

[java] view plain copy

1. package com.yangyu.myslidingmenudemo02;  
2.   
3. import android.os.Bundle;  
4. import android.support.v4.app.FragmentActivity;  
5.   
6. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
7.   
8. public class MainActivity extends FragmentActivity {  
9.     private SlidingMenu menu;  
10.   
11.     @Override  
12.     protected void onCreate(Bundle savedInstanceState) {  
13.         super.onCreate(savedInstanceState);  
14.                           
15.         //设置标题  
16.         setTitle("Attach");  
17.   
18.         //初始化滑动菜单  
19.         initSlidingMenu();  
20.     }  
21.   
22.     /** 
23.      * 初始化滑动菜单 
24.      */  
25.     private void initSlidingMenu() {  
26.         // 设置主界面视图  
27.         setContentView(R.layout.content_frame);  
28.         getSupportFragmentManager().beginTransaction().replace(R.id.content_frame, new SampleListFragment()).commit();  
29.   
30.         // 设置滑动菜单的属性值  
31.         menu = new SlidingMenu(this);  
32.         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);  
33.         menu.setShadowWidthRes(R.dimen.shadow_width);  
34.         menu.setShadowDrawable(R.drawable.shadow);  
35.         menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);  
36.         menu.setFadeDegree(0.35f);  
37.         menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);  
38.         // 设置滑动菜单的视图界面  
39.         menu.setMenu(R.layout.menu_frame);    
40.         getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame, new SampleListFragment()).commit();  
41.     }  
42.       
43.     @Override  
44.     public void onBackPressed() {  
45.         //点击返回键关闭滑动菜单  
46.         if (menu.isMenuShowing()) {  
47.             menu.showContent();  
48.         } else {  
49.             super.onBackPressed();  
50.         }  
51.     }  
52.   
53. }  

         

   讲到这里差不多就要结束了，下一篇会给大家带来打开滑动菜单时实现的动画效果，希望大家能够继续关注！

 

示例源码下载地址

 

压缩包中包含所有的项目示例：

 

每个项目中包含了源码、实现的效果图以及可直接安装运行的APK：

 

特别注意：大家运行项目的时候千万别忘了导入slidingmenu_library项目，使用方法请参照上一篇文章。