AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

slidingmenu开源效果

2014-02-19 1268
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <span style="font-size:14px">本文将更进一步, 在很多实际的应用场景中我们需要一个更复杂的场景，比如说需要在一个菜单选项中集成多个tab来集中显示信息。这个时候 Viewpager就派上用场了。<br></span> <p><span style="font-size:14px"><br></span></p> <p><span style="font-si
本文将更进一步, 在很多实际的应用场景中我们需要一个更复杂的场景，比如说需要在一个菜单选项中集成多个tab来集中显示信息。这个时候 Viewpager就派上用场了。


本例中我们将通过SlidingMenu + ViewPager+Fragment 实现带TAB的SlidingMenu。先看看具体的效果。










实现步骤跟上一篇大体相同，这里着重说需要修改的地方

首先我们需要添加一个PagerAdapter来自动适配Tab里面的Fragment ,就像ListView中的BaseAdapter差不多，只是需要实现的方法有一些区别。


[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. package com.example.slidingmenuviewpagertest.adapter;  
  2.   
  3. import java.util.List;  
  4.   
  5. import com.example.slidingmenuviewpagertest.entity.ContentBean;  
  6. import com.example.slidingmenuviewpagertest.fragment.TestContentFragment;  
  7.   
  8. import android.support.v4.app.Fragment;  
  9. import android.support.v4.app.FragmentManager;  
  10. import android.support.v4.app.FragmentPagerAdapter;  
  11.   
  12. public class ContentFragmentPagerAdapter extends FragmentPagerAdapter {  
  13.   
  14.     private List<ContentBean> list;  
  15.     public ContentFragmentPagerAdapter(FragmentManager fm) {  
  16.         super(fm);  
  17.     }  
  18.       
  19.     public ContentFragmentPagerAdapter(FragmentManager fm,List<ContentBean> list) {  
  20.         super(fm);  
  21.         this.list = list;  
  22.     }  
  23.   
  24.     @Override  
  25.     public Fragment getItem(int arg0) {  
  26.           
  27.         return TestContentFragment.newInstance(list.get(arg0).getContent());  
  28.           
  29.     }  
  30.   
  31.     @Override  
  32.     public int getCount() {  
  33.         // TODO Auto-generated method stub  
  34.         return list.size();  
  35.     }  
  36.       
  37.     @Override  
  38.     public CharSequence getPageTitle(int position) {  
  39.         // TODO Auto-generated method stub  
  40.         return list.get(position).getTitle();  
  41.     }  
  42.   
  43. }  


然后在首页Fragment 中初始化ViewPager

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. package com.example.slidingmenuviewpagertest.fragment;  
  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.view.ViewPager;  
  9. import android.view.LayoutInflater;  
  10. import android.view.View;  
  11. import android.view.ViewGroup;  
  12.   
  13. import com.example.slidingmenuviewpagertest.R;  
  14. import com.example.slidingmenuviewpagertest.adapter.ContentFragmentPagerAdapter;  
  15. import com.example.slidingmenuviewpagertest.entity.ContentBean;  
  16.   
  17. public class HomeFragment extends Fragment {  
  18.       
  19.     private ViewPager mViewPager;  
  20.     private static final String[] titles = {"One","Two","Three","Four","Five"};  
  21.     private List<ContentBean> list = new ArrayList<ContentBean>();  
  22.     private ContentFragmentPagerAdapter mAdapter;  
  23.       
  24.     public HomeFragment(){}  
  25.       
  26.     @Override  
  27.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  28.             Bundle savedInstanceState) {  
  29.    
  30.         View rootView = inflater.inflate(R.layout.fragment_home, container, false);  
  31.           
  32.         initData();  
  33.         findView(rootView);  
  34.           
  35.         return rootView;  
  36.     }  
  37.   
  38.     private void initData() {  
  39.           
  40.         for(int i=0;i<titles.length;i++){  
  41.               
  42.             ContentBean cb = new ContentBean();  
  43.             cb.setTitle(titles[i]);  
  44.             cb.setContent(titles[i]+"_"+(i+1));  
  45.               
  46.             list.add(cb);  
  47.         }  
  48.     }  
  49.   
  50.     private void findView(View rootView) {  
  51.           
  52.         mViewPager = (ViewPager) rootView.findViewById(R.id.mViewPager);  
  53.         mAdapter = new ContentFragmentPagerAdapter(getActivity().getSupportFragmentManager(),list);  
  54.         mViewPager.setAdapter(mAdapter);  
  55.     }  
  56.       
  57.     @Override  
  58.     public void onStart() {  
  59.           
  60.         if(mAdapter!=null){  
  61.             mAdapter.notifyDataSetChanged();  
  62.         }  
  63.           
  64.         super.onStart();  
  65.     }  
  66. }  


ViewPager中的Fragment

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. package com.example.slidingmenuviewpagertest.fragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.util.Log;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9. import android.widget.TextView;  
  10.   
  11. import com.example.slidingmenuviewpagertest.R;  
  12.   
  13. public class TestContentFragment extends Fragment {  
  14.     private static final String TAG = TestContentFragment.class.getSimpleName();  
  15.     private String title = "Hello";  
  16.       
  17.     public static TestContentFragment newInstance(String s) {  
  18.         TestContentFragment newFragment = new TestContentFragment();  
  19.         Bundle bundle = new Bundle();  
  20.         bundle.putString("title", s);  
  21.         newFragment.setArguments(bundle);  
  22.           
  23.         return newFragment;  
  24.   
  25.     }  
  26.       
  27.     @Override  
  28.     public void onCreate(Bundle savedInstanceState) {  
  29.           
  30.         Log.d(TAG, "TestContentFragment-----onCreate");  
  31.         Bundle args = getArguments();  
  32.         if(args!=null){  
  33.             title = args.getString("title");  
  34.         }  
  35.           
  36.         super.onCreate(savedInstanceState);  
  37.     }  
  38.       
  39.     @Override  
  40.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  41.             Bundle savedInstanceState) {  
  42.           
  43.          View rootView = inflater.inflate(R.layout.fragment_test_content, container, false);  
  44.            
  45.          findView(rootView);  
  46.            
  47.          return rootView;  
  48.     }  
  49.   
  50.     private void findView(View rootView) {  
  51.           
  52.         TextView txtLabel = (TextView) rootView.findViewById(R.id.txtLabel);  
  53.         txtLabel.setText(title);  
  54.     }  
  55. }  


TestContentFragment 布局文件 fragment_test_content.xml

[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <TextView  
  7.         android:id="@+id/txtLabel"  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:layout_centerInParent="true"  
  11.         android:text="Pages View"  
  12.         android:textSize="16dp" />  
  13.   
  14.     <ImageView  
  15.         android:layout_width="wrap_content"  
  16.         android:layout_height="wrap_content"  
  17.         android:layout_below="@id/txtLabel"  
  18.         android:layout_centerHorizontal="true"  
  19.         android:layout_marginTop="10dp"  
  20.         android:src="@drawable/ic_launcher" />  
  21.   
  22. </RelativeLayout>  



首页Fragment 布局文件 fragment_home.xml

[html] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent" >  
  5.   
  6.     <android.support.v4.view.ViewPager  
  7.         android:id="@+id/mViewPager"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content" >  
  10.           
  11.         <android.support.v4.view.PagerTabStrip      
  12.             android:id="@+id/pagertab"      
  13.             android:layout_width="wrap_content"      
  14.             android:layout_height="wrap_content"      
  15.             android:layout_gravity="top"/>      
  16.           
  17. <!--         <android.support.v4.view.PagerTitleStrip  
  18.             android:id="@+id/mPagerTitleStrip"  
  19.             android:layout_width="match_parent"  
  20.             android:layout_height="wrap_content"  
  21.             android:layout_gravity="top" /> -->  
  22.     </android.support.v4.view.ViewPager>  
  23.   
  24. </RelativeLayout>  


主Activity跟之前没有变化

[java] view plain copy 在CODE上查看代码片 派生到我的代码片
  1. package com.example.slidingmenuviewpagertest;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.os.Bundle;  
  5. import android.support.v4.app.Fragment;  
  6. import android.support.v4.app.FragmentManager;  
  7. import android.support.v4.app.FragmentTransaction;  
  8. import android.util.Log;  
  9. import android.view.Menu;  
  10. import android.view.MenuItem;  
  11. import com.example.slidingmenuviewpagertest.fragment.CommunityFragment;  
  12. import com.example.slidingmenuviewpagertest.fragment.FindPeopleFragment;  
  13. import com.example.slidingmenuviewpagertest.fragment.HomeFragment;  
  14. import com.example.slidingmenuviewpagertest.fragment.MenuFragment;  
  15. import com.example.slidingmenuviewpagertest.fragment.MenuFragment.SLMenuListOnItemClickListener;  
  16. import com.example.slidingmenuviewpagertest.fragment.PagesFragment;  
  17. import com.example.slidingmenuviewpagertest.fragment.PhotosFragment;  
  18. import com.example.slidingmenuviewpagertest.fragment.WhatsHotFragment;  
  19. import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;  
  20. import com.jeremyfeinstein.slidingmenu.lib.app.SlidingFragmentActivity;  
  21.   
  22. public class MainActivity extends SlidingFragmentActivity implements SLMenuListOnItemClickListener{  
  23.       
  24.     private SlidingMenu mSlidingMenu;  
  25.       
  26.     @SuppressLint("NewApi")  
  27.     @Override  
  28.     public void onCreate(Bundle savedInstanceState) {  
  29.         super.onCreate(savedInstanceState);  
  30.           
  31.         setTitle("Home");  
  32. //      setTitle(R.string.sliding_title);  
  33.         setContentView(R.layout.frame_content);  
  34.   
  35.         //set the Behind View  
  36.         setBehindContentView(R.layout.frame_menu);  
  37.           
  38.         // customize the SlidingMenu  
  39.         mSlidingMenu = getSlidingMenu();  
  40. //      mSlidingMenu.setSecondaryMenu(R.layout.frame_menu); 设置右侧菜单的布局文件  
  41.           
  42. //      mSlidingMenu.setShadowWidth(5);  
  43. //      mSlidingMenu.setBehindOffset(100);  
  44.         mSlidingMenu.setShadowDrawable(R.drawable.drawer_shadow);//设置阴影图片  
  45.         mSlidingMenu.setShadowWidthRes(R.dimen.shadow_width); //设置阴影图片的宽度  
  46.         mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset); //SlidingMenu划出时主页面显示的剩余宽度  
  47.         mSlidingMenu.setFadeDegree(0.35f);  
  48.         //设置SlidingMenu 的手势模式  
  49.         //TOUCHMODE_FULLSCREEN 全屏模式，在整个content页面中，滑动，可以打开SlidingMenu  
  50.         //TOUCHMODE_MARGIN 边缘模式，在content页面中，如果想打开SlidingMenu,你需要在屏幕边缘滑动才可以打开SlidingMenu  
  51.         //TOUCHMODE_NONE 不能通过手势打开SlidingMenu  
  52.         mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);  
  53.   
  54.         //设置 SlidingMenu 内容  
  55.         FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();  
  56.         MenuFragment menuFragment = new MenuFragment();  
  57.         fragmentTransaction.replace(R.id.menu, menuFragment);  
  58.         fragmentTransaction.replace(R.id.content, new HomeFragment());  
  59.         fragmentTransaction.commit();  
  60.           
  61.         //使用左上方icon可点，这样在onOptionsItemSelected里面才可以监听到R.id.home  
  62.         getActionBar().setDisplayHomeAsUpEnabled(true);  
  63.     }  
  64.   
  65.     @Override  
  66.     public boolean onCreateOptionsMenu(Menu menu) {  
  67.         // Inflate the menu; this adds items to the action bar if it is present.  
  68.         getMenuInflater().inflate(R.menu.main, menu);  
  69.         return true;  
  70.     }  
  71.       
  72.     @Override  
  73.     public boolean onOptionsItemSelected(MenuItem item) {  
  74.         switch (item.getItemId()) {  
  75.         case android.R.id.home:  
  76.               
  77.             toggle(); //动态判断自动关闭或开启SlidingMenu  
  78. //          getSlidingMenu().showMenu();//显示SlidingMenu  
  79. //          getSlidingMenu().showContent();//显示内容  
  80.             return true;  
  81.         }  
  82.         return super.onOptionsItemSelected(item);  
  83.     }  
  84.   
  85.     @SuppressLint("NewApi")  
  86.     @Override  
  87.     public void selectItem(int position, String title) {  
  88.         // update the main content by replacing fragments    
  89.         Fragment fragment = null;    
  90.         switch (position) {    
  91.         case 0:    
  92.             fragment = new HomeFragment();    
  93.             break;    
  94.         case 1:    
  95.             fragment = new FindPeopleFragment();    
  96.             break;    
  97.         case 2:    
  98.             fragment = new PhotosFragment();    
  99.             break;    
  100.         case 3:    
  101.             fragment = new CommunityFragment();    
  102.             break;    
  103.         case 4:    
  104.             fragment = new PagesFragment();    
  105.             break;    
  106.         case 5:    
  107.             fragment = new WhatsHotFragment();    
  108.             break;    
  109.         default:    
  110.             break;    
  111.         }    
  112.         
  113.         if (fragment != null) {    
  114.             FragmentManager fragmentManager = getSupportFragmentManager();  
  115.             fragmentManager.beginTransaction()    
  116.                     .replace(R.id.content, fragment).commit();    
  117.             // update selected item and title, then close the drawer    
  118.             setTitle(title);  
  119.             mSlidingMenu.showContent();  
  120.         } else {    
  121.             // error in creating fragment    
  122.             Log.e("MainActivity", "Error in creating fragment");    
  123.         }    
  124.     }  
  125. }  



Demo下载地址：http://download.csdn.net/detail/fx_sky/6723771


文章标签：
Android开发
Java
容器
ctrip_xzh
目录
相关文章
yechaoa
|
Android开发
Android Studio引入侧边栏SlidingMenu，配置及简单使用
Android Studio引入侧边栏SlidingMenu，配置及简单使用
yechaoa
972 0
史迪奇2号
|
XML Android开发 数据格式
[安卓] 17、一个简单的例子学安卓侧滑设计——用开源slidingmenu
史迪奇2号
1595 0
余二五
|
前端开发 Java Android开发
Android开源：SlidingMenu笔记
余二五
1197 0
范大脚脚
|
Java Android开发 API
android121 zhihuibeijing SlidingMenu(侧边栏效果,使用开源库)
范大脚脚
1548 0
余二五
|
Android开发
Android第十六期 - 侧边栏SlidingMenu支持自定义左右
余二五
1006 0
嗯哼9925
|
前端开发 Android开发
【Android UI设计与开发】10：滑动菜单栏（二）SlidingMenu 动画效果的实现
嗯哼9925
1235 0
技术小胖子
|
Android开发 数据格式 XML
Android UI开发第八篇——ViewFlipper 左右滑动效果
技术小胖子
993 0
最美的回忆
|
Java Android开发 容器
Android SlidingMenu 仿网易新闻客户端布局
最美的回忆
1290 0
嗯哼9925
|
XML Java Android开发
【Android UI设计与开发】9：滑动菜单栏（一）开源项目SlidingMenu的使用和示例
嗯哼9925
1507 0
技术小胖子
|
Android开发 数据格式 XML
Android UI开发第三篇——popupwindow
技术小胖子
1153 0