ViewPager
传送门：Android开发者如何日进斗金，手把手教你教你APP推广和盈利的方案
一、首先，我们来看一下效果图，这是新浪微博的Tab滑动效果。我们可以手势滑动，也可以点击上面的头标进行切换。与此同方式，
白色横条会移动到相应的页卡头标下。这是一个动画效果，白条是缓慢滑动过去的。好了，接下来我们就来实现它。
二、在开始前，我们先要认识一个控件，ViewPager。它是google SDk中自带的一个附加包的一个类，可以用来实现屏幕间的切换。
这个附加包是android-support-v4.jar，在最后的源码中会提供给大家，在libs文件夹中。当然你也可以自己从网上搜索最新的版本。
找到它后，我们需要在项目中添加
三、我们先做界面，
界面设计很简单，第一行三个头标，第二行动画图片，第三行页卡内容展示。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:umadsdk="http://schemas.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://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
android:background="#158684">
</LinearLayout>
四、代码部分要进行初始化的工作
(1) 先来变量的定义
privateViewPager mPager;//页卡内容
privateList<View> listViews; //Tab页面列表
privateImageView cursor;//动画图片
privateTextView t1, t2, t3;//页卡头标
privateintoffset = 0;//动画图片偏移量
privateintcurrIndex = 0;//当前页卡编号
privateintbmpW;//动画图片宽度
(2) 初始化头标
1/**
2* 初始化头标
3*/
4privatevoidInitTextView() {
5t1 = (TextView) findViewById(R.id.text1);
6t2 = (TextView) findViewById(R.id.text2);
7t3 = (TextView) findViewById(R.id.text3);
8
9t1.setOnClickListener(newMyOnClickListener(0));
10t2.setOnClickListener(newMyOnClickListener(1));
11t3.setOnClickListener(newMyOnClickListener(2));
12}
1/**
2* 头标点击监听
3*/
4publicclassMyOnClickListener implementsView.OnClickListener {
5privateintindex = 0;
6
7publicMyOnClickListener(inti) {
8index = i;
9}
10
11@Override
12publicvoidonClick(View v) {
13mPager.setCurrentItem(index);
14}
15};
相信大家看后都没什么问题，点击第几个，就展示第几个页卡内容。
(3) 初始化页卡内容区
1/**
2* 初始化ViewPager
3*/
4privatevoidInitViewPager() {
5mPager = (ViewPager) findViewById(R.id.vPager);
6listViews = newArrayList<View>();
7LayoutInflater mInflater = getLayoutInflater();
8listViews.add(mInflater.inflate(R.layout.lay1, null));
9listViews.add(mInflater.inflate(R.layout.lay2, null));
10listViews.add(mInflater.inflate(R.layout.lay3, null));
11mPager.setAdapter(newMyPagerAdapter(listViews));
12mPager.setCurrentItem(0);
13mPager.setOnPageChangeListener(newMyOnPageChangeListener());
14}
我们将三个页卡界面装入其中，默认显示第一个页卡。这里我们还需要实现一个适配器。
1/**
2* ViewPager适配器
3*/
4publicclassMyPagerAdapter extendsPagerAdapter {
5publicList<View> mListViews;
6
7publicMyPagerAdapter(List<View> mListViews) {
8this.mListViews = mListViews;
9}
10
11@Override
12publicvoiddestroyItem(View arg0, intarg1, Object arg2) {
13((ViewPager) arg0).removeView(mListViews.get(arg1));
14}
15
16@Override
17publicvoidfinishUpdate(View arg0) {
18}
19
20@Override
21publicintgetCount() {
22returnmListViews.size();
23}
24
25@Override
26publicObject instantiateItem(View arg0, intarg1) {
27((ViewPager) arg0).addView(mListViews.get(arg1), 0);
28returnmListViews.get(arg1);
29}
30
31@Override
32publicbooleanisViewFromObject(View arg0, Object arg1) {
33returnarg0 == (arg1);
34}
35
36@Override
37publicvoidrestoreState(Parcelable arg0, ClassLoader arg1) {
38}
39
40@Override
41publicParcelable saveState() {
42returnnull;
43}
44
45@Override
46publicvoidstartUpdate(View arg0) {
47}
48}
这里我们实现了各页卡的装入和卸载
(3) 初始化动画
1/**
2* 初始化动画
3*/
4privatevoidInitImageView() {
5cursor = (ImageView) findViewById(R.id.cursor);
6bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a)
7.getWidth();//获取图片宽度
8DisplayMetrics dm = newDisplayMetrics();
9getWindowManager().getDefaultDisplay().getMetrics(dm);
10intscreenW = dm.widthPixels;//获取分辨率宽度
11offset = (screenW / 3 - bmpW) / 2;//计算偏移量
12Matrix matrix = newMatrix();
13matrix.postTranslate(offset, 0);
14cursor.setImageMatrix(matrix);//设置动画初始位置
15}
根据屏幕的分辨率和图片的宽度计算动画移动的偏移量
实现页卡切换监听
1/**
2* 页卡切换监听
3*/
4publicclassMyOnPageChangeListener implementsOnPageChangeListener {
5
6intone = offset * 2 + bmpW;//页卡1 -> 页卡2 偏移量
7inttwo = one * 2;//页卡1 -> 页卡3 偏移量
8
9@Override
10publicvoidonPageSelected(intarg0) {
11Animation animation = null;
12switch(arg0) {
13case0:
14if(currIndex == 1) {
15animation = newTranslateAnimation(one, 0, 0, 0);
16} elseif(currIndex == 2) {
17animation = newTranslateAnimation(two, 0, 0, 0);
18}
19break;
20case1:
21if(currIndex == 0) {
22animation = newTranslateAnimation(offset, one, 0, 0);
23} elseif(currIndex == 2) {
24animation = newTranslateAnimation(two, one, 0, 0);
25}
26break;
27case2:
28if(currIndex == 0) {
29animation = newTranslateAnimation(offset, two, 0, 0);
30} elseif(currIndex == 1) {
31animation = newTranslateAnimation(one, two, 0, 0);
32}
33break;
34}
35currIndex = arg0;
36animation.setFillAfter(true);//True:图片停在动画结束位置
37animation.setDuration(300);
38cursor.startAnimation(animation);
39}
40
41@Override
42publicvoidonPageScrolled(intarg0, floatarg1, intarg2) {
43}
44
45@Override
46publicvoidonPageScrollStateChanged(intarg0) {
47}
48}
五、打完收工，快来看看自己的劳动成果吧
浙公网安备 33010602011771号