zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    考在职还是全日制?
    ARP欺骗病毒攻击
    AutoCAD2006安装错误之解决
    WINCE下创建多个文件分区
    在WINCE5.0中应用CMD(比如运行PING命令)
    WinCE 应用程序开机自动方法
    Wince 添加中文字库
    WinCE内核裁减(中文字体)及字库和内核的分离(转)
    WINCE基于CH7024实现TV OUT (VGA)功能
    WINCE6.0 中文支持
  • 原文地址:https://www.cnblogs.com/jzssuanfa/p/6936302.html
Copyright © 2011-2022 走看看