您的位置：首页 > 其它

ViewPager多页面滑动切换以及动画效果

2012-08-05 22:16 393 查看

一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。

　　二、在开始前，我们先要认识一个控件，ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。这个附加包是android-support-v4。jar，在最后的源码中会提供给大家，在libs文件夹中。当然你也可以自己从网上搜索最新的版本。找到它后，我们需要在项目中添加

三、我们先做界面，

界面设计很简单，第一行三个头标，第二行动画图片，第三行页卡内容展示。

01	<?xml version= "1.0" encoding= "utf-8" ?>

02	<LinearLayout xmlns：android= "http：//schemas.android.com/apk/res/android"

03	xmlns：umadsdk= "http：//schemas.android.com/apk/res/com.LoveBus"

04	android：layout_width= "fill_parent"

05	android：layout_height= "fill_parent"

06	android：orientation= "vertical" >

07	<LinearLayout

08	android：id= "@+id/linearLayout1"

09	android：layout_width= "fill_parent"

10	android：layout_height= "100.0dip"

11	android：background= "#FFFFFF" >

<TextView

13	android：id= "@+id/text1"

14	android：layout_width= "fill_parent"

15	android：layout_height= "fill_parent"

16	android：layout_weight= "1.0"

17	android：gravity= "center"

18	android：text= "页卡1"

19	android：textColor= "#000000"

20	android：textSize= "22.0dip" />

<TextView

22	android：id= "@+id/text2"

23	android：layout_width= "fill_parent"

24	android：layout_height= "fill_parent"

25	android：layout_weight= "1.0"

26	android：gravity= "center"

27	android：text= "页卡2"

28	android：textColor= "#000000"

29	android：textSize= "22.0dip" />

<TextView

31	android：id= "@+id/text3"

32	android：layout_width= "fill_parent"

33	android：layout_height= "fill_parent"

34	android：layout_weight= "1.0"

35	android：gravity= "center"

36	android：text= "页卡3"

37	android：textColor= "#000000"

38	android：textSize= "22.0dip" />

39	</LinearLayout>

40	<ImageView

41	android：id= "@+id/cursor"

42	android：layout_width= "fill_parent"

43	android：layout_height= "wrap_content"

44	android：scaleType= "matrix"

45	android：src= "@drawable/a" />

46	<android.support.v4.view.ViewPager

47	android：id= "@+id/vPager"

48	android：layout_width= "wrap_content"

49	android：layout_height= "wrap_content"

50	android：layout_gravity= "center"

51	android：layout_weight= "1.0"

52	android：background= "#000000"

53	android：flipInterval= "30"

54	android：persistentDrawingCache= "animation" />

55	</LinearLayout>

我们要展示三个页卡，所以还需要三个页卡内容的界面设计，这里我们只设置了背景颜色，能起到区别作用即可。

1	<?xml version= "1.0" encoding= "utf-8" ?>

2	<LinearLayout xmlns：android= "http：//schemas.android.com/apk/res/android"

3	android：layout_width= "fill_parent"

4	android：layout_height= "fill_parent"

5	android：orientation= "vertical"

6	android：background= "#158684" >

7	</LinearLayout>

四、代码部分要进行初始化的工作 (1) 先来变量的定义

1	private ViewPager mPager； //页卡内容

2	private List<View> listViews； // Tab页面列表

3	private ImageView cursor； // 动画图片

4	private TextView t1， t2， t3； // 页卡头标

5	private int offset = 0 ； // 动画图片偏移量

6	private int currIndex = 0 ； // 当前页卡编号

7	private int bmpW； // 动画图片宽度

　　（2）初始化头标

/**

* 初始化头标

*/

04	private void InitTextView（） {

05	t1 = （TextView） findViewById（R.id.text1）；

06	t2 = （TextView） findViewById（R.id.text2）；

07	t3 = （TextView） findViewById（R.id.text3）；

08	t1.setOnClickListener（ new MyOnClickListener（ 0 ））；

09	t2.setOnClickListener（ new MyOnClickListener（ 1 ））；

10	t3.setOnClickListener（ new MyOnClickListener（ 2 ））；

/**

* 头标点击监听

*/

04	public class MyOnClickListener implements View.OnClickListener {

05	private int index = 0 ；

06	public MyOnClickListener（ int i） {

index =i；

@Override

10	public void onClick（View v） {

11	mPager.setCurrentItem（index）；

}；

(3) 初始化页卡内容区

01	<font color= "#008000" ><font color= "black" >　　 /**

02	* ViewPager适配器

*/

04	public class MyPagerAdapter extends PagerAdapter {

05	public List<View> mListViews；

06	public MyPagerAdapter（List<View> mListViews） {

07	this .mListViews = mListViews；

@Override

10	public void destroyItem（View arg0， int arg1， Object arg2） {

11	（（ViewPager） arg0）.removeView（mListViews.get（arg1））；

@Override

14	public void finishUpdate（View arg0） {

@Override

17	public int getCount（） {

18	return mListViews.size（）；

@Override

21	public Object instantiateItem（View arg0， int arg1） {

22	（（ViewPager） arg0）.addView（mListViews.get（arg1）， 0 ）；

23	return mListViews.get（arg1）；

@Override

26	public boolean isViewFromObject（View arg0， Object arg1） {

27	return arg0 == （arg1）；

@Override

30	public void restoreState（Parcelable arg0， ClassLoader arg1） {

@Override

33	public Parcelable saveState（） {

34	return null ；

@Override

37	public void startUpdate（View arg0） {

40	</font></font>

这里我们实现了各页卡的装入和卸载 (4) 初始化动画

/**

* 初始化动画

*/

04	private void InitImageView（） {

05	cursor = （ImageView） findViewById（R.id.cursor）；

06	bmpW = BitmapFactory.decodeResource（getResources（）， R.drawable.a）

07	.getWidth（）； // 获取图片宽度

08	DisplayMetrics dm = new DisplayMetrics（）；

09	getWindowManager（）.getDefaultDisplay（）.getMetrics（dm）；

10	int screenW = dm.widthPixels； // 获取分辨率宽度

11	offset =（screenW / 3 - bmpW） / 2 ； // 计算偏移量

12	Matrix matrix = new Matrix（）；

13	matrix.postTranslate（offset， 0 ）；

14	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， 0， 0）；　　} else if （currIndex == 2） { 　　animation = new TranslateAnimation（two， 0， 0， 0）；　　} 　　break；　　case 1：　　if （currIndex == 0） { 　　animation = new TranslateAnimation（offset， one， 0， 0）；　　} else if （currIndex == 2） { 　　animation = new TranslateAnimation（two， one， 0， 0）；　　} 　　break；　　case 2：　　if （currIndex == 0） { 　　animation = new TranslateAnimation（offset， two， 0， 0）；　　} else if （currIndex == 1） { 　　animation = new TranslateAnimation（one， two， 0， 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） { 　　} 　　}
五、打完收工，快来看看自己的劳动成果吧

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航