ViewPager带底部圆点导航,实现自动轮播,无限滑动

此篇主要功能为ViewPager自动轮播,带底部导航,手指左右无限滑动,主要实现原理是在数据源前后拼接最后一张资源和第一张资源,实现平稳过渡,直接上代码。

布局代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/adv_pager"
        android:layout_width="match_parent"
        android:layout_height="161dp" />

    <RelativeLayout
        android:layout_gravity="bottom"
        android:layout_width="match_parent"
        android:layout_height="30dp">
    <LinearLayout
        android:layout_centerHorizontal="true"
        android:id="@+id/viewGroup"
        android:layout_width="wrap_content"
        android:layout_centerVertical="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal"
        android:layout_height="wrap_content" />
    </RelativeLayout>

</FrameLayout>

主要代码

public class ImageCycleView extends LinearLayout {
    /**
     * 上下文
     */
    private Context mContext;
    /**
     * 图片轮播视图
     */
    private ViewPager mAdvPager = null;

    /**
     * 滚动图片视图适配器
     */
    private ImageCycleAdapter mAdvAdapter;

    /**
     * 图片轮播指示器控件
     */
    private LinearLayout mGroup;

    /**
     * 图片轮播指示器-个图
     */
    private ImageView mImageView = null;

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

    /**
     * 图片滚动当前图片下标
     */
    private int mImageIndex = 1;

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

    /**
     * @param context
     */
    public ImageCycleView(Context context) {
        super(context);
    }

    public ImageCycleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        mScale = context.getResources().getDisplayMetrics().density;
        LayoutInflater.from(context).inflate(R.layout.ad_cycle_view, this);
        mAdvPager = (ViewPager) findViewById(R.id.adv_pager);
        mAdvPager.addOnPageChangeListener(new GuidePageChangeListener());
        mAdvPager.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_UP:
                        // 开始图片滚动
                        startImageTimerTask();
                        break;
                    default:
                        // 停止图片滚动
                        stopImageTimerTask();
                        break;
                }
                return false;
            }
        });
        // 滚动图片右下指示器视图
        mGroup = (LinearLayout) findViewById(R.id.viewGroup);
    }

    /**
     * 装填图片数据
     */
    public void setImageResources(ArrayList<String> imageUrlList, ImageCycleViewListener imageCycleViewListener) {
        // 清除所有子视图
        mGroup.removeAllViews();
        // 图片广告数量
        final int imageCount = imageUrlList.size();
        mImageViews = new ImageView[imageCount];
        for (int i = 0; i < imageCount; i++) {
            mImageView = new ImageView(mContext);
            int imageParams = (int) (mScale * 7 + 0.5f);// XP与DP转换,适应不同分辨率
            int imagePadding = (int) (mScale * 5 + 0.5f);
            LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            lp.width = imageParams;
            lp.height = imageParams;

            mImageViews[i] = mImageView;
            if (i == 0) {
                mImageViews[i].setBackgroundResource(R.drawable.arl_red_dot);
            } else {
                lp.leftMargin = imagePadding;
                mImageViews[i].setBackgroundResource(R.drawable.arl_white_dot);
            }
            mGroup.addView(mImageViews[i], i, lp);
        }
        mAdvAdapter = new ImageCycleAdapter(mContext, imageUrlList, imageCycleViewListener);
        mAdvPager.setAdapter(mAdvAdapter);
        mAdvPager.setCurrentItem(1);
        startImageTimerTask();
    }

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

    /**
     * 暂停轮播——用于节省资源
     */
    public void pushImageCycle() {
        stopImageTimerTask();
    }

    /**
     * 开始图片滚动任务
     */
    private void startImageTimerTask() {
        stopImageTimerTask();
        // 图片每3秒滚动一次
        mHandler.postDelayed(mImageTimerTask, 3000);
    }

    /**
     * 停止图片滚动任务
     */
    private void stopImageTimerTask() {
        mHandler.removeCallbacks(mImageTimerTask);
    }

    private Handler mHandler = new Handler();

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

        @Override
        public void run() {
            if (mImageViews != null) {
                //如果是最后一个(getCount-1)  --- 定位第一个(position = 1)
                if (mImageIndex == mAdvAdapter.getCount() - 1) {
                    mImageIndex = 1;
                    mImageIndex++;
                    mAdvPager.setCurrentItem(mImageIndex);
                } else if (mImageIndex == mAdvAdapter.getCount() - 2) {
                    //如果是倒数第二个--定位到第一个(position=0)
                    mImageIndex = 0;
                    mImageIndex++;
                    mAdvPager.setCurrentItem(mImageIndex, false);
                } else {
                    mImageIndex++;
                    mAdvPager.setCurrentItem(mImageIndex);
                }
            }
        }
    };

    /**
     * 轮播图片状态监听器
     *
     * @author minking
     */
    private final class GuidePageChangeListener implements ViewPager.OnPageChangeListener {
        int position = 0;

        @Override
        public void onPageScrollStateChanged(int state) {
            //如果手指处于空闲状态  (切换)
            if (state == ViewPager.SCROLL_STATE_IDLE) {
                //如果是最后一个A(getCount-1)  --- 定位第一个A(position = 1)
                if (position == mAdvAdapter.getCount() - 1) {
                    position = 1;
                    mAdvPager.setCurrentItem(position, false);//切换界面的时候,不平滑滚动
                } else if (position == 0) {
                    //如果是第一个位置D --- 定位到最后一个D(倒数第二个位置)
                    position = mAdvAdapter.getCount() - 2;
                    mAdvPager.setCurrentItem(position, false);
                }
            }
        }

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

        @TargetApi(Build.VERSION_CODES.JELLY_BEAN_MR1)
        @Override
        public void onPageSelected(int index) {
            position = index;
            mImageIndex = mAdvPager.getCurrentItem();
            startImageTimerTask(); // 开始下次计时
            if (index == (mAdvAdapter.getCount() - 1)) {
                index = 0;
            } else if (index == 0) {
                index = mAdvAdapter.getCount() - 3;
            } else {
                index = index - 1;
            }
            mImageViews[index].setPaddingRelative(10, 10, 10, 10);
            // 设置图片滚动指示器背景
            mImageViews[index].setBackgroundResource(R.drawable.arl_red_dot);
            for (int i = 0; i < mImageViews.length; i++) {
                if (index != i) {
                    mImageViews[i].setBackgroundResource(R.drawable.arl_white_dot);
                }
            }
        }
    }

    private class ImageCycleAdapter extends PagerAdapter {

        /**
         * 图片视图缓存列表
         */
        private ArrayList<ImageView> mImageViewCacheList;

        /**
         * 图片资源列表
         */
        private ArrayList<String> mAdList = new ArrayList<String>();

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

        private Context mContext;

        public ImageCycleAdapter(Context context, ArrayList<String> adList, ImageCycleViewListener imageCycleViewListener) {
            mContext = context;
            mAdList = adList;
            mImageCycleViewListener = imageCycleViewListener;
            mImageViewCacheList = new ArrayList<ImageView>();
        }

        @Override
        public int getCount() {
            return mAdList.size() + 2;
        }

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

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            if (position == 0) {
                position = mAdList.size() - 1;
            } else if (position == (getCount() - 1)) {
                position = 0;
            } else {
                position = position - 1;
            }

            String imageUrl = mAdList.get(position);
            ImageView imageView = null;
            if (mImageViewCacheList.isEmpty()) {
                imageView = new ImageView(mContext);
                imageView.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);
            } else {
                imageView = mImageViewCacheList.remove(0);
            }
            // 设置图片点击监听
            final int finalPosition = position;
            imageView.setOnClickListener(new OnClickListener() {

                @Override
                public void onClick(View v) {
                    mImageCycleViewListener.onImageClick(finalPosition, v);
                }
            });

            imageView.setOnTouchListener(new OnTouchListener() {

                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()) {
                        // 停止轮播
                        case MotionEvent.ACTION_DOWN:
                            stopImageTimerTask();
                            break;
                        // 开始轮播
                        case MotionEvent.ACTION_UP:
                            startImageTimerTask();
                            break;
                        default:
                            startImageTimerTask();
                            break;
                    }
                    return false;
                }
            });
            imageView.setTag(imageUrl);
            container.addView(imageView);
            mImageCycleViewListener.displayImage(imageUrl, imageView);
            Picasso.with(getContext()).load(imageUrl).into(imageView);
            return imageView;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            ImageView view = (ImageView) object;
            container.removeView(view);
            mImageViewCacheList.add(view);
        }
    }

    /**
     * 轮播控件的监听事件
     */
    public interface ImageCycleViewListener {

        /**
         * 加载图片资源
         */
        public void displayImage(String imageURL, ImageView imageView);

        /**
         * 单击图片事件
         */
        public void onImageClick(int position, View imageView);
    }
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 布局文件中添加ViewPager组件 ```xml <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="wrap_content" /> ``` 2. 创建适配器 创建一个适配器,继承自PagerAdapter,实现以下方法: - getCount() 返回轮播图数量 - instantiateItem() 加载ViewPager的每一个页面 - destroyItem() 销毁ViewPager的每一个页面 - isViewFromObject() 判断当前的 View 是否和 instantiateItem() 返回的 object 相等 ```java public class MyPagerAdapter extends PagerAdapter { private List<ImageView> mImageViews; public MyPagerAdapter(List<ImageView> imageViews) { mImageViews = imageViews; } @Override public int getCount() { return mImageViews.size(); } @Override public Object instantiateItem(ViewGroup container, int position) { ImageView imageView = mImageViews.get(position); container.addView(imageView); return imageView; } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mImageViews.get(position)); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } } ``` 3. 初始化ViewPager ```java private void initViewPager() { List<ImageView> imageViews = new ArrayList<>(); for (int i = 0; i < mImageIds.length; i++) { ImageView imageView = new ImageView(this); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setImageResource(mImageIds[i]); imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // 点击事件 } }); imageViews.add(imageView); } MyPagerAdapter pagerAdapter = new MyPagerAdapter(imageViews); mPager.setAdapter(pagerAdapter); // 自动滑动 mPager.setCurrentItem(0); mPager.postDelayed(new Runnable() { @Override public void run() { int currentItem = mPager.getCurrentItem(); int count = mImageIds.length; int nextItem = (currentItem + 1) % count; mPager.setCurrentItem(nextItem, true); mPager.postDelayed(this, 3000); } }, 3000); // 手动滑动 mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } }); } ``` 4. 实现自动滑动 在 initViewPager() 方法中,通过 postDelayed() 方法实现自动滑动。首先将 ViewPager 的当前位置设置为 0,然后每隔 3 秒就自动滑动到下一个页面,直到滑动到最后一页后再从头开始滑动。 ```java mPager.setCurrentItem(0); mPager.postDelayed(new Runnable() { @Override public void run() { int currentItem = mPager.getCurrentItem(); int count = mImageIds.length; int nextItem = (currentItem + 1) % count; mPager.setCurrentItem(nextItem, true); mPager.postDelayed(this, 3000); } }, 3000); ``` 5. 实现手动滑动和点击切换 在 initViewPager() 方法中,通过 addOnPageChangeListener() 方法实现手动滑动和点击切换。在 onPageSelected() 方法中,更新标题和指示器的位置。在 onClick() 方法中,获取当前页面的位置并设置为 ViewPager 的当前位置。 ```java mPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { mTitle.setText(mTitles[position]); mIndicator.setCurrentItem(position); } @Override public void onPageScrollStateChanged(int state) { } }); imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { int currentItem = mPager.getCurrentItem(); if (currentItem == mImageIds.length - 1) { mPager.setCurrentItem(0, true); } else { mPager.setCurrentItem(currentItem + 1, true); } } }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值