Jacular

浏览: 185311 次
性别:
来自: 云南

最近访客更多访客>>

onekobe10

necmy

wwb_hh123

韩与你

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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

博客分类：

安卓

ViewPager多页面滑动切换以及动画效果 (转载)

http://www.eoeandroid.com/thread-157771-1-1.html 、http://www.eoeandroid.com/forum.php?mod=viewthread&tid=164918&page=1

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

我们要展示三个页卡，所以还需要三个页卡内容的界面设计，这里我们只设置了背景颜色，能起到区别作用即可。既然是三个layout，就要有三个下面这样的布局文件。

<?
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) 先来变量的定义
private ViewPager mPager;// 页卡内容
private List<View> listViews; // Tab页面列表
private ImageView cursor;// 动画图片
private TextView t1, t2, t3;// 页卡头标
private int offset = 0;// 动画图片偏移量
private int currIndex = 0;// 当前页卡编号
private int bmpW;// 动画图片宽度

(2) 初始化头标

/**

* 初始化头标

*/

private
 void
 InitTextView() {
t1 
= (TextView) findViewById(R.id.text1);
t2 
= (TextView) findViewById(R.id.text2);
t3 
= (TextView) findViewById(R.id.text3);

t1.setOnClickListener(
new
 MyOnClickListener(0));
t2.setOnClickListener(
new
 MyOnClickListener(1));
t3.setOnClickListener(
new
 MyOnClickListener(2));
}

/**

* 头标点击监听

*/

public
 class
 MyOnClickListener implements
 View.OnClickListener {

private
 int
 index = 0;


public
 MyOnClickListener(int
 i) {
index 
= i;
}

@Override

public
 void
 onClick(View v) {
mPager.setCurrentItem(index);
}
};

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

(3) 初始化页卡内容区

/**

* 初始化ViewPager

*/

private
 void
 InitViewPager() {
mPager 
= (ViewPager) findViewById(R.id.vPager);
listViews 
= new
 ArrayList<View>();
LayoutInflater mInflater 
= getLayoutInflater();
listViews.add(mInflater.inflate(R.layout.lay1, 
null
));
listViews.add(mInflater.inflate(R.layout.lay2, 
null
));
listViews.add(mInflater.inflate(R.layout.lay3, 
null
));
mPager.setAdapter(
new
 MyPagerAdapter(listViews));
mPager.setCurrentItem(
0);
mPager.setOnPageChangeListener(
new
 MyOnPageChangeListener());
}

我们将三个页卡界面装入其中，默认显示第一个页卡。这里我们还需要实现一个适配器。

/**

* ViewPager适配器

*/

public
 class
 MyPagerAdapter extends
 PagerAdapter {

public
 List<View> mListViews;


public
 MyPagerAdapter(List<View> mListViews) {

this
.mListViews = mListViews;
}

@Override

public
 void
 destroyItem(View arg0, int
 arg1, Object arg2) {
((ViewPager) arg0).removeView(mListViews.get(arg1));
}

@Override

public
 void
 finishUpdate(View arg0) {
}

@Override

public
 int
 getCount() {

return
 mListViews.size();
}

@Override

public
 Object instantiateItem(View arg0, int
 arg1) {
((ViewPager) arg0).addView(mListViews.get(arg1), 
0);

return
 mListViews.get(arg1);
}

@Override

public
 boolean
 isViewFromObject(View arg0, Object arg1) {

return
 arg0 == (arg1);
}

@Override

public
 void
 restoreState(Parcelable arg0, ClassLoader arg1) {
}

@Override

public
 Parcelable saveState() {

return
 null
;
}

@Override

public
 void
 startUpdate(View arg0) {
}
}

这里我们实现了各页卡的装入和卸载

(4) 初始化动画

/**

* 初始化动画

*/

private
 void
 InitImageView() {
cursor 
= (ImageView) findViewById(R.id.cursor);
bmpW 
= BitmapFactory.decodeResource(getResources(), R.drawable.a)
.getWidth();
//
 获取图片宽度

DisplayMetrics dm = new
 DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

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

offset = (screenW / 3 - bmpW) / 2;//
 计算偏移量

Matrix matrix = new
 Matrix();
matrix.postTranslate(offset, 
0);
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) {
}
}

OK，到现在就完成了，下面是效果图：

在网上看到了viewpager之后自己看了看，效果不错，同样eoe社区也有很多相关的文章，比如http://www.eoeandroid.com/forum.php?mod=viewthread&tid=157771&page=21#pid1384160 ，大家可以看看，使用viewpager的时候大家不要忘了导入android-support-v4.jar这个包，自己可以去下载。
但是在使用的时候发现以上找到的viewpager不能实现循环滑动，这对于用户体验可能不是太好，所以自己又开始在此基础上寻找其他的方法，最终发现了以下解决办法：
将MyPagerAdapter修改一下：
/**
* ViewPager适配器
*/
public class MyPagerAdapter extends PagerAdapter {
public List<View> views;
Context context;
int mCount;
public MyPagerAdapter(Context context,List<View> views) {
this.views = views;
this.context=context;
mCount = views.size();
}
@Override
public void destroyItem(View collection, int position, Object arg2) {
if (position >= views.size()) {
int newPosition = position%views.size();
position = newPosition;
// ((ViewPager) collection).removeView(views.get(position));
}
if(position <0){
position = -position;
// ((ViewPager) collection).removeView(views.get(position));
}
}
@Override
public void finishUpdate(View arg0) {
}
@Override
public int getCount() {
return mCount+1;//此处+1才能向右连续滚动
}
@Override
public Object instantiateItem(View collection, int position) {
if (position >= views.size()) {
int newPosition = position%views.size();

position = newPosition;
mCount++;
}
if(position <0){
position = -position;
mCount--;
}
try {
((ViewPager) collection).addView(views.get(position), 0);
} catch (Exception e) {
}
return views.get(position);
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == (object);
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
}
@Override
public Parcelable saveState() {
return null;
}
@Override
public void startUpdate(View arg0) {
}
}
同时如果你要的效果里面有上面链接中的那个白色的动画效果，同样也需要再修改一个地方
/**
* 页卡切换监听,用于改变动画位置
*/
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;
if(arg0>2){
arg0=arg0%3;
}
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) {
}
}
这样一来，其他地方不需要修改，即可实现viewpager的循环滑动效果

自己继续修改了以下，发现可以实现向左无限循环（貌似是无限）的，我的方法如下
有几个方法做以下改动就行了：@Override
public void destroyItem(View collection, int position, Object arg2) {
//循环滑动时此处不能销毁
// ((ViewPager) collection).removeView(views.get(position%views.size()));
}

@Override
public void finishUpdate(View arg0) {
}

@Override
public int getCount() {
return Integer.MAX_VALUE;//设置成最大值以便循环滑动
}

@Override
public Object instantiateItem(View collection, int position) {
try {
((ViewPager) collection).addView(views.get(position%views.size()), 0);
} catch (Exception e) {
}
return views.get(position%views.size());
}

最后再初始化页面时mPager.setCurrentItem(3*100);//设置初始页面，为0的话开始不能向左滑动
这样的话就能实现类似的无限循环（向左其实只有100次，只是一般没人会在那儿向左移动那么多次而已）

分享到：

Android应用程序框架 | Android之屏幕适配

2012-08-01 23:05
浏览 1242
评论(0)
分类:移动开发
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

ViewPager多页面滑动切换以及动画效果 (转载)

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

ViewPager多页面滑动切换以及动画效果 (转载)

评论

发表评论

相关推荐

实现android版 喝优团 引入第三方QQ登录

android版喝优团

android论坛网站，里面可以找到很多案例源码

Android手机中获取手机号码和运营商信息

Android+JNI调用–文件操作

Android的NDK开发

Android的NDK开发(5)————Android JNI层实现文件的read、write与seek操作

Eclipse NDK 配置

八款开源 Android 游戏引擎

Android连接SQLServer详细教程（数据库+服务器+客户端）

Android adb shell 命令

安卓巴士总结了近百个Android优秀开源项目，覆盖Android开发的每个领域

android实现显示阳历和农历源码

android 字体使用自定义的.ttf文件

Android 文件打开方式

详解Android中AsyncTask的使用（简单易懂

build.prop详解之修改ROM中默认语言，默认铃声，默认时区，版本信息打造个性rom

Android系统默认值的设置

android系统开发设置

ANDROID 隐藏 任务栏 systemui systembar 全屏显示

最近访客更多访客>>

实现android版喝优团引入第三方QQ登录

ANDROID 隐藏任务栏 systemui systembar 全屏显示