Android Fragment嵌套ViewPager，ViewPager嵌套多个Fragment - Go语言中文社区

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

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

前两篇的项目地址Android Fragment应用实战，使用碎片向ActivityGroup说再见和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，随便定义三个（首页，消息，我的）

效果图如下：



首页，消息，我的，三个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 。

最重要的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>

最终的效果图如下：


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

源码地址，点击下载

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_24956515/article/details/50990506
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2021-06-13 14:15:22
  • 阅读 ( 1157 )
  • 分类：

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！