自动平滑轮播左右循环view

Posted 2022-12-06 TC风之翼

自动轮播左右循环view

具体原理：主要是利用设置viewgaper的count总数为int最大值，然后取position余数计算当前显示的item，为了第0页可以切换到最后一页，所以稍微处理了下，把初始位置改为1000*item的总数。利用scroller控制自动切换时的速度，把具体的view的添加以及加载开放出来，提高复用性。如有问题，请留言。

• 效果图，不会传GIF

- 自定义view类

/**
 * 广告图片自动轮播控件
 * -----介绍------
 * bind--绑定数据源以及初始化图片循环控件
 * setIsAutoScrollEnable-- 设置自动滚动是否可用
 * setAutoScrollDuration--设置自动滚动一页的时间
 * getViewPager--获取viewpager对象 ，可用来设置transform等
 * startImageCycle--开始轮播(手动控制自动轮播与否，便于资源控制)
 * pushImageCycle-- 暂停轮播——用于节省资源
 * ImageCycleViewListener-- 图片循环监听当前页，用来加载当前页图片以及设置点击事件
 * -----介绍------
 * 效果说明：本view可以带动画（自行设置transform）以及平滑的切换图片，支持无限循环。
 * by tc
 */
public class ImageCycleView<T extends View> extends LinearLayout 

    /**
     * 上下文
     */
    private Context mContext;

    /**
     * 图片轮播视图
     */
    private ViewPager mViewPager;

    /**
     * 图片轮播指示器控件
     */
    private ViewGroup mIndicatorGroup;

    /**
     * 滚动图片指示器-视图列表
     */
    private ImageView[] mImageViews;

    /**
     * 图片滚动当前图片下标
     */
    private int mImageSelectIndex = 0;

    /**
     * 手机密度
     */
    private float mScale;

    /**
     * viewpager 滑动
     */
    private ViewPagerScroller mScroller;
    /**
     * 自动滚动是否可用，默认可以
     */
    private boolean mIsAutoScrollEnable = true;
    /**
     * 自动滚动一页的时间
     */
    private int mAutoScrollDuration = 2000;

    private Handler mAutoScrollHandler;

    public ImageCycleView(Context context) 
        super(context);
    

    public ImageCycleView(Context context, AttributeSet attrs) 
        super(context, attrs);
        mContext = context;
        init();
    

    /**
     * 初始化控件的基本元素
     */
    private void init() 
        mScale = mContext.getResources().getDisplayMetrics().density;
        mAutoScrollHandler = new Handler();
        LayoutInflater.from(mContext).inflate(R.layout.include_home_advert_layout, this);
        mViewPager = (ViewPager) findViewById(R.id.vp_pager);
        mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());//设置viewpager的切换动画
        mScroller = new ViewPagerScroller(mContext);//viewpager自动切换的滚动速度
        mScroller.setScrollDuration(mAutoScrollDuration);
        mScroller.initViewPagerScroll(mViewPager);
        initViewPagerEvent();
        // 滚动图片右下指示器视图
        mIndicatorGroup = (ViewGroup) findViewById(R.id.ll_viewGroup);
    

    /**
     * 初始化viewpager的监听事件
     */
    private void initViewPagerEvent() 
        mViewPager.addOnPageChangeListener(new GuidePageChangeListener());
        mViewPager.setOnTouchListener(new OnTouchListener() 

            @Override
            public boolean onTouch(View v, MotionEvent event) 
                switch (event.getAction()) 
                    case MotionEvent.ACTION_CANCEL:
                        // 开始图片滚动
                        if (mIsAutoScrollEnable) 
                            startImageTimerTask();
                        
                        break;
//                    case MotionEvent.ACTION_DOWN:
//                        stopImageTimerTask();
                    default:
                        // 停止图片滚动
                        if (mIsAutoScrollEnable) 
                            pushImageCycle();
                        
                        break;
                
                return false;
            
        );
    


    /**
     * 循环添加view
     *
     * @param imageCount view总数
     */
    private void cycleAddView(int imageCount) 
        for (int i = 0; i < imageCount; i++) 
            //图片轮播指示器-个图
            ImageView imageView = new ImageView(mContext);
            int imageParams = (int) (mScale * 8 + 0.5f);// XP与DP转换，适应不同分辨率
            int imageMargin = (int) (mScale * 5 + 0.5f);
            LayoutParams params = new LayoutParams(imageParams, imageParams);
            params.setMargins(imageMargin, 0, imageMargin, 0);
            imageView.setLayoutParams(params);
            mImageViews[i] = imageView;
            if (i == 0) 
                mImageViews[i].setBackgroundResource(R.mipmap.icon_advert_point_orange);
             else 
                mImageViews[i].setBackgroundResource(R.mipmap.icon_advert_point_white);
            
            mIndicatorGroup.addView(mImageViews[i]);
        
    

    /**
     * 绑定数据源以及初始化图片循环控件
     *
     * @param imageUrlList           数据源，url
     * @param imageCycleViewListener 监听view的点击以及加载
     */
    public void bind(ArrayList<String> imageUrlList, ImageCycleViewListener imageCycleViewListener) 
        // 清除所有子视图
        mIndicatorGroup.removeAllViews();
        // 图片广告数量
        final int imageCount = imageUrlList.size();
        mImageViews = new ImageView[imageCount];
        cycleAddView(imageCount);
        mImageSelectIndex = imageCount * 1000;//起始点调高一点，另类实现左右循环
        //滚动图片视图适配器
        ImageCycleAdapter mAdvAdapter = new ImageCycleAdapter(mContext, imageUrlList, imageCycleViewListener);
        mViewPager.setAdapter(mAdvAdapter);
        mViewPager.setCurrentItem(mImageSelectIndex);//设置默认页
    

    /**
     * 设置自动滚动是否可用
     *
     * @param isAutoScrollEnable 自动滚动是否可用
     */
    public void setIsAutoScrollEnable(boolean isAutoScrollEnable) 
        this.mIsAutoScrollEnable = isAutoScrollEnable;
    

    /**
     * 设置自动滚动一页的时间
     * 默认2000
     *
     * @param autoScrollDuration 滚动一页时间
     */
    public void setAutoScrollDuration(int autoScrollDuration) 
        this.mAutoScrollDuration = autoScrollDuration;
    


    /**
     * 获取viewpager对象，可用来设置transform等
     * 默认viewPager.setPageTransformer(true, new ZoomOutPageTransformer());
     *
     * @return ViewPager 获取图片显示所在viewpager
     */
    public ViewPager getViewPager() 
        return mViewPager;
    

    /**
     * 开始轮播(手动控制自动轮播与否，便于资源控制)
     */
    public void startImageCycle() 
        startImageTimerTask();
    

    /**
     * 暂停轮播——用于节省资源
     */
    public void pushImageCycle() 
        mAutoScrollHandler.removeCallbacks(mImageTimerTask);
    

    /**
     * 开始图片滚动任务
     */
    private void startImageTimerTask() 
        if (mIsAutoScrollEnable) 
            pushImageCycle();
            // 图片每3秒滚动一次
            mAutoScrollHandler.postDelayed(mImageTimerTask, 3000);
        
    


    /**
     * 图片自动轮播Task
     */
    private Runnable mImageTimerTask = new Runnable() 

        @Override
        public void run() 
            if (mImageViews != null) 
                // 下标等于图片列表长度说明已滚动到最后一张图片,重置下标
                mImageSelectIndex++;
                mScroller.setScrollDuration(mAutoScrollDuration);
                mViewPager.setCurrentItem(mImageSelectIndex, true);
            
        
    ;

    /**
     * 轮播图片状态监听器
     *
     * @author minking
     */
    private final class GuidePageChangeListener implements ViewPager.OnPageChangeListener 

        @Override
        public void onPageScrollStateChanged(int state) 

            if (state == ViewPager.SCROLL_STATE_IDLE) 
                startImageTimerTask(); // 开始下次计时
            
        

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) 
        

        @Override
        public void onPageSelected(int index) 
            mImageSelectIndex = index;//手动滑动更新index
            mScroller.setScrollDuration(mAutoScrollDuration);
            // 设置当前显示的图片下标
            int count = mImageViews.length;
            int curIndex = index % count;
            // 设置图片滚动指示器背景
            mImageViews[curIndex].setBackgroundResource(R.mipmap.icon_advert_point_orange);
            for (int i = 0; i < count; i++) 
                if (curIndex != i) 
                    mImageViews[i].setBackgroundResource(R.mipmap.icon_advert_point_white);
                
            

        

    

    //------------下面是viewpager的自定义适配器以及监听当前操作位置的接口定义--------------
    private class ImageCycleAdapter extends PagerAdapter 

        /**
         * 图片资源列表
         */
        private ArrayList<String> mAdList;

        /**
         * 广告图片点击监听器
         */
        private ImageCycleViewListener mImageCycleViewListener;

        private Context mContext;

        public ImageCycleAdapter(Context context, ArrayList<String> adList, ImageCycleViewListener imageCycleViewListener) 
            mContext = context;
            mAdList = adList;
            mImageCycleViewListener = imageCycleViewListener;
        

        @Override
        public int getCount() 
            return Integer.MAX_VALUE;
        

        @Override
        public boolean isViewFromObject(View view, Object obj) 
            return view == obj;
        

        @Override
        public Object instantiateItem(ViewGroup container, final int position) 
            String imageUrl = mAdList.get(position % mAdList.size());//传余数
            View imageView = mImageCycleViewListener.getView();
            // 设置图片点击监听
            imageView.setOnClickListener(new OnClickListener() 

                @Override
                public void onClick(View v) 
                    mImageCycleViewListener.onImageClick(position % mAdList.size(), v);//传余数
                
            );
            imageView.setTag(imageUrl);
            container.addView(imageView);
            mImageCycleViewListener.displayImage(imageUrl, imageView);
            return imageView;
        

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) 
            View view = (View) object;
            container.removeView(view);
        

    

    /**
     * 轮播控件的监听事件
     */
    public interface ImageCycleViewListener<T extends View> 

        /**
         * 加载图片资源
         *
         * @param imageURL  当前图片url
         * @param imageView 当前图片view
         */
        void displayImage(String imageURL, T imageView);

        /**
         * 单击图片事件
         *
         * @param position  当前点击位置
         * @param imageView 当前view
         */
        void onImageClick(int position, T imageView);

        /**
         * 具体的图片加载view的实例
         * 这样把逻辑和具体加载行为分离
         *
         * @return 加载图片view
         */
        T getView();
    

• scroller类，该类主要处理viewpager的自动滚动速度。平常的切换效果是一闪而过，自定义该类后可以实现自动切换时的平滑滚动效果。

import android.content.Context;
import android.support.v4.view.ViewPager;
import android.view.animation.Interpolator;
import android.widget.Scroller;

import java.lang.reflect.Field;

/**
 * ViewPager 滚动速度设置
 * 
 */
public class ViewPagerScroller extends Scroller 
    private int mScrollDuration = 2000;             // 滑动速度

    /**
     * 设置速度速度
     * @param duration
     */
    public void setScrollDuration(int duration)
        this.mScrollDuration = duration;
    

    public ViewPagerScroller(Context context) 
        super(context);
    

    public ViewPagerScroller(Context context, Interpolator interpolator) 
        super(context, interpolator);
    

    public ViewPagerScroller(Context context, Interpolator interpolator, boolean flywheel) 
        super(context, interpolator, flywheel);
    

    @Override
    public void startScroll(int startX, int startY, int dx, int dy, int duration) 
        super.startScroll(startX, startY, dx, dy, mScrollDuration);
    

    @Override
    public void startScroll(int startX, int startY, int dx, int dy) 
        super.startScroll(startX, startY, dx, dy, mScrollDuration);
    



    public void initViewPagerScroll(ViewPager viewPager) 
        try 
            Field mScroller = ViewPager.class.getDeclaredField("mScroller");
            mScroller.setAccessible(true);
            mScroller.set(viewPager, this);
         catch(Exception e) 
            e.printStackTrace();
        
    

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <LinearLayout
        android:id="@+id/ll_viewGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="8dp"
        android:gravity="center"
        android:orientation="horizontal" />

</RelativeLayout>

• 使用方法，bind绑定数据源以及确定加载的view的类型。我这里使用的是fresco的SimpleDraweeView。

        mImageUrl = (ArrayList<String>) mGoodsJson.getImgurls();
        if (mImageUrl == null || mImageUrl.isEmpty()) 
            return;
        
        mImageCycleView.bind(mImageUrl, new ImageCycleView.ImageCycleViewListener<SimpleDraweeView>() 

                    @Override
                    public void displayImage(String url, SimpleDraweeView simpleDraweeView) 
                        ImageLoadUtil.loadImageWithoutAspectRatio(getContext(), url, simpleDraweeView, width, width);
                    

                    @Override
                    public void onImageClick(int position, SimpleDraweeView simpleDraweeView) 
                        Intent intent = new Intent(getContext(),
                                ImageBrowseActivity.class);
                        Bundle args = new Bundle();
                        args.putStringArrayList(IMAGES, mImageUrl);
                        args.putInt(IMAGE_POSITION, position);
                        intent.putExtras(args);
                        startActivity(intent);
                    

                    @Override
                    public SimpleDraweeView getView() 
                        return new SimpleDraweeView(GoodsDetailActivity.this);
                    
                
        );


        mImageCycleView.setIsAutoScrollEnable(true);

源码下载地址:http://download.csdn.net/detail/u010716109/9424223