无需SherlockActionbar的SlidingMenu使用详解（二）——向Fragment中添加ViewPager和Tab
之前我们对大体框架有了一定的认识，现在我们来做Fragment界面，其实这里面和这个框架的关系就不大了，但因为有些同学对于在SlidingMenu中切换fragment还是有问题，所以我就在本篇进行详细讲解。
1.定义MenuFragment
1.1首先定义这个fragment的布局文件，其实很简单了就是几张图片和一个listview
app_menu.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="200dp" android:layout_height="match_parent" android:orientation="vertical"> <RelativeLayout android:layout_width="match_parent" android:layout_height="120dp" > <ImageView android:id="@+id/backgroundPicture_id" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" android:src="@drawable/background" /> <ImageView android:id="@+id/head_pic_id" android:layout_width="60dp" android:layout_height="60dp" android:layout_alignParentLeft="true" android:layout_marginLeft="22dp" android:layout_marginTop="40dp" android:scaleType="fitXY" android:src="@drawable/kale" /> <TextView android:id="@+id/name_id" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignBottom="@+id/head_pic_id" android:layout_marginBottom="20dp" android:layout_marginLeft="20dp" android:layout_marginTop="55dp" android:layout_toRightOf="@id/head_pic_id" android:text="JackTony" android:textColor="#ffffff" android:textSize="20sp" /> </RelativeLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="90dp" android:layout_marginTop="10dp" android:layout_marginBottom="10dp" android:gravity="center" android:orientation="horizontal" > <ImageView android:id="@+id/personalSetting_id" android:layout_width="90dp" android:layout_height="90dp" android:layout_marginRight="10dp" android:src="@drawable/personalsettingbutton" android:scaleType="fitCenter" /> <ImageView android:id="@+id/releaseMessageButton_id" android:layout_width="90dp" android:layout_height="90dp" android:layout_marginLeft="10dp" android:src="@drawable/releasemessagebutton" android:scaleType="fitCenter" /> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/menu_list" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingLeft="15dp" /> </RelativeLayout> </LinearLayout>
1.2和往常一样，我们在Fragment中加载布局文件，并且给里面的listview添加适配器用于绑定数据
MenuFragment
package com.kale.slidingmenutest.fragment; import android.app.Activity; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AdapterView; import android.widget.AdapterView.OnItemClickListener; import android.widget.ArrayAdapter; import android.widget.ListView; import com.kale.slidingmenutest.MainActivity; import com.kale.slidingmenutest.R; /** * @author:JackTony * @tips :菜单的fragment * @date :2013-11-17 */ public class MenuFragment extends Fragment { private MainActivity activity; @Override public void onAttach(Activity activity) { super.onAttach(activity); this.activity = (MainActivity)activity; } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){ View v = inflater.inflate(R.layout.app_menu, null); return v; } @Override public void onActivityCreated(Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); String []items = {"第一个栏目","第二个栏目"}; ArrayAdapter<String> adapter = new ArrayAdapter<String>( getActivity(), android.R.layout.simple_list_item_1,items); ListView menuLv = (ListView)getActivity().findViewById(R.id.menu_list); //设置适配器和监听器 menuLv.setAdapter(adapter); menuLv.setOnItemClickListener(new MenuItemClickListener()); } class MenuItemClickListener implements OnItemClickListener{ @Override public void onItemClick(AdapterView<?> parent, View view, int position,long id) { Fragment newFragment = null; MainActivity.NOW_FRAGMENT_NO = position; activity.supportInvalidateOptionsMenu(); switch (position) { case 0: newFragment = new FirstFragment(); break; case 1: newFragment = new SecondFragment(); break; } if (newFragment != null) { //交给Activity来切换正文fragment activity.switchContent(newFragment); } } } }
讲解：
1.listview用一个最简单的ArrayAdapter来放了两个数据，并且添加了监听器来监听点击事件。
2.在实际使用中不同的fragment很可能会需要不同的菜单，所以我通过对MainActivity中静态变量的设置和activity.supportInvalidateOptionsMenu();来使得每次切换Fragment的时候都重新根据静态变量的值来生成菜单项
3.这里面因为要用到MainActivity中切换Fragment的方法，所以要生成MainActivity对象。需要注意的是在多次切换后这个Fragment中的getActivity()方法很可能会出错，返回null值。因此这里在绑定activity时实例化一个activity对象是很有必要的！
2.简单的Fragment
SecondFragment是个很简单的Fragment，就是为了举例子用的。
package com.kale.slidingmenutest.fragment; import android.os.Bundle; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class SecondFragment extends MenuFragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { TextView textView = new TextView(getActivity()); textView.setGravity(Gravity.CENTER); textView.setText("第二个Fragment"); textView.setTextSize(30); return textView; } }
3.拥有TAB和ViewPager的FirstFragment
先贴上布局：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="match_parent" android:visibility="visible" /> </LinearLayout>
这里面稍微有个难点就是，在不同的页面滑动时要实时改变slidingMenu的触控范围，是边缘还是全屏触控都需要设置。
3.1初始化viewPager和actionbar，并添加监听器。
因为actionbar监听器中需要传入viewpager做判断，所以要先初始化viewpager。
ViewPager viewPager; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO 自动生成的方法存根 return inflater.inflate(R.layout.first_fragment, null); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { // TODO 自动生成的方法存根 super.onActivityCreated(savedInstanceState); //设置actionbar initViewPager(); initActionBar(); } /** */ private void initActionBar() { ActionBar actionBar = ((MainActivity)getActivity()).getSupportActionBar(); //设定有Tab actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); ActionBar.Tab tab; //开始添加Tab，这里添加4个，并且设置监听器 for (int i = 1; i <= 4; i++) { tab = actionBar.newTab(); tab.setText("Tab " + i); tab.setTabListener(new MyTabListener(viewPager)); actionBar.addTab(tab); } } private void initViewPager() { ArrayList<View> list = new ArrayList<View>(); for (int i = 0; i < 4; i++) { list.add(newTextView("第"+(i+1)+"个界面")); } viewPager = (ViewPager)getActivity().findViewById(R.id.viewPager); viewPager.setAdapter(new MyPagerAdapter(list)); viewPager.setOnPageChangeListener(new PageChangeListener((MainActivity)getActivity())); } private TextView newTextView(String text) { TextView tv = new TextView(getActivity()); tv.setText(text); tv.setTextSize(30); tv.setGravity(Gravity.CENTER); return tv; }
/** * @author:Jack Tony 这里配置适配器 * @tips :这里传入一个list数组，从每个list中可以剥离一个view并显示出来 * @date :2014-9-24 */ public class MyPagerAdapter extends PagerAdapter { private ArrayList<View> mViewList; private int pagerNum = 0; public MyPagerAdapter(ArrayList<View> viewList) { mViewList = viewList; } public int getPagerNum() { return pagerNum; } @Override public int getCount() { return mViewList.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public void destroyItem(View arg0, int arg1, Object arg2) { if (mViewList.get(arg1) != null) { ((ViewPager) arg0).removeView(mViewList.get(arg1)); } } @Override public Object instantiateItem(View arg0, int arg1) { try { if (mViewList.get(arg1).getParent() == null) { ((ViewPager) arg0).addView(mViewList.get(arg1), 0); } else { /* * 很难理解新添加进来的view会自动绑定一个父类，由于一个儿子view不能与两个父类相关， * 所以得解绑不这样做否则会产生 viewpager java.lang.IllegalStateException: * The specified child already has a parent. You must call * removeView() on the child's parent first. */ ((ViewGroup) mViewList.get(arg1).getParent()) .removeView(mViewList.get(arg1)); ((ViewPager) arg0).addView(mViewList.get(arg1), 0); } } catch (Exception e) { e.printStackTrace(); } finally { pagerNum = arg1; } return mViewList.get(arg1); } }
全部代码：
package com.kale.slidingmenutest.fragment; import java.util.ArrayList; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBar; import android.view.Gravity; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.kale.slidingmenutest.MainActivity; import com.kale.slidingmenutest.R; import com.kale.slidingmenutest.listener.MyTabListener; import com.kale.slidingmenutest.listener.PageChangeListener; public class FirstFragment extends Fragment { ViewPager viewPager; @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // TODO 自动生成的方法存根 return inflater.inflate(R.layout.first_fragment, null); } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { // TODO 自动生成的方法存根 super.onActivityCreated(savedInstanceState); //设置actionbar initViewPager(); initActionBar(); } /** */ private void initActionBar() { ActionBar actionBar = ((MainActivity)getActivity()).getSupportActionBar(); //设定有Tab actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); ActionBar.Tab tab; //开始添加Tab，这里添加4个，并且设置监听器 for (int i = 1; i <= 4; i++) { tab = actionBar.newTab(); tab.setText("Tab " + i); tab.setTabListener(new MyTabListener(viewPager)); actionBar.addTab(tab); } } private void initViewPager() { ArrayList<View> list = new ArrayList<View>(); for (int i = 0; i < 4; i++) { list.add(newTextView("第"+(i+1)+"个界面")); } viewPager = (ViewPager)getActivity().findViewById(R.id.viewPager); viewPager.setAdapter(new MyPagerAdapter(list)); viewPager.setOnPageChangeListener(new PageChangeListener((MainActivity)getActivity())); } private TextView newTextView(String text) { TextView tv = new TextView(getActivity()); tv.setText(text); tv.setTextSize(30); tv.setGravity(Gravity.CENTER); return tv; } /** * @author:Jack Tony 这里配置适配器 * @tips :这里传入一个list数组，从每个list中可以剥离一个view并显示出来 * @date :2014-9-24 */ public class MyPagerAdapter extends PagerAdapter { private ArrayList<View> mViewList; private int pagerNum = 0; public MyPagerAdapter(ArrayList<View> viewList) { mViewList = viewList; } public int getPagerNum() { return pagerNum; } @Override public int getCount() { return mViewList.size(); } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public void destroyItem(View arg0, int arg1, Object arg2) { if (mViewList.get(arg1) != null) { ((ViewPager) arg0).removeView(mViewList.get(arg1)); } } @Override public Object instantiateItem(View arg0, int arg1) { try { if (mViewList.get(arg1).getParent() == null) { ((ViewPager) arg0).addView(mViewList.get(arg1), 0); } else { /* * 很难理解新添加进来的view会自动绑定一个父类，由于一个儿子view不能与两个父类相关， * 所以得解绑不这样做否则会产生 viewpager java.lang.IllegalStateException: * The specified child already has a parent. You must call * removeView() on the child's parent first. */ ((ViewGroup) mViewList.get(arg1).getParent()) .removeView(mViewList.get(arg1)); ((ViewPager) arg0).addView(mViewList.get(arg1), 0); } } catch (Exception e) { e.printStackTrace(); } finally { pagerNum = arg1; } return mViewList.get(arg1); } } }
3.2设置ViewPager的滑动监听，滑动时要求tab也需要跟着变换，并且滑动到最左边的界面时将触控范围变为全屏有效。
PageChangeListener
package com.kale.slidingmenutest.listener; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBar; import android.support.v7.app.ActionBarActivity; import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu; import com.kale.slidingmenutest.MainActivity; public class PageChangeListener implements ViewPager.OnPageChangeListener { private ActionBarActivity activity; public PageChangeListener(ActionBarActivity activity) { this.activity = activity; } @Override public void onPageScrollStateChanged(int arg0) { // TODO 自动生成的方法存根 } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO 自动生成的方法存根 } @Override public void onPageSelected(int position) { //System.out.println("position:" + position); activity.getSupportActionBar().setSelectedNavigationItem(position); //设置在其他页面滑动时slingmenu是边缘模式，最边上页面是全屏模式（防误触） switch (position) { case 0: ((MainActivity)activity).getMySlidingMenu(). setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN); break; default: ((MainActivity)activity).getMySlidingMenu(). setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN); break; } } }
3.3MyTabListener
注意：要判断viewpager是否为空
package com.kale.slidingmenutest.listener; import android.support.v4.app.FragmentTransaction; import android.support.v4.view.ViewPager; import android.support.v7.app.ActionBar; import android.support.v7.app.ActionBar.Tab; /** * @author:Jack Tony * @tips :设置tab的监听器，控制viewpager的显示 * @date :2014-7-30 */ public class MyTabListener implements ActionBar.TabListener { ViewPager viewPager; public MyTabListener(ViewPager viewPager) { this.viewPager = viewPager; } @Override public void onTabReselected(Tab arg0, FragmentTransaction arg1) { } /* 核心方法 * @see android.support.v7.app.ActionBar.TabListener#onTabSelected(android.support.v7.app.ActionBar.Tab, android.support.v4.app.FragmentTransaction) * 选中某个tab时，同时切换viewpager */ @Override public void onTabSelected(Tab tab, FragmentTransaction arg1) { if (viewPager != null && viewPager.getCurrentItem() != tab.getPosition()) { viewPager.setCurrentItem(tab.getPosition()); } } @Override public void onTabUnselected(Tab arg0, FragmentTransaction arg1) { } }
源码下载：http://download.csdn.net/detail/shark0017/7976759
