一、首先，我们来看一下效果图，这是新浪微博的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
|
08
|
<LinearLayout
|
09
|
android:id="@+id/linearLayout1"
|
10
|
android:layout_width="fill_parent"
|
11
|
android:layout_height="100.0dip"
|
12
|
android:background="#FFFFFF" >
|
13
|
14
|
<TextView
|
15
|
android:id="@+id/text1"
|
16
|
android:layout_width="fill_parent"
|
17
|
android:layout_height="fill_parent"
|
18
|
android:layout_weight="1.0"
|
19
|
android:gravity="center"
|
20
|
android:text="页卡1"
|
21
|
android:textColor="#000000"
|
22
|
android:textSize="22.0dip" />
|
23
|
24
|
<TextView
|
25
|
android:id="@+id/text2"
|
26
|
android:layout_width="fill_parent"
|
27
|
android:layout_height="fill_parent"
|
28
|
android:layout_weight="1.0"
|
29
|
android:gravity="center"
|
30
|
android:text="页卡2"
|
31
|
android:textColor="#000000"
|
32
|
android:textSize="22.0dip" />
|
33
|
34
|
<TextView
|
35
|
android:id="@+id/text3"
|
36
|
android:layout_width="fill_parent"
|
37
|
android:layout_height="fill_parent"
|
38
|
android:layout_weight="1.0"
|
39
|
android:gravity="center"
|
40
|
android:text="页卡3"
|
41
|
android:textColor="#000000"
|
42
|
android:textSize="22.0dip" />
|
43
|
</LinearLayout>
|
44
|
45
|
<ImageView
|
46
|
android:id="@+id/cursor"
|
47
|
android:layout_width="fill_parent"
|
48
|
android:layout_height="wrap_content"
|
49
|
android:scaleType="matrix"
|
50
|
android:src="@drawable/a" />
|
51
|
52
|
<android.support.v4.view.ViewPager
|
53
|
android:id="@+id/vPager"
|
54
|
android:layout_width="wrap_content"
|
55
|
android:layout_height="wrap_content"
|
56
|
android:layout_gravity="center"
|
57
|
android:layout_weight="1.0"
|
58
|
android:background="#000000"
|
59
|
android:flipInterval="30"
|
60
|
android:persistentDrawingCache="animation" />
|
61
|
62
|
</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;//
动画图片宽度
|
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
|
|
09
|
t1.setOnClickListener(new MyOnClickListener(0));
|
10
|
t2.setOnClickListener(new MyOnClickListener(1));
|
11
|
t3.setOnClickListener(new MyOnClickListener(2));
|
12
|
}
|
01
|
/**
|
02
|
*
头标点击监听
|
03
|
*/
|
04
|
public class MyOnClickListener implements View.OnClickListener
{
|
05
|
private int index
= 0;
|
06
|
|
07
|
public MyOnClickListener(int i)
{
|
08
|
index
= i;
|
09
|
}
|
10
|
|
11
|
@Override
|
12
|
public void onClick(View
v) {
|
13
|
mPager.setCurrentItem(index);
|
14
|
}
|
15
|
};
|
相信大家看后都没什么问题，点击第几个，就展示第几个页卡内容。
(3) 初始化页卡内容区
01
|
/**
|
02
|
*
初始化ViewPager
|
03
|
*/
|
04
|
private void InitViewPager()
{
|
05
|
mPager
= (ViewPager) findViewById(R.id.vPager);
|
06
|
listViews
= new ArrayList<View>();
|
07
|
LayoutInflater
mInflater = getLayoutInflater();
|
08
|
listViews.add(mInflater.inflate(R.layout.lay1, null));
|
09
|
listViews.add(mInflater.inflate(R.layout.lay2, null));
|
10
|
listViews.add(mInflater.inflate(R.layout.lay3, null));
|
11
|
mPager.setAdapter(new MyPagerAdapter(listViews));
|
12
|
mPager.setCurrentItem(0);
|
13
|
mPager.setOnPageChangeListener(new MyOnPageChangeListener());
|
14
|
}
|
我们将三个页卡界面装入其中，默认显示第一个页卡。这里我们还需要实现一个适配器。
01
|
/**
|
02
|
*
ViewPager适配器
|
03
|
*/
|
04
|
public class MyPagerAdapter extends PagerAdapter
{
|
05
|
public List<View>
mListViews;
|
06
|
|
07
|
public MyPagerAdapter(List<View>
mListViews) {
|
08
|
this.mListViews
= mListViews;
|
09
|
}
|
10
|
|
11
|
@Override
|
12
|
public void destroyItem(View
arg0, int arg1,
Object arg2) {
|
13
|
((ViewPager)
arg0).removeView(mListViews.get(arg1));
|
14
|
}
|
15
|
|
16
|
@Override
|
17
|
public void finishUpdate(View
arg0) {
|
18
|
}
|
19
|
|
20
|
@Override
|
21
|
public int getCount()
{
|
22
|
return mListViews.size();
|
23
|
}
|
24
|
|
25
|
@Override
|
26
|
public Object
instantiateItem(View arg0, int arg1)
{
|
27
|
((ViewPager)
arg0).addView(mListViews.get(arg1), 0);
|
28
|
return mListViews.get(arg1);
|
29
|
}
|
30
|
|
31
|
@Override
|
32
|
public boolean isViewFromObject(View
arg0, Object arg1) {
|
33
|
return arg0
== (arg1);
|
34
|
}
|
35
|
|
36
|
@Override
|
37
|
public void restoreState(Parcelable
arg0, ClassLoader arg1) {
|
38
|
}
|
39
|
|
40
|
@Override
|
41
|
public Parcelable
saveState() {
|
42
|
return null;
|
43
|
}
|
44
|
|
45
|
@Override
|
46
|
public void startUpdate(View
arg0) {
|
47
|
}
|
48
|
}
|
这里我们实现了各页卡的装入和卸载
(3) 初始化动画
01
|
/**
|
02
|
*
初始化动画
|
03
|
*/
|
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);//
设置动画初始位置
|
15
|
}
|
根据屏幕的分辨率和图片的宽度计算动画移动的偏移量
实现页卡切换监听
01
|
/**
|
02
|
*
页卡切换监听
|
03
|
*/
|
04
|
public class MyOnPageChangeListener implements OnPageChangeListener
{
|
05
|
|
06
|
int one
= offset * 2 +
bmpW;//
页卡1 -> 页卡2 偏移量
|
07
|
int two
= one * 2;//
页卡1 -> 页卡3 偏移量
|
08
|
|
09
|
@Override
|
10
|
public void onPageSelected(int arg0)
{
|
11
|
Animation
animation = null;
|
12
|
switch (arg0)
{
|
13
|
case 0:
|
14
|
if (currIndex
== 1)
{
|
15
|
animation
= new TranslateAnimation(one, 0, 0, 0);
|
16
|
} else if (currIndex
== 2)
{
|
17
|
animation
= new TranslateAnimation(two, 0, 0, 0);
|
18
|
}
|
19
|
break;
|
20
|
case 1:
|
21
|
if (currIndex
== 0)
{
|
22
|
animation
= new TranslateAnimation(offset,
one, 0, 0);
|
23
|
} else if (currIndex
== 2)
{
|
24
|
animation
= new TranslateAnimation(two,
one, 0, 0);
|
25
|
}
|
26
|
break;
|
27
|
case 2:
|
28
|
if (currIndex
== 0)
{
|
29
|
animation
= new TranslateAnimation(offset,
two, 0, 0);
|
30
|
} else if (currIndex
== 1)
{
|
31
|
animation
= new TranslateAnimation(one,
two, 0, 0);
|
32
|
}
|
33
|
break;
|
34
|
}
|
35
|
currIndex
= arg0;
|
36
|
animation.setFillAfter(true);//
True:图片停在动画结束位置
|
37
|
animation.setDuration(300);
|
38
|
cursor.startAnimation(animation);
|
39
|
}
|
40
|
|
41
|
@Override
|
42
|
public void onPageScrolled(int arg0, float arg1, int arg2)
{
|
43
|
}
|
44
|
|
45
|
@Override
|
46
|
public void onPageScrollStateChanged(int arg0)
{
|
47
|
}
|
48
|
}
|
五、打完收工，快来看看自己的劳动成果吧
源码分享：http://115.com/file/dpi0unyg
转自：http://www.cnblogs.com/dwinter/archive/2012/02/27/2369590.html