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

一、首先，我们来看一下效果图，这是新浪微博的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" >

12

<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" />

21

<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" />

30

<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） 初始化头标

01

/**

02

* 初始化头标

03

*/

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））；

11

}

01

/**

02

* 头标点击监听

03

*/

04	public class MyOnClickListener implements View.OnClickListener {

05	private int index = 0；

06	public MyOnClickListener（int i） {

07	index = i；

08

}

09

@Override

10	public void onClick（View v） {

11	mPager.setCurrentItem（index）；

12

}

13

}；

相信大家看后都没什么问题，点击第几个，就展示第几个页卡内容。