首页 > 代码库 > android ViewPager实现 跑马灯切换图片+多种切换动画
android ViewPager实现 跑马灯切换图片+多种切换动画
近期在弄个项目。要求有跑马灯效果的图片展示。
网上搜了一堆，都没有完美实现的算了还是自己写吧！
实现原理利用 ViewPager 控件，这个控件本身就支持滑动翻页非常好非常强大好多功能都能用上它。利用mViewPager.setCurrentItem(currentIndex); 来实现切换当前显示的view
在加一个定时器不断设置setCurrentItem 来实现跑马灯效果。
一。主要实现类 凝视非常具体了 一看就知道了
package com.example.marqueeimage;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.Timer;
import java.util.TimerTask;
import com.example.marqueeimage.adapter.MarqueeAdapter;
import com.example.marqueeimage.transforms.ABaseTransformer;
import android.annotation.SuppressLint;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;
public class MarqueeImage extends LinearLayout{
private ViewPager mViewPager;
private ArrayList<View> mPageViewList=new ArrayList<View>();//数据??
private ImageView mImageView;
private ImageView[] mImageViews;
//主布????部指示当前页面的小圆点视图，LinearLayout
private ViewGroup indicatorViewGroup;
private LayoutInflater mInflater;//定义LayoutInflater
private MarqueeAdapter marqueeAdapter;//适配??
private Timer mTimer=null;//定时??
public int currentIndex=0;//当前显示View页面的序号
private Handler mHandler;//处理更换图片消息
private FixedSpeedScroller scroller=null;
private Context mContext;
public MarqueeImage(Context context) {
super(context);
init(context);
}
public MarqueeImage(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
private void init(Context context){
mContext=context;
LayoutInflater.from(mContext).inflate(R.layout.marquee_image, this);
mViewPager = (ViewPager) findViewById(R.id.marquee_image_viewpager);
indicatorViewGroup = (ViewGroup) findViewById(R.id.marquee_image_bottomviewgroup);
mViewPager.setOnPageChangeListener(new pageChangeListener());
mViewPager.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction()==MotionEvent.ACTION_DOWN){
stopAutoScroller();
setScrollerTime(100);
}else if(event.getAction()==MotionEvent.ACTION_UP){
startAutoScroller();
}
return false;
}
});
marqueeAdapter=new MarqueeAdapter();
mViewPager.setAdapter(marqueeAdapter);
initHandle();
}
/**
* 设置滑动动画
* mViewPager.setPageTransformer(true,new CubeOutTransformer());
mViewPager.setPageTransformer(true,new AccordionTransformer());
mViewPager.setPageTransformer(true,new FlipHorizontalTransformer());
mViewPager.setPageTransformer(true,new RotateUpTransformer());
mViewPager.setPageTransformer(true,new ZoomOutTranformer());
mViewPager.setPageTransformer(true,new ZoomOutSlideTransformer());
mViewPager.setPageTransformer(true,new TabletTransformer());
*/
public void setScrollerAnimation(ABaseTransformer animation){
mViewPager.setPageTransformer(true,animation);
}
/**
* 開始自己主动滚动
*/
public boolean startAutoScroller(){
return startTime();
}
/**
* 停止自己主动滚动
*/
public boolean stopAutoScroller(){
if(mTimer!=null){
mTimer.cancel();
mTimer=null;
return true;
}else{
return false;
}
}
/**
* 初始化Handle
*/
public void initHandle(){
mHandler = new Handler() {
@SuppressLint("NewApi") public void handleMessage(Message msg) {
if(msg.what==1){
setScrollerTime(700);
mViewPager.setCurrentItem(currentIndex);
if(mPageViewList.size()-1==currentIndex){
currentIndex=0;
}else{
currentIndex++;
}
}
};
};
}
/**
* 设置滑动时间
*/
public void setScrollerTime(int scrollerTime){
try {
if(scroller!=null){
scroller.setTime(scrollerTime);
}else{
Field mScroller;
mScroller = ViewPager.class.getDeclaredField("mScroller");
mScroller.setAccessible(true);
scroller= new FixedSpeedScroller(mViewPager.getContext(),new AccelerateInterpolator());
scroller.setTime(scrollerTime);
mScroller.set(mViewPager, scroller);
}
} catch (Exception e) {
}
}
/**
* 创建底部的导航条
*/
public void createNavBar(){
mImageViews = new ImageView[mPageViewList.size()];
for (int i = 0; i < mImageViews.length; i++) {
mImageView = new ImageView(mContext);
mImageView.setLayoutParams(new LayoutParams(20,20));
mImageView.setPadding(20, 0, 20, 0);
if (i == 0) {
mImageView.setBackgroundResource(R.drawable.page_indicator_focused);
} else {
mImageView.setBackgroundResource(R.drawable.page_indicator);
}
mImageViews[i] = mImageView;
//把指示作用的远点图片加入底部的视图中
indicatorViewGroup.addView(mImageViews[i]);
}
}
class pageChangeListener implements OnPageChangeListener{
@Override
public void onPageSelected(int arg0) {
// TODO Auto-generated method stub
for (int i = 0; i < mImageViews.length; i++) {
if(i == arg0) {
mImageViews[i].setBackgroundResource(R.drawable.page_indicator_focused);
} else {
mImageViews[i].setBackgroundResource(R.drawable.page_indicator);
}
}
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
}
/**
* 启动计时
*/
private boolean startTime(){
if(mTimer==null){
mTimer = new Timer();
mTimer.schedule(new TimerTask() {
@Override
public void run() {
Message msg=new Message();
msg.what=1;
mHandler.sendMessage(msg);
}
},2000,2000); //每2秒运行一次
return true;
}else{
return false;
}
}
/**
* 设置数据
* @param mPageViews
*/
public void setData(ArrayList<View> pageViewList){
if(pageViewList!=null){
this.mPageViewList=pageViewList;
marqueeAdapter.setData(mPageViewList);//加入数据
marqueeAdapter.notifyDataSetChanged();//通知数据发生改变??
createNavBar();//依据数据。创建导航条
}
}
/**
* 清理所有数据
*/
public void clearData(){
if(this.mPageViewList!=null){
this.mPageViewList.clear();
}
mViewPager.removeAllViews();
indicatorViewGroup.removeAllViews();
}
}
二。ViewPager的适配器也非常easy
package com.example.marqueeimage.adapter;
import java.util.ArrayList;
import android.os.Parcelable;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
/**
* @author fcm
* @Create at 2013-8-27 下午2:48:34
* @Version 1.0
* <p>
Features draft description.
主要功能介绍
</p>
*/
public class MarqueeAdapter extends PagerAdapter{
private ArrayList<View> mPageViews=new ArrayList<View>();
/**
* 加入数据
* @param mPageViews
*/
public void setData(ArrayList<View> mPageViews){
this.mPageViews=mPageViews;
}
@Override
public int getCount() {
return mPageViews.size();
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public int getItemPosition(Object object) {
// TODO Auto-generated method stub
return super.getItemPosition(object);
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
// TODO Auto-generated method stub
((ViewPager) arg0).removeView(mPageViews.get(arg1));
}
@Override
public Object instantiateItem(View arg0, int arg1) {
// TODO Auto-generated method stub
((ViewPager) arg0).addView(mPageViews.get(arg1));
return mPageViews.get(arg1);
}
@Override
public void restoreState(Parcelable arg0, ClassLoader arg1) {
// TODO Auto-generated method stub
}
@Override
public Parcelable saveState() {
// TODO Auto-generated method stub
return null;
}
@Override
public void startUpdate(View arg0) {
// TODO Auto-generated method stub
}
@Override
public void finishUpdate(View arg0) {
// TODO Auto-generated method stub
}
}
三。控制滑动速度 这个非常重要 设置自己主动滚动默认的速度的非常快 效果非常差，用FixedSpeedScroller继承Scroller来实现控制viewpaper滑动速度 这部分来自网络
package com.example.marqueeimage;
import android.annotation.SuppressLint;
import android.content.Context;
import android.view.animation.Interpolator;
import android.widget.Scroller;
public class FixedSpeedScroller extends Scroller {
private int mDuration =500;
public void setTime(int scrollerTime){
mDuration=scrollerTime;
}
public FixedSpeedScroller(Context context) {
super(context);
}
public FixedSpeedScroller(Context context, Interpolator interpolator) {
super(context, interpolator);
}
@SuppressLint("NewApi") public FixedSpeedScroller(Context context, Interpolator interpolator, boolean flywheel) {
super(context, interpolator, flywheel);
}
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
// Ignore received duration, use fixed one instead
super.startScroll(startX, startY, dx, dy, mDuration);
}
@Override
public void startScroll(int startX, int startY, int dx, int dy) {
// Ignore received duration, use fixed one instead
super.startScroll(startX, startY, dx, dy, mDuration);
}
}
四。布局文件：
<?xml version="1.0" encoding="utf-8"?五。> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/marquee_image_layout" android:orientation="vertical"> <!--拖动 --> <android.support.v4.view.ViewPager android:id="@+id/marquee_image_viewpager" android:layout_width="wrap_content" android:layout_height="0dp" android:layout_weight="1" /> <LinearLayout android:id="@+id/marquee_image_bottomviewgroup" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center_horizontal" android:orientation="horizontal" > </LinearLayout> </LinearLayout>
最后一步就是改动默认动画，实现比較绚丽的效果 这部分来自网络 大约有10种左右动画吧
源代码下载地址：http://download.csdn.net/download/nn955/7465547
android ViewPager实现 跑马灯切换图片+多种切换动画