zoukankan      html  css  js  c++  java

  • SlidingMenu 侧滑菜单的用法

    很多APP都有侧滑菜单的功能，部分APP左右都是侧滑菜单~SlidingMenu 这个开源项目可以很好帮助我们实现侧滑功能，将侧滑菜单引入项目的方式很多中，先通过例子介绍各种引入方式，然后给大家展示个实例：主布局 ViewPager，左右各一个侧滑菜单的用法，差不多已经能满足大部分应用的需求了。关于常用属性，在文章末尾介绍。

    1、在Activity中通过SlidingMenu构造方法，直接设置侧滑菜单
    [java] view plain copy 在CODE上查看代码片派生到我的代码片
    1. package com.zhy.zhy_slidemenu_demo;  
    2.   
    3. import android.app.Activity;  
    4. import android.os.Bundle;  
    5.   
    6. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
    7.   
    8. public class MainActivity extends Activity  
    9. {  
    10.   
    11.     @Override  
    12.     protected void onCreate(Bundle savedInstanceState)  
    13.     {  
    14.         super.onCreate(savedInstanceState);  
    15.         setContentView(R.layout.activity_main);  
    16.   
    17.         // configure the SlidingMenu  
    18.         SlidingMenu menu = new SlidingMenu(this);  
    19.         menu.setMode(SlidingMenu.LEFT);  
    20.         // 设置触摸屏幕的模式  
    21.         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);  
    22.         menu.setShadowWidthRes(R.dimen.shadow_width);  
    23.         menu.setShadowDrawable(R.drawable.shadow);  
    24.   
    25.         // 设置滑动菜单视图的宽度  
    26.         menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);  
    27.         // 设置渐入渐出效果的值  
    28.         menu.setFadeDegree(0.35f);  
    29.         /** 
    30.          * SLIDING_WINDOW will include the Title/ActionBar in the content 
    31.          * section of the SlidingMenu, while SLIDING_CONTENT does not. 
    32.          */  
    33.         menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);  
    34.         //为侧滑菜单设置布局  
    35.         menu.setMenu(R.layout.leftmenu);  
    36.   
    37.     }  
    38.   
    39. }  


    效果图：


    是不是特别简单~几行代码搞定~哈~

    2、通过把Activity继承SlidingActivity 

    a、继承SlidingActivity

    b、然后在onCreate中setBehindContentView(R.layout.leftmenu); 设置侧滑菜单的布局

    c、通过getSlidingMenu()得到SlidingMenu对象，然后设置样式

    [java] view plain copy 在CODE上查看代码片派生到我的代码片
    1. package com.zhy.zhy_slidemenu_demo02;  
    2.   
    3. import android.os.Bundle;  
    4.   
    5. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
    6. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingActivity;  
    7.   
    8. public class MainActivity extends SlidingActivity  
    9. {  
    10.     @Override  
    11.     public void onCreate(Bundle savedInstanceState)  
    12.     {  
    13.         super.onCreate(savedInstanceState);  
    14.         setContentView(R.layout.activity_main);  
    15.   
    16.         setBehindContentView(R.layout.leftmenu);  
    17.         // configure the SlidingMenu  
    18.         SlidingMenu menu = getSlidingMenu();  
    19.         menu.setMode(SlidingMenu.LEFT);  
    20.         // 设置触摸屏幕的模式  
    21.         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);  
    22.         menu.setShadowWidthRes(R.dimen.shadow_width);  
    23.         menu.setShadowDrawable(R.drawable.shadow);  
    24.   
    25.         // 设置滑动菜单视图的宽度  
    26.         menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);  
    27.         // 设置渐入渐出效果的值  
    28.         menu.setFadeDegree(0.35f);  
    29.         /** 
    30.          * SLIDING_WINDOW will include the Title/ActionBar in the content 
    31.          * section of the SlidingMenu, while SLIDING_CONTENT does not. 
    32.          */  
    33.         // menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);  
    34.         // menu.setMenu(R.layout.leftmenu);  
    35.   
    36.     }  
    37.   
    38. }  


    效果图和第一种方式一样~是不是也很简单~~

    3、将SlidingMenu当作普通控件

    可以把SlidingMenu作为普通的view，然后在布局中声明，丧心病狂的玩~下面看个例子：

    [html] view plain copy 在CODE上查看代码片派生到我的代码片
    1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    2.     xmlns:tools="http://schemas.android.com/tools"  
    3.     android:id="@+id/id_main_ly"  
    4.     android:layout_width="match_parent"  
    5.     android:layout_height="match_parent" >  
    6.   
    7.     <LinearLayout  
    8.         android:layout_width="wrap_content"  
    9.         android:layout_height="wrap_content"  
    10.         android:layout_marginLeft="30dp"  
    11.         android:layout_marginTop="30dp" >  
    12.   
    13.   
    14.         <com.jeremyfeinstein.slidingmenu.lib.SlidingMenu  
    15.             xmlns:sliding="http://schemas.android.com/apk/res-auto"  
    16.             android:id="@+id/slidingmenulayout"  
    17.             android:layout_width="120dp"  
    18.             android:layout_height="170dp"  
    19.             android:background="#ffffffff"  
    20.             sliding:behindOffset="0dp"  
    21.             sliding:behindScrollScale="1"  
    22.             sliding:fadeDegree="0.3"  
    23.             sliding:fadeEnabled="true"  
    24.             sliding:touchModeAbove="fullscreen"  
    25.             sliding:viewAbove="@layout/pic" />  
    26.     </LinearLayout>  
    27.   
    28. </RelativeLayout>  


    我们SlidingMenu作为普通View在布局文件中设置了布局，并且设置了viewAbove的值为另一个布局。

    下面看pic布局：

    [html] view plain copy 在CODE上查看代码片派生到我的代码片
    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <ImageView xmlns:android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="120dp"  
    4.     android:layout_height="170dp"  
    5.     android:src="@drawable/zhy" />  


    就是一张妹子图片。

    最后看主Activity:

    [java] view plain copy 在CODE上查看代码片派生到我的代码片
    1. package com.zhy.zhy_slidemenu_demo03;  
    2.   
    3. import android.app.Activity;  
    4. import android.os.Bundle;  
    5. import android.view.View;  
    6. import android.view.View.OnClickListener;  
    7.   
    8. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
    9.   
    10. public class MainActivity extends Activity  
    11. {  
    12.     private SlidingMenu mLeftMenu;  
    13.   
    14.     @Override  
    15.     protected void onCreate(Bundle savedInstanceState)  
    16.     {  
    17.         super.onCreate(savedInstanceState);  
    18.         setContentView(R.layout.activity_main);  
    19.   
    20.         mLeftMenu = (SlidingMenu) findViewById(R.id.slidingmenulayout);  
    21.         // configure the SlidingMenu  
    22.         // SlidingMenu menu = new SlidingMenu(this);  
    23.         mLeftMenu.setMode(SlidingMenu.LEFT);  
    24.         // 设置触摸屏幕的模式  
    25.         mLeftMenu.setShadowWidthRes(R.dimen.shadow_width);  
    26.         mLeftMenu.setShadowDrawable(R.drawable.shadow);  
    27.   
    28.         mLeftMenu.setMenu(R.layout.leftmenu);  
    29.   
    30.         mLeftMenu.setOnClickListener(new OnClickListener()  
    31.         {  
    32.             @Override  
    33.             public void onClick(View v)  
    34.             {  
    35.                 if (mLeftMenu.isMenuShowing())  
    36.                     mLeftMenu.toggle();  
    37.             }  
    38.         });  
    39.         // 设置滑动菜单视图的宽度  
    40.         // 设置渐入渐出效果的值  
    41.         /** 
    42.          * SLIDING_WINDOW will include the Title/ActionBar in the content 
    43.          * section of the SlidingMenu, while SLIDING_CONTENT does not. 
    44.          */  
    45.   
    46.     }  
    47.   
    48. }  


    效果图：


    通过SlidingMenu给图片设置一个滑动展示介绍，你也可以滑动显示任何东西，下载、分享按钮什么的。图片很多的时候不知道效率咋样，可以这么玩，但是不建议哈~


    4、SlidingMenu设置左右侧滑菜单例子

    上面介绍的3个方法，SlidingMenu的布局中控件的事件都需要写在Activity中，这样代码比较臃肿，一般会使用Fragment作为侧滑菜单的布局容器。

    核心代码：

    [java] view plain copy 在CODE上查看代码片派生到我的代码片
    1. Fragment leftMenuFragment = new MenuLeftFragment();  
    2.         setBehindContentView(R.layout.left_menu_frame);  
    3.         getSupportFragmentManager().beginTransaction()  
    4.                 .replace(R.id.id_left_menu_frame, leftMenuFragment).commit();  
    5.         SlidingMenu menu = getSlidingMenu();  
    6.         menu.setMode(SlidingMenu.LEFT_RIGHT);  
    7.         // 设置触摸屏幕的模式  
    8.         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);  


    先给侧滑菜单通过 setBehindContentView(R.layout.left_menu_frame); 设置一个布局，此布局中只有一个FrameLayout，然后使用FragmentManager将Fragment替换掉此Fragment，这样这个 Fragment就作为我们侧滑菜单的布局了，我们的事件处理代码也可以写在Fragement中，而不是Activity中。

    下面看具体例子：

    首先分别是左右两边的两个Fragment:

    MenuLeftFragment

    [java] view plain copy 在CODE上查看代码片派生到我的代码片
    1. package com.zhy.zhy_slidemenu_demo04;  
    2.   
    3. import java.util.Arrays;  
    4. import java.util.List;  
    5.   
    6. import android.os.Bundle;  
    7. import android.support.v4.app.Fragment;  
    8. import android.view.LayoutInflater;  
    9. import android.view.View;  
    10. import android.view.ViewGroup;  
    11. import android.widget.ArrayAdapter;  
    12. import android.widget.ListAdapter;  
    13. import android.widget.ListView;  
    14.   
    15. public class MenuLeftFragment extends Fragment  
    16. {  
    17.     private View mView;  
    18.     private ListView mCategories;  
    19.     private List<String> mDatas = Arrays  
    20.             .asList("聊天", "发现", "通讯录", "朋友圈", "订阅号");  
    21.     private ListAdapter mAdapter;  
    22.   
    23.     @Override  
    24.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
    25.             Bundle savedInstanceState)  
    26.     {  
    27.         if (mView == null)  
    28.         {  
    29.             initView(inflater, container);  
    30.         }  
    31.         return mView;  
    32.     }  
    33.   
    34.     private void initView(LayoutInflater inflater, ViewGroup container)  
    35.     {  
    36.         mView = inflater.inflate(R.layout.left_menu, container, false);  
    37.         mCategories = (ListView) mView  
    38.                 .findViewById(R.id.id_listview_categories);  
    39.         mAdapter = new ArrayAdapter<String>(getActivity(),  
    40.                 android.R.layout.simple_list_item_1, mDatas);  
    41.         mCategories.setAdapter(mAdapter);  
    42.     }  
    43. }  


    左边的侧滑布局就是一个ListView，代码比较简单~

    MenuRightFragment

    [java] view plain copy 在CODE上查看代码片派生到我的代码片
    1. package com.zhy.zhy_slidemenu_demo04;  
    2.   
    3. import android.os.Bundle;  
    4. import android.support.v4.app.Fragment;  
    5. import android.view.LayoutInflater;  
    6. import android.view.View;  
    7. import android.view.ViewGroup;  
    8.   
    9. public class MenuRightFragment extends Fragment  
    10. {  
    11.     private View mView;  
    12.   
    13.     @Override  
    14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
    15.             Bundle savedInstanceState)  
    16.     {  
    17.         if(mView == null)  
    18.         {  
    19.             mView = inflater.inflate(R.layout.right_menu, container, false);  
    20.         }  
    21.         return mView ;  
    22.     }  
    23. }  

    右边的侧滑菜单的Fragment，加载了一个布局，没有做任何事件处理~

    最后是MainActivity

    [java] view plain copy 在CODE上查看代码片派生到我的代码片
    1. package com.zhy.zhy_slidemenu_demo04;  
    2.   
    3. import java.util.ArrayList;  
    4. import java.util.List;  
    5.   
    6. import android.os.Bundle;  
    7. import android.support.v4.app.Fragment;  
    8. import android.support.v4.app.FragmentPagerAdapter;  
    9. import android.support.v4.view.ViewPager;  
    10. import android.view.View;  
    11. import android.view.Window;  
    12.   
    13. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
    14. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;  
    15.   
    16. public class MainActivity extends SlidingFragmentActivity  
    17. {  
    18.   
    19.     private ViewPager mViewPager;  
    20.     private FragmentPagerAdapter mAdapter;  
    21.     private List<Fragment> mFragments = new ArrayList<Fragment>();  
    22.   
    23.     @Override  
    24.     public void onCreate(Bundle savedInstanceState)  
    25.     {  
    26.         super.onCreate(savedInstanceState);  
    27.         this.requestWindowFeature(Window.FEATURE_NO_TITLE);  
    28.         setContentView(R.layout.activity_main);  
    29.         // 初始化SlideMenu  
    30.         initRightMenu();  
    31.         // 初始化ViewPager  
    32.         initViewPager();  
    33.   
    34.     }  
    35.   
    36.     private void initViewPager()  
    37.     {  
    38.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
    39.         MainTab01 tab01 = new MainTab01();  
    40.         MainTab02 tab02 = new MainTab02();  
    41.         MainTab03 tab03 = new MainTab03();  
    42.         mFragments.add(tab01);  
    43.         mFragments.add(tab02);  
    44.         mFragments.add(tab03);  
    45.         /** 
    46.          * 初始化Adapter 
    47.          */  
    48.         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())  
    49.         {  
    50.             @Override  
    51.             public int getCount()  
    52.             {  
    53.                 return mFragments.size();  
    54.             }  
    55.   
    56.             @Override  
    57.             public Fragment getItem(int arg0)  
    58.             {  
    59.                 return mFragments.get(arg0);  
    60.             }  
    61.         };  
    62.         mViewPager.setAdapter(mAdapter);  
    63.     }  
    64.   
    65.     private void initRightMenu()  
    66.     {  
    67.           
    68.         Fragment leftMenuFragment = new MenuLeftFragment();  
    69.         setBehindContentView(R.layout.left_menu_frame);  
    70.         getSupportFragmentManager().beginTransaction()  
    71.                 .replace(R.id.id_left_menu_frame, leftMenuFragment).commit();  
    72.         SlidingMenu menu = getSlidingMenu();  
    73.         menu.setMode(SlidingMenu.LEFT_RIGHT);  
    74.         // 设置触摸屏幕的模式  
    75.         menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);  
    76.         menu.setShadowWidthRes(R.dimen.shadow_width);  
    77.         menu.setShadowDrawable(R.drawable.shadow);  
    78.         // 设置滑动菜单视图的宽度  
    79.         menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);  
    80.         // 设置渐入渐出效果的值  
    81.         menu.setFadeDegree(0.35f);  
    82.         // menu.setBehindScrollScale(1.0f);  
    83.         menu.setSecondaryShadowDrawable(R.drawable.shadow);  
    84.         //设置右边（二级）侧滑菜单  
    85.         menu.setSecondaryMenu(R.layout.right_menu_frame);  
    86.         Fragment rightMenuFragment = new MenuRightFragment();  
    87.         getSupportFragmentManager().beginTransaction()  
    88.                 .replace(R.id.id_right_menu_frame, rightMenuFragment).commit();  
    89.     }  
    90.   
    91.     public void showLeftMenu(View view)  
    92.     {  
    93.         getSlidingMenu().showMenu();  
    94.     }  
    95.   
    96.     public void showRightMenu(View view)  
    97.     {  
    98.         getSlidingMenu().showSecondaryMenu();  
    99.     }  
    100. }  


    简单说明一下，MainActivity继承的是SlidingFragmentActivity ，在Activity中FragmentPagerAdapter和viewPager作为主布局，然后分别初始化SlidingMenu的两边的菜单。

    效果图：


    哈哈，微信又躺枪了~~这个例子应该可以满足一般APP的需求了。

    5、SlidingMenu的一些常用属性

    //设置侧滑菜单的位置，可选值LEFT , RIGHT , LEFT_RIGHT （两边都有菜单时设置）

    menu.setMode(SlidingMenu.LEFT_RIGHT);

    // 设置触摸屏幕的模式，可选只MARGIN , CONTENT 
    menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

    //根据dimension资源文件的ID来设置阴影的宽度
    menu.setShadowWidthRes(R.dimen.shadow_width);

    //根据资源文件ID来设置滑动菜单的阴影效果
    menu.setShadowDrawable(R.drawable.shadow);

    // 这两个都是设置滑动菜单视图的宽度，二选一
    //设置SlidingMenu离屏幕的偏移量
    menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
    //设置宽度
    menu.setBehindWidth()

    // 设置渐入渐出效果的值
    menu.setFadeDegree(0.35f);

    //设置SlidingMenu与下方视图的移动的速度比，当为1时同时移动，取值0-1
    menu.setBehindScrollScale(1.0f);

    //设置二级菜单的阴影效果
    menu.setSecondaryShadowDrawable(R.drawable.shadow);

    //设置右边（二级）侧滑菜单
    menu.setSecondaryMenu(R.layout.right_menu_frame);

    //为侧滑菜单设置布局
    menu.setMenu(R.layout.leftmenu);

    //把滑动菜单添加进所有的Activity中，可选值SLIDING_CONTENT ， SLIDING_WINDOW
    menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

    还有几个监听事件：

    [java] view plain copy 在CODE上查看代码片派生到我的代码片
      1. /** 
      2.      * 设置打开监听事件，当滑动菜单被打开时调用 
      3.      */  
      4.     public void setOnOpenListener(OnOpenListener listener) {  
      5.         mOpenListener = listener;  
      6.     }  
      7.   
      8.     /** 
      9.      * 设置关闭监听事件，当滑动菜单被关闭时调用 
      10.      */  
      11.     public void setOnCloseListener(OnCloseListener listener) {  
      12.         //mViewAbove.setOnCloseListener(listener);  
      13.         mCloseListener = listener;  
      14.     }  
      15.   
      16.     /** 
      17.      * 设置打开监听事件，当滑动菜单被打开过之后调用 
      18.      */  
      19.     public void setOnOpenedListener(OnOpenedListener listener) {  
      20.         mViewAbove.setOnOpenedListener(listener);  
      21.     }  
      22.   
      23.     /** 
      24.      * 设置关闭监听事件，当滑动菜单被关闭过之后调用 
      25.      */  
      26.     public void setOnClosedListener(OnClosedListener listener) {  
      27.         mViewAbove.setOnClosedListener(listener);  
      28.     } 
    1. 转载自：http://blog.csdn.net/lmj623565791/article/details/36677279
  • 相关阅读:
    POJ 1328 Radar Installation
    POJ 1700 Crossing River
    POJ 1700 Crossing River
    poj 3253 Fence Repair （贪心，优先队列）
    poj 3253 Fence Repair （贪心，优先队列）
    poj 3069 Saruman's Army（贪心）
    poj 3069 Saruman's Army（贪心）
    Redis 笔记与总结2 String 类型和 Hash 类型
    数据分析方法有哪些_数据分析方法
    数据分析方法有哪些_数据分析方法
  • 原文地址：https://www.cnblogs.com/zhou2016/p/5578008.html
Copyright © 2011-2022 走看看