最近接触左右划屏,从网上搜了一些资料,学习了一下,觉得不错,总结一下。
效果图如下,可以实现左右划屏
先说一下思路:
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