ViewPager滑动衔接

来源：互联网发布：飞升化身诀数据编辑：程序博客网时间：2024/04/29 12:56

今天针对viewPager进行了加工，就是让当前第一个的时候继续向左滑动当前为最后一个的时候能继续向右滑动

实现的功能：

自动滑动 3秒间隔

当数据只有一条时没有滑动功能

可以无限左右滑动

效果如下:

首先分析下实现原理我先来画张图

这样就清晰多了加入我有三条数据而实际我在传给Adapter的时候是就变成了五条当用户滑动到0的位置就立刻替换成3 当滑动到第4的位置就替换成1

这里我用到了 viewpager关键的函数

/** * Set the currently selected page. * * @param item Item index to select * @param smoothScroll True to smoothly scroll to the new item, false to transition immediately */public void setCurrentItem(int item, boolean smoothScroll) {    mPopulatePending = false;    setCurrentItemInternal(item, smoothScroll, false);}

这个应该很熟悉了不多介绍关键是第二个参数 true即滚动过度 false即立刻过多没有任何动画当然默认是true

实现代码如下：

import android.content.Context;import android.os.Handler;import android.os.Message;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import qm.multiple.travel.utils.ThreadPool;/** * Created by MyPC on 2017/4/10. */public class AutoViewPager extends ViewPager {    /**     * 是否自动 轮播     */    private boolean mAutoPager = false;    /**     * 间隔时长     */    int sleep = 3000;    /**     * 记录位置（决定当前实现位置）     */    int mCurrentPosition = 0;    /**     * 总大小     */    int count = 0;    /**     * 记录手动滑动时的position变化     */    int mPosition = 0;    /**     * 当前正在手动改变 pager     */    boolean currentChangePager = false;    Handler handler = new Handler() {        @Override        public void handleMessage(Message msg) {            if (msg.what == 0x123) {                if (currentChangePager) {                    currentChangePager = false;                    return;                }                setCurrentItem(++mCurrentPosition, true);            }        }    };    public AutoViewPager(Context context) {        super(context);    }    public AutoViewPager(Context context, AttributeSet attrs) {        super(context, attrs);    }    private void launchAuto() {        count = getAdapter().getCount();        if (count <= 3) {            return;        }        mAutoPager = true;        setViewPagerChangeListener();        setCurrentItem(1);        mCurrentPosition = 1;        ThreadPool.execute(new Runnable() {            @Override            public void run() {                try {                    while (mAutoPager) {                        Thread.sleep(sleep);                        handler.sendEmptyMessage(0x123);                    }                } catch (InterruptedException e) {                    e.printStackTrace();                }            }        });    }    /**     * 开启自动轮播     */    public void startAuto() {        if (!mAutoPager) {            launchAuto();        }    }    /**     * 停止自动轮播     */    public void stopAuto() {        mAutoPager = false;    }    private void setViewPagerChangeListener() {        addOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                mPosition = position;            }            /**             *             * @param state             * 0：什么都没做             * 1：开始滑动             * 2：滑动结束             */            @Override            public void onPageScrollStateChanged(int state) {                if (state == 0 && count > 3) {                    if (mPosition == 0) {                        mCurrentPosition = count - 2;                        setCurrentItem(mCurrentPosition, false);                    } else if (mPosition == count - 1) {                        mCurrentPosition = 1;                        setCurrentItem(mCurrentPosition, false);                    } else {                        mCurrentPosition = mPosition;                    }                }                if (state == 1) { // 手动滑动 优先                    currentChangePager = true;                }            }        });    }}

下面是adapter 这个里面变化不大主要是添加头和尾衔接的item放在这里处理

import android.support.v4.util.SimpleArrayMap;import android.support.v4.view.PagerAdapter;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import com.facebook.drawee.view.SimpleDraweeView;import java.util.List;import qm.multiple.travel.R;import qm.multiple.travel.template.manager.NoDoubleClickListener;/** * Created by MyPC on 2017/4/10. */public class AutoViewPagerAdapter extends PagerAdapter {    List<String> datas;

//避免重复创建view 这里进行了保存    SimpleArrayMap<Integer, SimpleDraweeView> viewDatas;    public AutoViewPagerAdapter(List<String> datas) {        this.datas = datas;        if (datas.size() > 1) { // 这里是添加头和尾衔接的item            this.datas.add(datas.get(0));            this.datas.add(0, datas.get(datas.size() - 2));         }        viewDatas = new SimpleArrayMap<>();    }    @Override    public int getCount() {        return datas.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView((View) object);    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        SimpleDraweeView simpleDraweeView = viewDatas.get(position); // 这里我用的是fresco加载网路图片        if (null == simpleDraweeView) {            simpleDraweeView = (SimpleDraweeView) LayoutInflater.from(container.getContext()).inflate(R.layout.item_pager, null);            viewDatas.put(position, simpleDraweeView); // 保存view        }        String url = datas.get(position);        simpleDraweeView.setImageURI(url);        container.addView(simpleDraweeView, 0);        return simpleDraweeView;    }}

接下来是底部的导航点

import android.content.Context;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.Gravity;import android.widget.ImageView;import android.widget.LinearLayout;import qm.multiple.travel.R;public class LinearDotTransform extends LinearLayout {    Context mContext;    ImageView currentImageView;    /**     * 焦点     */    int resSelect;    /**     * 非焦点     */    int resNormal;    /**     * 间隔距离     */    int interval = 5;    public LinearDotTransform(Context context) {        super(context);        init(context);    }    public LinearDotTransform(Context context, AttributeSet attrs) {        super(context, attrs);        init(context);    }    public LinearDotTransform(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init(context);    }    private void init(Context context) {        this.mContext = context;        resSelect = R.mipmap.ic_vip_selected_page; // 默认        resNormal = R.mipmap.ic_vip_select_page;        setOrientation(LinearLayout.HORIZONTAL);        setGravity(Gravity.CENTER_HORIZONTAL);    }    /**     * 设置切换图标     *     * @param resSelect     * @param resNormal     */    public void setResDrawable(int resSelect, int resNormal) {        this.resSelect = resSelect;        this.resNormal = resNormal;    }    public void createTabItems(int count, int currentCount) {        removeAllViews();        for (int i = 0; i < count; i++) {            ImageView imageView = new ImageView(mContext);            LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);            params.leftMargin = interval;            params.rightMargin = interval;            params.gravity = Gravity.CENTER;//            params.height = getResources().getDimensionPixelSize(R.dimen.dot_dimens_5);//            params.width = getResources().getDimensionPixelSize(R.dimen.dot_dimens_5);            imageView.setLayoutParams(params);            if (currentCount == i) {                imageView.setImageResource(resSelect);                currentImageView = imageView;            } else {                imageView.setImageResource(resNormal);            }            addView(imageView);        }    }    public void setUpSelected(int position) {        if (currentImageView != null) {            currentImageView.setImageResource(resNormal);        }        ImageView mImageView = (ImageView) getChildAt(position);        if (mImageView != null) {            mImageView.setImageResource(resSelect);            currentImageView = mImageView;        }    }    /**     * viewPager 监听     *     * @param viewPager     */    public void setViewPagerListener(ViewPager viewPager) {        final int count = viewPager.getAdapter().getCount();        if (count <= 3) {            return;        }        createTabItems(count - 2, 0);        viewPager.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {            @Override            public void onPageSelected(int position) {                if (position == 0) {                    position = count - 3;                } else if (position == count - 1) {                    position = 0;                } else {                    position = position - 1;                }                setUpSelected(position);            }        });    }}

layout布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content">    <qm.multiple.travel.ui.view.autoViewPager.AutoViewPager        android:id="@+id/pager_banner"        android:layout_width="match_parent"        android:layout_height="150dp"        android:layout_alignParentTop="true"        android:layout_alignParentLeft="true"        android:layout_alignParentStart="true" />    <qm.multiple.travel.ui.view.autoViewPager.LinearDotTransform        android:id="@+id/linear_dot_banner"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginBottom="10dp"        android:layout_alignBottom="@+id/pager_banner"/></RelativeLayout>

实现具体调用代码

@Overridepublic void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    viewPager = (AutoViewPager) mView.findViewById(R.id.pager_banner);    LinearDotTransform dotTransform = (LinearDotTransform) mView.findViewById(R.id.linear_dot_banner);    List<String> data = new ArrayList<>();    data.add("http://res.1000mob.com/source/img/170210151818503_Game_Info_Flow.jpg");    data.add("http://res.1000mob.com/source/img/170210152446098_Game_Info_Flow.jpg");    data.add("http://res.1000mob.com/source/img/170221102747970_Game_Info_Flow.jpg");    viewPager.setAdapter(new AutoViewPagerAdapter(data));    dotTransform.setViewPagerListener(viewPager);}@Overridepublic void onResume() {    super.onResume();    viewPager.startAuto();}@Overridepublic void onStop() {    super.onStop();    viewPager.stopAuto();}

0 0