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;@Overridepublic 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>