大佬教程收集整理的这篇文章主要介绍了Android编程实现ViewPager多页面滑动切换及动画效果的方法,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
本文实例讲述了Android编程实现ViewPager多页面滑动切换及动画效果的方法。分享给大家供大家参考,具体如下:
一、首先,我们来看一下效果图,这是新浪微博的Tab滑动效果。我们可以手势滑动,也可以点击上面的头标进行切换。与此同方式,
白色横条会移动到相应的页卡头标下。这是一个动画效果,白条是缓慢滑动过去的。好了,接下来我们就来实现它。
二、在开始前,我们先要认识一个控件,ViewPager。它是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换。
这个附加包是android-support-v4.jar,在最后的源码中会提供给大家,在libs文件夹中。当然你也可以自己从网上搜索最新的版本。
三、我们先做界面
界面设计很简单,第一行三个头标,第二行动画图片,第三行页卡内容展示。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://scheR_868_11845@as.android.com/apk/res/android" xmlns:umadsdk="http://scheR_868_11845@as.android.com/apk/res/com.LoveBus" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="100.0dip" android:BACkground="#FFFFFF" > <TextView android:id="@+id/text1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="页卡1" android:textColor="#000000" android:textSize="22.0dip" /> <TextView android:id="@+id/text2" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="页卡2" android:textColor="#000000" android:textSize="22.0dip" /> <TextView android:id="@+id/text3" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" android:gravity="center" android:text="页卡3" android:textColor="#000000" android:textSize="22.0dip" /> </LinearLayout> <ImageView android:id="@+id/cursor" android:layout_width="fill_parent" android:layout_height="wrap_content" android:scaleType="matrix" android:src="@drawable/a" /> <android.support.v4.view.ViewPager android:id="@+id/vPager" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_weight="1.0" android:BACkground="#000000" android:flipInterval="30" android:persistentDrawingCache="animation" /> </LinearLayout>
我们要展示三个页卡,所以还需要三个页卡内容的界面设计,这里我们只设置了背景颜色,能起到区别作用即可。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://scheR_868_11845@as.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:BACkground="#158684" > </LinearLayout>
四、代码部分要进行初始化的工作
(1) 先来变量的定义
private ViewPager mPager;//页卡内容 private List<View> listViews; // Tab页面列表 private ImageView cursor;// 动画图片 private TextView t1,t2,t3;// 页卡头标 privatE int offset = 0;// 动画图片偏移量 privatE int currIndex = 0;// 当前页卡编号 privatE int bmpW;// 动画图片宽度
(2) 初始化头标
/** * 初始化头标 */ private void InitTextView() { t1 = (TextView) findViewById(R.id.text1); t2 = (TextView) findViewById(R.id.text2); t3 = (TextView) findViewById(R.id.text3); t1.setOnClickListener(new MyOnClickListener(0)); t2.setOnClickListener(new MyOnClickListener(1)); t3.setOnClickListener(new MyOnClickListener(2)); } /** * 头标点击监听 */ public class MyOnClickListener implements View.onClickListener { privatE int index = 0; public MyOnClickListener(int i) { index = i; } @Override public void onClick(View v) { mPager.setCurrentItem(indeX); } };
相信大家看后都没什么问题,点击第几个,就展示第几个页卡内容。
(3) 初始化页卡内容区
/** * 初始化ViewPager */ private void InitViewPager() { mPager = (ViewPager) findViewById(R.id.vPager); listViews = new ArrayList<View>(); LayoutInflater mInflater = getLayoutInflater(); listViews.add(mInflater.inflate(R.layout.lay1,null)); listViews.add(mInflater.inflate(R.layout.lay2,null)); listViews.add(mInflater.inflate(R.layout.lay3,null)); mPager.setAdapter(new MyPagerAdapter(listViews)); mPager.setCurrentItem(0); mPager.setOnPagechangelistener(new MyOnPagechangelistener()); }
我们将三个页卡界面装入其中,默认显示第一个页卡。这里我们还需要实现一个适配器。
/** * ViewPager适配器 */ public class MyPagerAdapter extends PagerAdapter { public List<View> mListViews; public MyPagerAdapter(List<View> mListViews) { this.mListViews = mListViews; } @Override public void destroyItem(View arg0,int arg1,Object arg2) { ((ViewPager) arg0).removeView(mListViews.get(arg1)); } @Override public void finishupdate(View arg0) { } @Override public int getCount() { return mListViews.size(); } @Override public Object instantiateItem(View arg0,int arg1) { ((ViewPager) arg0).addView(mListViews.get(arg1),0); return mListViews.get(arg1); } @Override public Boolean isViewFromObject(View arg0,Object arg1) { return arg0 == (arg1); } @Override public void restoreState(Parcelable arg0,ClassLoader arg1) { } @Override public Parcelable saveState() { return null; } @Override public void startupdate(View arg0) { } }
这里我们实现了各页卡的装入和卸载
(3) 初始化动画
/** * 初始化动画 */ private void InitImageView() { cursor = (ImageView) findViewById(R.id.cursor); bmpW = BitmapFactory.decoderesource(getresources(),R.drawable.a) .getWidth();// 获取图片宽度 Displaymetrics dm = new Displaymetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); int screenW = dm.widthPixels;// 获取分辨率宽度 offset = (screenW / 3 - bmpW) / 2;// 计算偏移量 Matrix matrix = new Matrix(); matrix.postTranslate(offset,0); cursor.setImageMatrix(matriX);// 设置动画初始位置 }
根据屏幕的分辨率和图片的宽度计算动画移动的偏移量
实现页卡切换监听
/** * 页卡切换监听 */ public class MyOnPagechangelistener implements OnPagechangelistener { int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量 int two = one * 2;// 页卡1 -> 页卡3 偏移量 @Override public void onPageSELEcted(int arg0) { Animation animation = null; switch (arg0) { case 0: if (currIndex == 1) { animation = new TranslateAnimation(one,0); } else if (currIndex == 2) { animation = new TranslateAnimation(two,0); } break; case 1: if (currIndex == 0) { animation = new TranslateAnimation(offset,one,0); } break; case 2: if (currIndex == 0) { animation = new TranslateAnimation(offset,two,0); } else if (currIndex == 1) { animation = new TranslateAnimation(one,0); } break; } currIndex = arg0; animation.setFillAfter(true);// True:图片停在动画结束位置 animation.setDuration(300); cursor.startAnimation(animation); } @Override public void onPageScrolled(int arg0,float arg1,int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }
五、打完收工,快来看看自己的劳动成果吧
希望本文所述对大家Android程序设计有所帮助。
以上是大佬教程为你收集整理的Android编程实现ViewPager多页面滑动切换及动画效果的方法全部内容,希望文章能够帮你解决Android编程实现ViewPager多页面滑动切换及动画效果的方法所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。