Android Fragment嵌套ViewPager，ViewPager嵌套多个Fragment

谁借莪１个温暖的怀抱￠ 2022-07-28 00:29 233阅读 0赞

前几天，项目中要实现这么一个功能。就配置了下。其实很简单，首先 需要阅读下我转载的前两篇文章，都是转载的郭神的，写的非常好。我的项目中逢者必用，其实就相当于一个很好的框架来使用，非常方便。

前两篇的项目地址[Android Fragment应用实战，使用碎片向ActivityGroup说再见][Android Fragment_ActivityGroup]和[Android ActionBar应用实战，高仿微信主界面的设计][Android ActionBar]，认真阅读，你会感觉到受益颇深。（当然，如果你不是大神）

其实和前两篇都重复了，都不想粘贴代码了，为了便于学习，还是粘贴上吧。

首先，写了一个BaseActivity，便于封装一些方法继承

public class BaseActivity extends FragmentActivity {
    	protected Context mContext;
    
    	@Override
    	protected void onCreate(Bundle arg0) {
    		// TODO Auto-generated method stub
    		super.onCreate(arg0);
    		ActionBar actionBar = getActionBar();
    		actionBar.hide();//隐藏标题栏
    		mContext = this;
    	}
    
    	protected void Toasters(String message) {
    		Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
    	}
    
    }

首先，应用启动后会进入MainActivity，此Activity会加载三个Fragment，随便定义三个（首页，消息，我的）

效果图如下：

![20160327105222828][]

首页，消息，我的，三个fragment大同小异，布局在fragment类中加载出来就行，这里就不粘贴代码了。

最终要的是MainActivity，加载了三个fragment，点击效果，显示效果。其实是首次点击的时候首次加载了fragment，后来点击就隐藏了其他的fragment，显示了当前的fragment，这里需要处理隐藏其他的fragment，避免了多个fragment显示到界面上。

public class MainActivity extends BaseActivity implements OnClickListener {
    
    	/**
    	 * 首页
    	 **/
    	private LinearLayout main_linear_home;
    	private ImageView main_imageview_home;
    	private TextView main_txtview_home;
    	/**
    	 * 消息
    	 **/
    	private LinearLayout main_linear_msg;
    	private ImageView main_imageview_msg;
    	private TextView main_txtview_msg;
    	/**
    	 * 我的
    	 **/
    	private LinearLayout main_linear_user;
    	private ImageView main_imageview_user;
    	private TextView main_txtview_user;
    
    	/**
    	 * 用于对Fragment进行管理
    	 */
    	private FragmentManager fragmentManager;
    	/**
    	 * 选中的颜色值
    	 */
    	private int main_txtColor_sel = 0;
    	/**
    	 * 正常颜色值
    	 */
    	private int main_txtColor_nol = 0;
    	/**
    	 * FrameLayout
    	 */
    	private FrameLayout main_new_frame;
    
    	private HomeFragment homeFragment;
    	private MessageFragment messageFragment;
    	private MyFragment myFragment;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		// TODO Auto-generated method stub
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    		initView();
    		setOnClickEvent();
    		// 初始化API
    	}
    
    	/**
    	 * @Description: TODO 初始化布局控件
    	 * @author Sunday
    	 * @date 2016年3月26日
    	 */
    	private void initView() {
    		// TODO Auto-generated method stub
    
    		main_new_frame = (FrameLayout) findViewById(R.id.main_new_frame);
    		// 布局
    		main_linear_home = (LinearLayout) findViewById(R.id.main_linear_home);
    		main_linear_msg = (LinearLayout) findViewById(R.id.main_linear_msg);
    		main_linear_user = (LinearLayout) findViewById(R.id.main_linear_my);
    		// 底部图片
    		main_imageview_home = (ImageView) findViewById(R.id.main_imageview_home);
    		main_imageview_msg = (ImageView) findViewById(R.id.main_imageview_msg);
    		main_imageview_user = (ImageView) findViewById(R.id.main_imageview_my);
    		// 底部文字
    		main_txtview_home = (TextView) findViewById(R.id.main_txtview_home);
    		main_txtview_msg = (TextView) findViewById(R.id.main_txtview_msg);
    		main_txtview_user = (TextView) findViewById(R.id.main_txtview_my);
    
    		fragmentManager = getSupportFragmentManager();
    		main_txtColor_nol = getBaseContext().getResources().getColor(R.color.main_txt_nor);
    		main_txtColor_sel = getBaseContext().getResources().getColor(R.color.main_txt_sel);
    
    		setTabSelection(0);
    	}
    
    	private void setOnClickEvent() {
    		main_linear_home.setOnClickListener(this);
    		main_linear_msg.setOnClickListener(this);
    		main_linear_user.setOnClickListener(this);
    	}
    
    	/*
    	 *
    	 */
    	@Override
    	public void onClick(View v) {
    		// TODO Auto-generated method stub
    
    		switch (v.getId()) {
    		case R.id.main_linear_home:
    			setTabSelection(0);
    			break;
    		case R.id.main_linear_msg:
    			setTabSelection(1);
    			break;
    		case R.id.main_linear_my:
    			setTabSelection(2);
    			break;
    		default:
    			break;
    		}
    	}
    
    	/**
    	 * 
    	 * @Description: TODO 底部切换选择fragment
    	 * @author Sunday
    	 * @date 2016年3月26日
    	 */
    	public void setTabSelection(int index) {
    		// 底部切换
    		clearSelection(index);
    		// 开启一个Fragment事务
    		FragmentTransaction transaction = fragmentManager.beginTransaction();
    		// 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
    		hideFragments(transaction);
    		switch (index) {
    
    		case 0:
    			if (homeFragment == null) {
    				homeFragment = new HomeFragment();
    				transaction.add(R.id.main_new_frame, homeFragment);
    
    			} else {
    				transaction.show(homeFragment);
    			}
    			break;
    
    		case 1:
    			if (messageFragment == null) {
    				messageFragment = new MessageFragment();
    				transaction.add(R.id.main_new_frame, messageFragment);
    
    			} else {
    				transaction.show(messageFragment);
    			}
    			break;
    
    		case 2:
    			if (myFragment == null) {
    				myFragment = new MyFragment();
    				transaction.add(R.id.main_new_frame, myFragment);
    
    			} else {
    				transaction.show(myFragment);
    			}
    			break;
    		}
    		transaction.commit();
    	}
    
    	/**
    	 * 
    	 * @Description: TODO 清除选中状态
    	 * @author Sunday
    	 * @date 2016年3月26日
    	 */
    	private void clearSelection(int index) {
    		main_imageview_home.setImageResource(R.drawable.shouye_normal);
    		main_txtview_home.setTextColor(main_txtColor_nol);
    		main_imageview_msg.setImageResource(R.drawable.massage_normal);
    		main_txtview_msg.setTextColor(main_txtColor_nol);
    		main_imageview_user.setImageResource(R.drawable.my_normal);
    		main_txtview_user.setTextColor(main_txtColor_nol);
    
    		if (index == 0) {
    			main_imageview_home.setImageResource(R.drawable.shouye_pressed);
    			main_txtview_home.setTextColor(main_txtColor_sel);
    		}
    
    		if (index == 1) {
    			main_imageview_msg.setImageResource(R.drawable.massage_pressed);
    			main_txtview_msg.setTextColor(main_txtColor_sel);
    		}
    
    		if (index == 2) {
    			main_imageview_user.setImageResource(R.drawable.my_pressed);
    			main_txtview_user.setTextColor(main_txtColor_sel);
    		}
    	}
    
    	/**
    	 * 
    	 * @Description: TODO 隐藏所有的fragment，防止多个fragment显示在界面
    	 * @author Sunday
    	 * @date 2016年3月26日
    	 */
    	private void hideFragments(FragmentTransaction transaction) {
    		if (homeFragment != null) {
    			transaction.hide(homeFragment);
    		}
    		if (messageFragment != null) {
    			transaction.hide(messageFragment);
    		}
    		if (myFragment != null) {
    			transaction.hide(myFragment);
    		}
    	}
    
    	// 定义一个变量，来标识是否退出
    	private static boolean isExit = false;
    
    	Handler mHandler = new Handler() {
    
    		@Override
    		public void handleMessage(Message msg) {
    			super.handleMessage(msg);
    			isExit = false;
    		}
    	};
    
    	/**
    	 * 处理返回键事件
    	 */
    	@Override
    	public boolean onKeyDown(int keyCode, KeyEvent event) {
    		if (keyCode == KeyEvent.KEYCODE_BACK) {
    			exit();
    			return false;
    		}
    		return super.onKeyDown(keyCode, event);
    	}
    
    	private void exit() {
    		if (!isExit) {
    			isExit = true;
    			Toasters("再按一次退出应用");
    			// 利用handler延迟发送更改状态信息
    			mHandler.sendEmptyMessageDelayed(0, 2000);
    		} else {
    			finish();
    			System.exit(0);
    		}
    	}
    }

其实就这么简单的实现了框架的搭建，开发中其实很多项目都是采用了这种框架。

现在，我们再来研究下，让首页加载ViewPager，ViewPager嵌套了三个fragment，fragment可以点击切换，也可以滑动切换。

tab滑动的效果，我们任然是使用的第三方的开源框架PagerSlidingTabStrip，稳定性非常好，还可以随意修改源码。

首先需要将PagerSlidingTabStrip的源码下载下来，并集成到我们的项目当中，PagerSlidingTabStrip的GitHub主页地址是：[https://github.com/astuetz/PagerSlidingTabStrip][https_github.com_astuetz_PagerSlidingTabStrip] 。

最重要的HomeFragment的代码如下：

public class HomeFragment extends Fragment {
    
    	/**
    	 * PagerSlidingTabStrip的实例
    	 */
    	private PagerSlidingTabStrip tabs;
    
    	/**
    	 * 获取当前屏幕的密度
    	 */
    	private DisplayMetrics dm;
    
    	private OneFragment oneFragment;
    	private TwoFragment twoFragment;
    	private ThreeFragment threeFragment;
    	/* 
    	 *
    	 */
    
    	@Override
    	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    		// TODO Auto-generated method stub
    		View view = inflater.inflate(R.layout.fragment_home, null);
    		setOverflowShowingAlways();
    		dm = getResources().getDisplayMetrics();
    		ViewPager pager = (ViewPager)view. findViewById(R.id.pager);
    		pager.setOffscreenPageLimit(0);//设置ViewPager的缓存界面数,默认缓存为2
    		tabs = (PagerSlidingTabStrip) view.findViewById(R.id.tabs);
    		pager.setAdapter(new MyPagerAdapter(getChildFragmentManager()));
    		tabs.setViewPager(pager);
    		setTabsValue();
    		return view;
    	}
    
    	/**
    	 * 对PagerSlidingTabStrip的各项属性进行赋值。
    	 */
    	private void setTabsValue() {
    		// 设置Tab是自动填充满屏幕的
    		tabs.setShouldExpand(true);
    		// 设置Tab的分割线是透明的
    		tabs.setDividerColor(Color.TRANSPARENT);
    		// 设置Tab底部线的高度
    		tabs.setUnderlineHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, dm));
    		// 设置Tab Indicator的高度
    		tabs.setIndicatorHeight((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3, dm));
    		// 设置Tab标题文字的大小
    		tabs.setTextSize((int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, dm));
    		// 设置Tab Indicator的颜色
    		tabs.setIndicatorColor(Color.parseColor("#d83737"));//#d83737   #d83737(绿)
    		// 设置选中Tab文字的颜色 (这是我自定义的一个方法)
    		tabs.setSelectedTextColor(Color.parseColor("#ffffff"));
    		// 取消点击Tab时的背景色
    		tabs.setTabBackground(0);
    	}
    
    	public class MyPagerAdapter extends FragmentPagerAdapter {
    
    		public MyPagerAdapter(FragmentManager fm) {
    			super(fm);
    		}
    
    		private final String[] titles = { "TAB1", "TAB2", "TAB3" };
    
    		@Override
    		public CharSequence getPageTitle(int position) {
    			return titles[position];
    		}
    
    		@Override
    		public int getCount() {
    			return titles.length;
    		}
    
    		@Override
    		public Fragment getItem(int position) {
    			switch (position) {
    			case 0:
    				if (oneFragment == null) {
    					oneFragment = new OneFragment();
    				}
    				return oneFragment;
    			case 1:
    				if (twoFragment == null) {
    					twoFragment = new TwoFragment();
    				}
    				return twoFragment;
    			case 2:
    				if (threeFragment == null) {
    					threeFragment = new ThreeFragment();
    				}
    				return threeFragment;
    			default:
    				return null;
    			}
    		}
    
    	}
    	
    	private void setOverflowShowingAlways() {
    		try {
    			ViewConfiguration config = ViewConfiguration.get(getParentFragment().getActivity());
    			Field menuKeyField = ViewConfiguration.class
    					.getDeclaredField("sHasPermanentMenuKey");
    			menuKeyField.setAccessible(true);
    			menuKeyField.setBoolean(config, false);
    		} catch (Exception e) {
    			e.printStackTrace();
    		}
    	}
    
    }

其次，布局文件也拿上来了

<?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" >
    
       <com.sunday.slidetabfragment.view.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:background="@color/light_black_bg" />
    
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
    </LinearLayout>

最终的效果图如下：

![20160327111049038][]

效果就如期待的那样，是不是觉得超级简单。如果要是觉得难看，tab样式和颜色当然是可以修改的，图片也可以使用UI设计的。

[源码地址，点击下载][Link 1]

[Android Fragment_ActivityGroup]: http://blog.csdn.net/qq_24956515/article/details/50461728
[Android ActionBar]: http://blog.csdn.net/qq_24956515/article/details/50975626
[20160327105222828]: /images/20220727/2c5afc918a254986974679e8dd082034.png
[https_github.com_astuetz_PagerSlidingTabStrip]: https://github.com/astuetz/PagerSlidingTabStrip
[20160327111049038]: /images/20220727/dbad71b77f0e4da2925e4a6e72ca40ad.png
[Link 1]: http://download.csdn.net/detail/qq_24956515/9473607