Android实现ViewPager自动轮播

Posted 2022-11-27 WYH_Healer

android实现ViewPager自动轮播

• 自定义TouchedViewPager继承ViewPager
• 在布局文件中定义TouchedViewPager
• 完成TouchedViewPager数据赋值以及无限轮播，点击图片停止轮播功能

---

自定义TouchedViewPager继承ViewPager

防止ViewPager的滑动事件被父容器拦截

public class TouchedViewPager  extends ViewPager


    private float   mDownX;
    private float   mDownY;

    public TouchedViewPager(Context context) 
        this(context, null);
    

    public TouchedViewPager(Context context, AttributeSet attrs) 
        super(context, attrs);
    

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev)
    

        int position = getCurrentItem();

        int action = ev.getAction();
        switch (action)
        
            case MotionEvent.ACTION_DOWN:
                // true: 孩子不想父容器拦截touch
                getParent().requestDisallowInterceptTouchEvent(true);

                mDownX = ev.getX();
                mDownY = ev.getY();

                break;
            case MotionEvent.ACTION_MOVE:
                float moveX = ev.getX();
                float moveY = ev.getY();

                float diffX = moveX - mDownX;
                float diffY = moveY - mDownY;

                // 水平操作
                // 从左向右 ---> diffX > 0
                // 从右向左 ---> diffX <= 0

                // 如果是水平操作，才考虑要不要拦截
                if (Math.abs(diffX) > Math.abs(diffY))
                
                    if (position == 0)
                    
                        // 1. 如果当前是第一页(打开菜单或是上级viewpager选中上一页)
                        if (diffX > 0)
                        
                            // 1-1. 如果从左向右拖动，父容器自己去响应touch
                            getParent().requestDisallowInterceptTouchEvent(false);
                        
                        else
                        
                            // 1-2. 如果从右向左拖动，自己响应
                            getParent().requestDisallowInterceptTouchEvent(true);
                        
                    
                    else if (position == getAdapter().getCount() - 1)
                    
                        // 2. 如果是最后一页,父容器自己去响应touch
                        if (diffX > 0)
                        
                            // 2-1. 如果从左向右拖动，自己响应
                            getParent().requestDisallowInterceptTouchEvent(true);
                        
                        else
                        
                            // 2-2. 如果从右向左拖动,父容器自己去响应touch
                            getParent().requestDisallowInterceptTouchEvent(false);
                        
                    
                    else
                    
                        // 3. 中间页面，自己响应
                        getParent().requestDisallowInterceptTouchEvent(true);
                    
                
                else
                
                    getParent().requestDisallowInterceptTouchEvent(false);
                
                break;
            case MotionEvent.ACTION_UP:

                break;
            default:
                break;
        
        return super.dispatchTouchEvent(ev);
    

在布局文件中定义TouchedViewPager

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/rl_root"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    tools:context=".MainActivity"
    >

    <com.sjxz.autoviewpager.TouchedViewPager
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="25dp"
        >
        <LinearLayout
            android:id="@+id/point_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal" >
        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

完成TouchedViewPager数据赋值以及无限轮播，点击图片停止轮播功能

package com.sjxz.autoviewpager;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewParent;
import android.widget.ImageView;
import android.widget.LinearLayout;

import java.util.ArrayList;
import java.util.List;


public class MainActivity extends Activity implements ViewPager.OnPageChangeListener 

    private String TAG=MainActivity.class.getSimpleName();
    private TouchedViewPager mViewPager;
    private LinearLayout mPointContainer;
    private int[]  imgRes  = new int[] 
            R.mipmap.guide_1,
            R.mipmap.guide_2,
            R.mipmap.guide_3
    ;
    private List<ImageView> mImgDatas;
    private TopNewsPagerAdapter topNewsPagerAdapter;
    private AutoSwitchTask          mSwitchTask;
    private int maxHalf=Integer.MAX_VALUE/2;
    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mImgDatas=new ArrayList<ImageView>();
        mSwitchTask = new AutoSwitchTask();
        topNewsPagerAdapter=new TopNewsPagerAdapter();
        for (int i = 0; i < imgRes.length; i++) 
            ImageView iv = new ImageView(this);
            iv.setImageResource(imgRes[i]);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            // add
            mImgDatas.add(iv);
        
        mViewPager=(TouchedViewPager)findViewById(R.id.mViewPager);
        mViewPager.setAdapter(topNewsPagerAdapter);
        mViewPager.setOnPageChangeListener(this);
        mPointContainer=(LinearLayout)findViewById(R.id.point_container);
        // 动态的去加载点
        mPointContainer.removeAllViews();
        for (int i = 0; i < mImgDatas.size(); i++)
        
            View child = new View(MainActivity.this);
            child.setBackgroundResource(R.mipmap.dot_normal);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(6, 6);
            if (i != 0)
            
                params.leftMargin = 8;
            
            else
            
                child.setBackgroundResource(R.mipmap.dot_focus);
            
            mPointContainer.addView(child, params);
        
        mViewPager.setCurrentItem(maxHalf/2);
        // 自动轮播
        // 应该定时的去改变ViewPager的选中项
        mSwitchTask.start();

        // 如果手指放到ViewPager上，就停止轮播
        mViewPager.setOnTouchListener(new View.OnTouchListener() 
            @Override
            public boolean onTouch(View v, MotionEvent event) 
                // dispatchTouchEvent

                int action = event.getAction();
                switch (action) 
                    case MotionEvent.ACTION_DOWN:
                        // 停止轮播
                        mSwitchTask.stop();
                        Log.e(TAG, "停止轮播");
                        break;
                    case MotionEvent.ACTION_UP:
                        mSwitchTask.start();
                        Log.e(TAG, "开始轮播 : " + action);
                        break;
                    case MotionEvent.ACTION_CANCEL:
                        // 开始轮播
                        mSwitchTask.stop();
                        Log.e(TAG, "停止轮播: cancel");
                        break;
                    default:
                        break;
                
                return false;
            
        );
    
    //自动延时轮播
    class AutoSwitchTask extends Handler implements Runnable
    
        public void start()
        
            stop();
            postDelayed(this, 2000);
        

        public void stop()
        
            removeCallbacks(this);
        

        @Override
        public void run()
        
            // 主线程中执行
            int item = mViewPager.getCurrentItem();
            if (item == mViewPager.getAdapter().getCount() - 1)
            
                item = 0;
            
            else
            
                item++;
            
            mViewPager.setCurrentItem(item);

            postDelayed(this, 2000);
        
    
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) 

    

    @Override
    public void onPageSelected(int position) 
        int count = mPointContainer.getChildCount();
        for (int i = 0; i < count; i++)
        
            View view = mPointContainer.getChildAt(i);
            // if (position == i)
            // 
            // // 选中的
            // 
            // else
            // 
            // // 没有选中的
            // 
            if(position>mImgDatas.size()-1)
                position=position%3;
            
            view.setBackgroundResource(position == i ? R.mipmap.dot_focus : R.mipmap.dot_normal);
        
    

    @Override
    public void onPageScrollStateChanged(int i) 

    



    class TopNewsPagerAdapter extends PagerAdapter
    
        @Override
        public int getCount()
        
            if (mImgDatas != null)  return maxHalf; 
            return 0;
        

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

        @Override
        public Object instantiateItem(ViewGroup container, int position)
        
            // 给ViewPager展示图片数据
            if(position>mImgDatas.size()-1)
                position=position%3;
            
            ImageView iv = mImgDatas.get(position);
            //测试使用本地图片
            //实际：
            // 1. 去网络获取图片
            // 2. 将图片存到本地 ---> 大小 ---> 压缩
            // 3. 将图片存到了内存
            ViewParent vp =iv.getParent();

            if (vp!= null )

                ViewGroup parent = (ViewGroup)vp;

                parent.removeView(iv);

            

            // 将iv加到viewpager中
            container.addView(iv);

            return iv;
        

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

        
    

实现从中间开始无限轮播，开启可以同时往左边或者右边无限滑动，点以及页面进行联动。