Android SlidingMenu使用和樣本詳解_Android

來源:互聯網
上載者:User

很多APP都有側滑菜單的功能,部分APP左右都是側滑菜單~SlidingMenu 這個開源項目可以很好協助我們實現側滑功能,如果對SlidingMenu 還不是很瞭解的童鞋,可以參考下本篇部落格。將側滑菜單引入項目的方式很多中,本部落格先通過例子介紹各種引入方式,然後給大家展示個執行個體:主布局ViewPager,左右各一個側滑菜單的用法,差不多已經能滿足大部分應用的需求了。關於常用屬性,在文章末尾介紹。

1、在Activity中通過SlidingMenu構造方法,直接設定側滑菜單

package com.zhy.zhy_slidemenu_demo;  import androidappActivity; import androidosBundle;  import comjeremyfeinsteinslidingmenulibSlidingMenu;  public class MainActivity extends Activity {    @Override   protected void onCreate(Bundle savedInstanceState)   {     superonCreate(savedInstanceState);     setContentView(Rlayoutactivity_main);      // configure the SlidingMenu     SlidingMenu menu = new SlidingMenu(this);     menusetMode(SlidingMenuLEFT);     // 設定觸控螢幕幕的模式     menusetTouchModeAbove(SlidingMenuTOUCHMODE_FULLSCREEN);     menusetShadowWidthRes(Rdimenshadow_width);     menusetShadowDrawable(Rdrawableshadow);      // 設定滑動菜單視圖的寬度     menusetBehindOffsetRes(Rdimenslidingmenu_offset);     // 設定漸入漸出效果的值     menusetFadeDegree(35f);     /**      * SLIDING_WINDOW will include the Title/ActionBar in the content      * section of the SlidingMenu, while SLIDING_CONTENT does not      */     menuattachToActivity(this, SlidingMenuSLIDING_CONTENT);     //為側滑菜單設定布局     menusetMenu(Rlayoutleftmenu);    }  } 

效果圖:

是不是特別簡單~幾行代碼搞定~哈~

2、通過把Activity繼承SlidingActivity

a、繼承SlidingActivity

b、然後在onCreate中setBehindContentView(R.layout.leftmenu); 設定側滑菜單的布局

c、通過getSlidingMenu()得到SlidingMenu對象,然後設定樣式

package com.zhy.zhy_slidemenu_demo02;  import androidosBundle;  import comjeremyfeinsteinslidingmenulibSlidingMenu; import comjeremyfeinsteinslidingmenulibappSlidingActivity;  public class MainActivity extends SlidingActivity {   @Override   public void onCreate(Bundle savedInstanceState)   {     superonCreate(savedInstanceState);     setContentView(Rlayoutactivity_main);      setBehindContentView(Rlayoutleftmenu);     // configure the SlidingMenu     SlidingMenu menu = getSlidingMenu();     menusetMode(SlidingMenuLEFT);     // 設定觸控螢幕幕的模式     menusetTouchModeAbove(SlidingMenuTOUCHMODE_FULLSCREEN);     menusetShadowWidthRes(Rdimenshadow_width);     menusetShadowDrawable(Rdrawableshadow);      // 設定滑動菜單視圖的寬度     menusetBehindOffsetRes(Rdimenslidingmenu_offset);     // 設定漸入漸出效果的值     menusetFadeDegree(35f);     /**      * SLIDING_WINDOW will include the Title/ActionBar in the content      * section of the SlidingMenu, while SLIDING_CONTENT does not      */     // menuattachToActivity(this, SlidingMenuSLIDING_CONTENT);     // menusetMenu(Rlayoutleftmenu);    }  } 

效果圖和第一種方式一樣~是不是也很簡單~~

3、將SlidingMenu當作普通控制項

可以把SlidingMenu作為普通的view,然後在布局中聲明,喪心病狂的玩~下面看個例子:

<RelativeLayout xmlns:android="http://schemasandroidcom/apk/res/android"   xmlns:tools="http://schemasandroidcom/tools"   android:id="@+id/id_main_ly"   android:layout_width="match_parent"   android:layout_height="match_parent" >    <LinearLayout     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_marginLeft="30dp"     android:layout_marginTop="30dp" >       <comjeremyfeinsteinslidingmenulibSlidingMenu       xmlns:sliding="http://schemasandroidcom/apk/res-auto"       android:id="@+id/slidingmenulayout"       android:layout_width="120dp"       android:layout_height="170dp"       android:background="#ffffffff"       sliding:behindOffset="0dp"       sliding:behindScrollScale="1"       sliding:fadeDegree="3"       sliding:fadeEnabled="true"       sliding:touchModeAbove="fullscreen"       sliding:viewAbove="@layout/pic" />   </LinearLayout>  </RelativeLayout> 

我們SlidingMenu作為普通View在布局檔案中設定了布局,並且設定了viewAbove的值為另一個布局。

下面看pic布局:

<?xml version="1.0" encoding="utf-8"?> <ImageView xmlns:android="http://schemasandroidcom/apk/res/android"   android:layout_width="120dp"   android:layout_height="170dp"   android:src="@drawable/zhy" /> 

就是一張妹子圖片。

最後看主Activity:

package comzhyzhy_slidemenu_demo03;  import androidappActivity; import androidosBundle; import androidviewView; import androidviewViewOnClickListener;  import comjeremyfeinsteinslidingmenulibSlidingMenu;  public class MainActivity extends Activity {   private SlidingMenu mLeftMenu;    @Override   protected void onCreate(Bundle savedInstanceState)   {     superonCreate(savedInstanceState);     setContentView(Rlayoutactivity_main);      mLeftMenu = (SlidingMenu) findViewById(Ridslidingmenulayout);     // configure the SlidingMenu     // SlidingMenu menu = new SlidingMenu(this);     mLeftMenusetMode(SlidingMenuLEFT);     // 設定觸控螢幕幕的模式     mLeftMenusetShadowWidthRes(Rdimenshadow_width);     mLeftMenusetShadowDrawable(Rdrawableshadow);      mLeftMenusetMenu(Rlayoutleftmenu);      mLeftMenusetOnClickListener(new OnClickListener()     {       @Override       public void onClick(View v)       {         if (mLeftMenuisMenuShowing())           mLeftMenutoggle();       }     });     // 設定滑動菜單視圖的寬度     // 設定漸入漸出效果的值     /**      * SLIDING_WINDOW will include the Title/ActionBar in the content      * section of the SlidingMenu, while SLIDING_CONTENT does not      */    }  } 

效果圖:

通過SlidingMenu給圖片設定一個滑動展示介紹,你也可以滑動顯示任何東西,下載、分享按鈕什麼的。圖片很多的時候不知道效率咋樣,可以這麼玩,但是不建議哈~

4、SlidingMenu設定左右側滑菜單例子

上面介紹的3個方法,SlidingMenu的布局中控制項的事件都需要寫在Activity中,這樣代碼比較臃腫,一般會使用Fragment作為側滑菜單的版面配置容器。

核心代碼:

Fragment leftMenuFragment = new MenuLeftFragment();     setBehindContentView(Rlayoutleft_menu_frame);     getSupportFragmentManager()beginTransaction()         replace(Ridid_left_menu_frame, leftMenuFragment)commit();     SlidingMenu menu = getSlidingMenu();     menusetMode(SlidingMenuLEFT_RIGHT);     // 設定觸控螢幕幕的模式     menusetTouchModeAbove(SlidingMenuTOUCHMODE_MARGIN); 

先給側滑菜單通過 setBehindContentView(R.layout.left_menu_frame);設定一個布局,此布局中只有一個FrameLayout,然後使用FragmentManager將Fragment替換掉此Fragment,這樣這個Fragment就作為我們側滑菜單的布局了,我們的事件處理代碼也可以寫在Fragement中,而不是Activity中。

下面看具體例子:

首先分別是左右兩邊的兩個Fragment:

MenuLeftFragment

package comzhyzhy_slidemenu_demo04;  import javautilArrays; import javautilList;  import androidosBundle; import androidsupportvappFragment; import androidviewLayoutInflater; import androidviewView; import androidviewViewGroup; import androidwidgetArrayAdapter; import androidwidgetListAdapter; import androidwidgetListView;  public class MenuLeftFragment extends Fragment {   private View mView;   private ListView mCategories;   private List<String> mDatas = Arrays       asList("聊天", "發現", "通訊錄", "朋友圈", "訂閱號");   private ListAdapter mAdapter;    @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container,       Bundle savedInstanceState)   {     if (mView == null)     {       initView(inflater, container);     }     return mView;   }    private void initView(LayoutInflater inflater, ViewGroup container)   {     mView = inflaterinflate(Rlayoutleft_menu, container, false);     mCategories = (ListView) mView         findViewById(Ridid_listview_categories);     mAdapter = new ArrayAdapter<String>(getActivity(),         androidRlayoutsimple_list_item_1, mDatas);     mCategoriessetAdapter(mAdapter);   } } 

左邊的側滑布局就是一個ListView,代碼比較簡單~

MenuRightFragment

package comzhyzhy_slidemenu_demo04;  import androidosBundle; import androidsupportvappFragment; import androidviewLayoutInflater; import androidviewView; import androidviewViewGroup;  public class MenuRightFragment extends Fragment {   private View mView;    @Override   public View onCreateView(LayoutInflater inflater, ViewGroup container,       Bundle savedInstanceState)   {     if(mView == null)     {       mView = inflaterinflate(Rlayoutright_menu, container, false);     }     return mView ;   } } 

右邊的側滑菜單的Fragment,載入了一個布局,沒有做任何事件處理~

最後是MainActivity

package comzhyzhy_slidemenu_demo04;  import javautilArrayList; import javautilList;  import androidosBundle; import androidsupportvappFragment; import androidsupportvappFragmentPagerAdapter; import androidsupportvviewViewPager; import androidviewView; import androidviewWindow;  import comjeremyfeinsteinslidingmenulibSlidingMenu; import comjeremyfeinsteinslidingmenulibappSlidingFragmentActivity;  public class MainActivity extends SlidingFragmentActivity {    private ViewPager mViewPager;   private FragmentPagerAdapter mAdapter;   private List<Fragment> mFragments = new ArrayList<Fragment>();    @Override   public void onCreate(Bundle savedInstanceState)   {     superonCreate(savedInstanceState);     thisrequestWindowFeature(WindowFEATURE_NO_TITLE);     setContentView(Rlayoutactivity_main);     // 初始化SlideMenu     initRightMenu();     // 初始化ViewPager     initViewPager();    }    private void initViewPager()   {     mViewPager = (ViewPager) findViewById(Ridid_viewpager);     MainTab01 tab01 = new MainTab01();     MainTab02 tab02 = new MainTab02();     MainTab03 tab03 = new MainTab03();     mFragmentsadd(tab01);     mFragmentsadd(tab02);     mFragmentsadd(tab03);     /**      * 初始化Adapter      */     mAdapter = new FragmentPagerAdapter(getSupportFragmentManager())     {       @Override       public int getCount()       {         return mFragmentssize();       }        @Override       public Fragment getItem(int arg0)       {         return mFragmentsget(arg0);       }     };     mViewPagersetAdapter(mAdapter);   }    private void initRightMenu()   {          Fragment leftMenuFragment = new MenuLeftFragment();     setBehindContentView(Rlayoutleft_menu_frame);     getSupportFragmentManager()beginTransaction()         replace(Ridid_left_menu_frame, leftMenuFragment)commit();     SlidingMenu menu = getSlidingMenu();     menusetMode(SlidingMenuLEFT_RIGHT);     // 設定觸控螢幕幕的模式     menusetTouchModeAbove(SlidingMenuTOUCHMODE_MARGIN);     menusetShadowWidthRes(Rdimenshadow_width);     menusetShadowDrawable(Rdrawableshadow);     // 設定滑動菜單視圖的寬度     menusetBehindOffsetRes(Rdimenslidingmenu_offset);     // 設定漸入漸出效果的值     menusetFadeDegree(35f);     // menusetBehindScrollScale(0f);     menusetSecondaryShadowDrawable(Rdrawableshadow);     //設定右邊(二級)側滑菜單     menusetSecondaryMenu(Rlayoutright_menu_frame);     Fragment rightMenuFragment = new MenuRightFragment();     getSupportFragmentManager()beginTransaction()         replace(Ridid_right_menu_frame, rightMenuFragment)commit();   }    public void showLeftMenu(View view)   {     getSlidingMenu()showMenu();   }    public void showRightMenu(View view)   {     getSlidingMenu()showSecondaryMenu();   } } 

簡單說明一下,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-1menu.setBehindScrollScale(1.0f);//設定二級菜單的陰影製作效果menu.setSecondaryShadowDrawable(R.drawable.shadow);//設定右邊(二級)側滑菜單menu.setSecondaryMenu(R.layout.right_menu_frame);//為側滑菜單設定布局menu.setMenu(R.layout.leftmenu);//把滑動菜單添加進所有的Activity中,可選值SLIDING_CONTENT , SLIDING_WINDOWmenu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);

還有幾個監聽事件:

/**    * 設定開啟監聽事件,當滑動菜單被開啟時調用    */   public void setOnOpenListener(OnOpenListener listener) {     mOpenListener = listener;   }    /**    * 設定關閉監聽事件,當滑動菜單被關閉時調用    */   public void setOnCloseListener(OnCloseListener listener) {     //mViewAbovesetOnCloseListener(listener);     mCloseListener = listener;   }    /**    * 設定開啟監聽事件,當滑動菜單被開啟過之後調用    */   public void setOnOpenedListener(OnOpenedListener listener) {     mViewAbovesetOnOpenedListener(listener);   }    /**    * 設定關閉監聽事件,當滑動菜單被關閉過之後調用    */   public void setOnClosedListener(OnClosedListener listener) {     mViewAbovesetOnClosedListener(listener);   } 

還有一些用到的時候查查把~

我把上面的所有例子包括slidingmenu的lib打了一個包~:demo

以上就是本文的全部內容,希望對大家的學習有所協助,也希望大家多多支援雲棲社區。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.