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
  • 相关阅读:
    Roles in graphs
    COMMUNITY DETECTION
    jquery官方API
    react打包后引入
    pc网站相互跳转
    动画点击事件
    导入组件
    纯css制作loading效果
    canvas时钟
    canvas实现动画 地球绕太阳公转 月球绕地球公转
  • 原文地址：https://www.cnblogs.com/zhou2016/p/5578008.html
Copyright © 2011-2022 走看看