Android ViewPaper实例

 

Android ViewPaper实例

2012-12-02 16:59 462人阅读 评论(1) 收藏 举报

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

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

04android：layout_width="fill_parent"

05android：layout_height="fill_parent"

06android：orientation="vertical" >

07<LinearLayout

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

09android：layout_width="fill_parent"

10android：layout_height="100.0dip"

11android：background="#FFFFFF" >

12<TextView

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

14android：layout_width="fill_parent"

15android：layout_height="fill_parent"

16android：layout_weight="1.0"

17android：gravity="center"

18android：text="页卡1"

19android：textColor="#000000"

20android：textSize="22.0dip" />

21<TextView

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

23android：layout_width="fill_parent"

24android：layout_height="fill_parent"

25android：layout_weight="1.0"

26android：gravity="center"

27android：text="页卡2"

28android：textColor="#000000"

29android：textSize="22.0dip" />

30<TextView

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

32android：layout_width="fill_parent"

33android：layout_height="fill_parent"

34android：layout_weight="1.0"

35android：gravity="center"

36android：text="页卡3"

37android：textColor="#000000"

38android：textSize="22.0dip" />

39</LinearLayout>

40<ImageView

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

42android：layout_width="fill_parent"

43android：layout_height="wrap_content"

44android：scaleType="matrix"

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

46<android.support.v4.view.ViewPager

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

48android：layout_width="wrap_content"

49android：layout_height="wrap_content"

50android：layout_gravity="center"

51android：layout_weight="1.0"

52android：background="#000000"

53android：flipInterval="30"

54android：persistentDrawingCache="animation" />

55</LinearLayout>

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

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

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

3android：layout_width="fill_parent"

4android：layout_height="fill_parent"

5android：orientation="vertical"

6android：background="#158684" >

7</LinearLayout>

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

1private ViewPager mPager；//页卡内容

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

3private ImageView cursor；// 动画图片

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

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

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

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

　　（2） 初始化头标

01/**

02* 初始化头标

03*/

04private void InitTextView（） {

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

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

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

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

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

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

11}

01/**

02* 头标点击监听

03*/

04public class MyOnClickListener implements View.OnClickListener {

05private int index = 0；

06public MyOnClickListener（int i） {

07index = i；

08}

09@Override

10public void onClick（View v） {

11mPager.setCurrentItem（index）；

12}

13

}；

(3) 初始化页卡内容区

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

02　　* ViewPager适配器

03　　*/

04　　public class MyPagerAdapter extends PagerAdapter {

05　　public List<View> mListViews；

06　　public MyPagerAdapter（List<View> mListViews） {

07　　this.mListViews = mListViews；

08　　}

09　　@Override

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

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

12　　}

13　　@Override

14　　public void finishUpdate（View arg0） {

15　　}

16　　@Override

17　　public int getCount（） {

18　　return mListViews.size（）；

19　　}

20　　@Override

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

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

23　　return mListViews.get（arg1）；

24　　}

25　　@Override

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

27　　return arg0 == （arg1）；

28　　}

29　　@Override

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

31　　}

32　　@Override

33　　public Parcelable saveState（） {

34　　return null；

35　　}

36　　@Override

37　　public void startUpdate（View arg0） {

38　　}

39　　}

40</font></font>

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

01/**

02* 初始化动画

03*/

04private void InitImageView（） {

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

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

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

08DisplayMetrics dm = new DisplayMetrics（）；

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

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

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

12Matrix matrix = new Matrix（）；

13matrix.postTranslate（offset， 0）；

14cursor.setImageMatrix（matrix）；// 设置动画初始位置

15}

根据屏幕的分辨率和图片的宽度计算动画移动的偏移量 　　/** 　　* 页卡切换监听 　　*/ 　　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） { 　　} 　　}
五、打完收工，快来看看自己的劳动成果吧

转自：geniuseoe2012

分享到： 

上一篇：android 滑动页面入门

下一篇：写给读者的话