viewPager+Fragment实现左右划屏

最近接触左右划屏,从网上搜了一些资料,学习了一下,觉得不错,总结一下。

效果图如下,可以实现左右划屏

先说一下思路:

1.创建一个.java文件,继承Fragment

2.创建onCreateView()方法

3.将主页面的布局放在onCreateView中

View view = inflater.inflate(R.layout.fragment_userinfo, null);
return view;

4.初始化TextView,并且监听

textView1 = (TextView) view.findViewById(R.id.text1);
		textView2 = (TextView) view.findViewById(R.id.text2);
		textView3 = (TextView) view.findViewById(R.id.text3);

		textView1.setOnClickListener(new MyOnClickListener(0));
		textView2.setOnClickListener(new MyOnClickListener(1));
		textView3.setOnClickListener(new MyOnClickListener(2));

5.初始化ImageView,并计算滑动数据

private void InitImageView(LayoutInflater inflater,View view) {
		imageView = (ImageView) view.findViewById(R.id.cursor);
		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)
				.getWidth();// 获取图片宽度
		DisplayMetrics dm = new DisplayMetrics();
		getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;// 获取分辨率宽度
		offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		imageView.setImageMatrix(matrix);// 设置动画初始位置
	}

只贴一下主要的代码:

public class UserInfoFragment extends Fragment {

	private ViewPager viewPager;// 页卡内容
	private ImageView imageView;// 动画图片
	private TextView textView1, textView2, textView3;
	private List<View> views;// Tab页面列表
	private List<Fragment> fragments;// Tab页面列表
	private int offset = 0;// 动画图片偏移量
	private int currIndex = 0;// 当前页卡编号
	private int bmpW;// 动画图片宽度
	private View view1, view2, view3;// 各个页卡
	private Fragment fragment;
	private FragmentManager fragmentManager;

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {
		if (Util.getAndroidSDKVersion() >= 4) {
			fragment = new UserInfoSettingFragment();
			fragmentManager = getChildFragmentManager();
		}
		View view = inflater.inflate(R.layout.fragment_userinfo, null);
		InitImageView(inflater,view);
		InitTextView(view);
		InitViewPager(inflater,view);
		return view;
	}

	private void InitViewPager(LayoutInflater inflater,View view) {
		viewPager = (ViewPager) view.findViewById(R.id.vPager);
		views = new ArrayList<View>();
		fragments=new ArrayList<Fragment>();
		fragments.add(new UserInfoSettingFragment());
		fragments.add(new UserInfoMesFragment());
		fragments.add(new NurseQuFragment());

		viewPager.setAdapter(new MyFragmentAdpter(fragments,fragmentManager));
		viewPager.setCurrentItem(0);
		viewPager.setOnPageChangeListener(new MyOnPageChangeListener());

	}

	/**
	 * 初始化头标
	 */

	private void InitTextView(View view) {
		textView1 = (TextView) view.findViewById(R.id.text1);
		textView2 = (TextView) view.findViewById(R.id.text2);
		textView3 = (TextView) view.findViewById(R.id.text3);

		textView1.setOnClickListener(new MyOnClickListener(0));
		textView2.setOnClickListener(new MyOnClickListener(1));
		textView3.setOnClickListener(new MyOnClickListener(2));
	}

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

	private void InitImageView(LayoutInflater inflater,View view) {
		imageView = (ImageView) view.findViewById(R.id.cursor);
		bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)
				.getWidth();// 获取图片宽度
		DisplayMetrics dm = new DisplayMetrics();
		getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
		int screenW = dm.widthPixels;// 获取分辨率宽度
		offset = (screenW / 3 - bmpW) / 2;// 计算偏移量
		Matrix matrix = new Matrix();
		matrix.postTranslate(offset, 0);
		imageView.setImageMatrix(matrix);// 设置动画初始位置
	}

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

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

		public void onClick(View v) {
			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 arg0) {

		}

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

		}

		public void onPageSelected(int arg0) {

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

	}

}

注:要利用这种方式的话,自动滑动的ImageView需要自己找一张图片,如果你想要只要标题汉字滑动,下面的线不滑动的话,可以直接用ViewPager自己的属性。

<android.support.v4.view.ViewPager
        android:id="@+id/viewPager_person_tab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left" >

        <android.support.v4.view.PagerTabStrip
            android:id="@+id/pagerTabStrip"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="@color/tabblack"
            android:scrollbars="@null" />
    </android.support.v4.view.ViewPager>

viewPager+Fragment实现左右划屏

时间: 2024-09-29 07:40:42

viewPager+Fragment实现左右划屏的相关文章

一起来搭App框架(侧滑与toolbar联动+选项卡(viewpager+fragment+radiogruop)+optionMenu)

1.概述 最近在学车,抽着空写了一个常用的App框架,可惜不会制作gif图片,请忽略录屏软件的那个浮动窗口,要是有更好的方式制作gif麻烦告知下提前感谢,效果图如下,凑合着看下吧. 主要实现了 [1]使用RadioGroup处理选项卡优化布局 [2]使用ToolBar跟侧滑图表联动,效果更好 [3]集合了viewerPager+fragment,drawerlayout+toolbar,optionmenu以及circleImageView处理头像等功能 一般app项目应该可以应付了.下面说下实

Android ViewPager+Fragment滑动选项卡,tab点击选项卡

有一段时间一直再研究这个,自Android 3.0以后,很少开发者再用以前的TabWidget控件了.那种效果不是很好,也不能滑动.后来陆续出现了各种各样滑动选项卡,每种的出现都各有优势吧.但我还是推荐ViewPager+Fragment滑动选项卡,tab点击选项卡.因为横屏或者竖屏效果都还不错,针对这种效果,还有一种开源框架的出现.接下来会有所介绍. 转载请注明出处:http://blog.csdn.net/qq_16064871 本文demo下载:请点击 一.ViewPagerActivit

ViewPager+Fragment实现Tab主界面

毕竟是第一次做项目,所以在每一点上都做得特别认真,接下来我来给大家大致讲述一下用ViewPager+Fragment来实现app Tab主界面,突然想起来LZ居然2天没去上课了......(>....<) 没办法,为了暑假的实习offer,只好拼了!!! package com.bob.tabui; import android.support.v4.app.*; import android.os.Bundle; import android.support.v4.view.ViewPage

Android——ViewPager+Fragment+ListView之间

Android--ViewPager+Fragment+ListView之间 <span style="font-size:18px;">package com.example.jreduch05; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.A

viewpager 滑至最后一屏禁止向右滑,滑至第一屏禁止向左滑,怎么实现

============问题描述============ 如题 viewpager 滑至最后一屏禁止向右滑,滑至第一屏禁止向左滑,怎么实现 ============解决方案1============ 谢谢楼主分享,我学习了

android控件篇:ViewPager+Fragment+GridView的使用(与AndroidQuery框架结合)

最近看了一个AndroidQuery的框架,里面的Demo,有个界面,让博主很喜欢.左右滑动十分顺畅,手感很好,于是拿来和大家分享一下.先看一下效果图: 从图中可以看出,上面的布局是一个Layout里面嵌套有个ViewPager,ViewPager中包含着Fragment,Fragment的布局文件包含了一个简单的GridView,GridView的Item布局很简单,就是一个100*100大小的图片.好啦,先说这么多,然后咱们看代码吧. 最外层Activity的布局文件 <?xml versi

ViewPager+Fragment取消预加载(延迟加载)

在项目中,都或多或少地使用的Tab布局,所以大都会用到ViewPager+Fragment,但是Fragment有个不好或者太好的地方.例如你在ViewPager中添加了三个Fragment,当加载ViewPager中第一个Fragment时,它会默认帮你预先加载了第二个Fragment,当你加载第二个Fragment时,它会帮你加载第三个Fragment.这样虽然有时很好,但是用户只需看一个Fragment时,我们就做了一些多余工作加载了第二个Fragment.在这只需要取消Fragment的

ViewPager+Fragment基础

ViewPager+Fragment MainActivity.java package wuxiaocheng.cn.activity; import android.app.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentManager; import android.sup

android viewpager + fragment 选中当前fragment再触发一些事情的问题

最近项目中遇到一个问题: 背景:使用viewpager+fragment实现首页的滑动:然后需要在第三个fragment被选中时自动弹出对话框. 解决方法: 1.在 vp.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int arg0) { //arg0为选中当前的fragment的位置,可以处理一些业务. } } 2.frgment提供了一个方法 @Overri