首页 > 代码库 > viewPager+Fragment实现左右划屏

viewPager+Fragment实现左右划屏

2024-07-11 18:43:02   222人阅读

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


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

                                

先说一下思路：

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>


联系
我们