DevStore首页 > DEV资源 > 源码下载 > 源码详情

Android切换菜单(Viewpager+Fragment)

 
紫豪 | 2014-10-10 20:09    浏览量(13185)    评论(17)    收藏(16)
功能分类:特效 支持平台:Android 运行环境:Eclipse
开发语言:Java 开发工具:Eclipse 源码大小:634.89KB
下载源码 1827 人下载

源码简介

利用Viewpager+Fragment实现顶部选项卡,可以通过滑动、点击来进行Fragment页面切换(如需要添加页面或减少页面,修改PageSize即可——下方对应添加Fragment到管理器中)

源码截图

  • 主界面
  • 切换后效果
DevStore所有源码来自用户上传分享,版权问题及牵扯到商业纠纷均与DevStore无关。

源码片段

public class MainActivity extends FragmentActivity {

	private ViewPager viewPager;// 页卡内容
	private ImageView imageView;// 动画图片
	private TextView voiceAnswer, healthPedia, pDected;// 选项名称
	private List fragments;// Tab页面列表
	private int offset = 0;// 动画图片偏移量
	private int currIndex = 0;// 当前页卡编号
	private int bmpW;// 动画图片宽度
	private int selectedColor, unSelectedColor;
	/** 页卡总数 **/
	private static final int pageSize = 3;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.tabwidget);

		initView();
	}

	private void initView() {
		selectedColor = getResources()
				.getColor(R.color.tab_title_pressed_color);
		unSelectedColor = getResources().getColor(
				R.color.tab_title_normal_color);

		InitImageView();
		InitTextView();
		InitViewPager();
	}

	/**
	 * 初始化Viewpager页
	 */
	private void InitViewPager() {
		viewPager = (ViewPager) findViewById(R.id.vPager);
		fragments = new ArrayList();
		fragments.add(new OneFragment());
		fragments.add(new TwoFragmnet());
		fragments.add(new TwoFragmnet());
		viewPager.setAdapter(new myPagerAdapter(getSupportFragmentManager(),
				fragments));
		viewPager.setCurrentItem(0);
		viewPager.setOnPageChangeListener(new MyOnPageChangeListener());
	}

	/**
	 * 初始化头标
	 * 
	 */
	private void InitTextView() {
		voiceAnswer = (TextView) findViewById(R.id.tab_1);
		healthPedia = (TextView) findViewById(R.id.tab_2);
		pDected = (TextView) findViewById(R.id.tab_3);

		voiceAnswer.setTextColor(selectedColor);
		healthPedia.setTextColor(unSelectedColor);
		pDected.setTextColor(unSelectedColor);

		voiceAnswer.setText("语音问答");
		healthPedia.setText("健康百科");
		pDected.setText("育儿检测");

		voiceAnswer.setOnClickListener(new MyOnClickListener(0));
		healthPedia.setOnClickListener(new MyOnClickListener(1));
		pDected.setOnClickListener(new MyOnClickListener(2));
	}

	/**
	 * 初始化动画,这个就是页卡滑动时,下面的横线也滑动的效果,在这里需要计算一些数据
	 */

	private void InitImageView() {
		imageView = (ImageView) findViewById(R.id.cursor);
		bmpW = BitmapFactory.decodeResource(getResources(),
				R.drawable.tab_selected_bg).getWidth();// 获取图片宽度
		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;// 获取分辨率宽度
		offset = (screenW / pageSize - bmpW) / 2;// 计算偏移量--(屏幕宽度/页卡总数-图片实际宽度)/2
													// = 偏移量
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		imageView.setImageMatrix(matrix);// 设置动画初始位置
	}

	/**
	 * 头标点击监听
	 */
	private class MyOnClickListener implements OnClickListener {
		private int index = 0;

		public MyOnClickListener(int i) {
			index = i;
		}

		public void onClick(View v) {

			switch (index) {
			case 0:
				voiceAnswer.setTextColor(selectedColor);
				healthPedia.setTextColor(unSelectedColor);
				pDected.setTextColor(unSelectedColor);
				break;
			case 1:
				healthPedia.setTextColor(selectedColor);
				voiceAnswer.setTextColor(unSelectedColor);
				pDected.setTextColor(unSelectedColor);
				break;
			case 2:
				pDected.setTextColor(selectedColor);
				voiceAnswer.setTextColor(unSelectedColor);
				healthPedia.setTextColor(unSelectedColor);
				break;
			}
			viewPager.setCurrentItem(index);
		}

	}

	/**
	 * 为选项卡绑定监听器
	 */
	public class MyOnPageChangeListener implements OnPageChangeListener {

		int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量
		int two = one * 2;// 页卡1 -> 页卡3 偏移量

		public void onPageScrollStateChanged(int index) {
		}

		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		public void onPageSelected(int index) {
			Animation animation = new TranslateAnimation(one * currIndex, one
					* index, 0, 0);// 显然这个比较简洁,只有一行代码。
			currIndex = index;
			animation.setFillAfter(true);// True:图片停在动画结束位置
			animation.setDuration(300);
			imageView.startAnimation(animation);

			switch (index) {
			case 0:
				voiceAnswer.setTextColor(selectedColor);
				healthPedia.setTextColor(unSelectedColor);
				pDected.setTextColor(unSelectedColor);
				break;
			case 1:
				healthPedia.setTextColor(selectedColor);
				voiceAnswer.setTextColor(unSelectedColor);
				pDected.setTextColor(unSelectedColor);
				break;
			case 2:
				pDected.setTextColor(selectedColor);
				voiceAnswer.setTextColor(unSelectedColor);
				healthPedia.setTextColor(unSelectedColor);
				break;
			}
		}
	}

	/**
	 * 定义适配器
	 */
	class myPagerAdapter extends FragmentPagerAdapter {
		private List fragmentList;

		public myPagerAdapter(FragmentManager fm, List fragmentList) {
			super(fm);
			this.fragmentList = fragmentList;
		}

		/**
		 * 得到每个页面
		 */
		@Override
		public Fragment getItem(int arg0) {
			return (fragmentList == null || fragmentList.size() == 0) ? null
					: fragmentList.get(arg0);
		}

		/**
		 * 每个页面的title
		 */
		@Override
		public CharSequence getPageTitle(int position) {
			return null;
		}

		/**
		 * 页面的总个数
		 */
		@Override
		public int getCount() {
			return fragmentList == null ? 0 : fragmentList.size();
		}
	}

}
  •   赞(3) 赞 +1 赞(3) 已赞
  •   收藏(16) 收藏 +1 已收藏 取消
  •   下载(1827)
评论(17)
Conker

Conker 2015-12-14 23:03:10

可以学习的资源
回复(0) 赞(0) 赞(1)
Conker

Conker 2015-12-13 18:25:27

很好的参考 谢谢分享
回复(0) 赞(0) 赞(1)
lukee

lukee 2015-12-11 09:51:49

我想问下那个下划线总是长了怎么办
回复(0) 赞(0) 赞(1)
devcode

devcode 2015-12-10 09:13:21

不错的demo,感谢分享!
回复(0) 赞(0) 赞(1)
jiajia756

jiajia756 2015-08-11 10:35:23

呵呵,不错哦
回复(0) 赞(0) 赞(1)
  • 推荐
  • 审核
  • 收录
  • 获取活力值

源码上传作者

  • 138 能力值
  • 58 源码
  • 10 评测
  • 0 资料

热门源码