自定义ViewPager + Handler 实现的图片自动轮播

自定义ViewPager + Handler 实现的图片自动轮播

废话不多说，这个是我模仿淘宝demo

home_f为首页fragment，其中布局里面有我自定义的viewPager

布局关键部分：

<com.abslidingplayview.AbSlidingPlayView
android:id="@+id/viewPager_menu"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#00000000"
android:layout_marginBottom="10dp"
/>

对应的AbSlidingPlayView

public class AbSlidingPlayView extends LinearLayout{

private Context context;

private AbInnerViewPager mViewPager;

public LinearLayout.LayoutParams layoutParamsFW = null;

private ArrayList<View> mListViews = null;

private AbViewPagerAdapter mAbViewPagerAdapter = null;

/** 播放的方向 */
private int playingDirection = 0;

/** 播放的开关 */
private boolean play = false;

/** 播放的间隔时间 */
private int sleepTime = 5000;

/** 播放方向方式（1顺序播放和0来回播放） */
private int playType = 1;

public AbSlidingPlayView(Context context) {
super(context);
initView(context);
}

public AbSlidingPlayView(Context context, AttributeSet attrs) {
super(context, attrs);
initView(context);
}

public void initView(Context context) {
this.context = context;
mViewPager = new AbInnerViewPager(context);
mViewPager.setId(0);

RelativeLayout mRelativeLayout = new RelativeLayout(context);
RelativeLayout.LayoutParams lp1 = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
mRelativeLayout.addView(mViewPager, lp1);

layoutParamsFW = new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
this.addView(mRelativeLayout, layoutParamsFW);

mListViews = new ArrayList<View>();
mAbViewPagerAdapter = new AbViewPagerAdapter(context, mListViews);
mViewPager.setAdapter(mAbViewPagerAdapter);
mViewPager.setFadingEdgeLength(0);

}

public void addViews(List<View> views) {
mListViews.addAll(views);
mAbViewPagerAdapter.notifyDataSetChanged();
}

/** 用与轮换的 handler. */
private Handler handler = new Handler() {

@Override
public void handleMessage(Message msg) {
if (msg.what == 0) {
//显示播放的页面
ShowPlay();
if (play) {
handler.postDelayed(runnable, sleepTime);
}
}
}

};

/** 用于轮播的线程. */
private Runnable runnable = new Runnable() {
public void run() {
if (mViewPager != null) {
handler.sendEmptyMessage(0);
}
}
};

public void startPlay() {
if (handler != null) {
play = true;
handler.postDelayed(runnable, sleepTime);
}
}

public void stopPlay() {
if (handler != null) {
play = false;
handler.removeCallbacks(runnable);
}
}
public void ShowPlay() {
int count = mListViews.size();
// 当前显示的页数
int i = mViewPager.getCurrentItem();
switch (playType) {
case 0:
// 来回播放
if (playingDirection == 0) {
if (i == count - 1) {
playingDirection = -1;
i--;
} else {
i++;
}
} else {
if (i == 0) {
playingDirection = 0;
i++;
} else {
i--;
}
}
break;
case 1:
// 顺序播放
if (i == count - 1) {
i = 0;
} else {
i++;
}

break;

default:
break;
}
// 设置显示第几页
mViewPager.setCurrentItem(i, true);
}

public int getSleepTime() {
return sleepTime;
}

public void setSleepTime(int sleepTime) {
this.sleepTime = sleepTime;
}

public int getPlayType() {
return playType;
}

public void setPlayType(int playType) {
this.playType = playType;
}
}

这里我自定义的ViewPager，AbInnerViewPager

之所以自定义是为了解决在当前我的ViewPager与父亲那一层的ScrollView或者ListView在捕获手势是发生冲突。通过判定手势的方式来选择捕获。

public class AbInnerViewPager extends ViewPager {

/** The parent scroll view. */
private ScrollView parentScrollView;

/** The parent list view. */
private ListView parentListView;
/** 识别用户手势 */
private GestureDetector mGestureDetector;

public AbInnerViewPager(Context context) {
super(context);
mGestureDetector = new GestureDetector(new YScrollDetector());
setFadingEdgeLength(0);
}

public AbInnerViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
mGestureDetector = new GestureDetector(new YScrollDetector());
setFadingEdgeLength(0);
}

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return super.onInterceptTouchEvent(ev) && mGestureDetector.onTouchEvent(ev);
}

public void setParentScrollView(ScrollView parentScrollView) {
this.parentScrollView = parentScrollView;
}

public void setParentListView(ListView parentListView) {
this.parentListView = parentListView;
}

private void setParentScrollAble(boolean flag) {
if(parentScrollView!=null){
parentScrollView.requestDisallowInterceptTouchEvent(!flag);
}

if(parentListView!=null){
parentListView.requestDisallowInterceptTouchEvent(!flag);
}
}

class YScrollDetector extends GestureDetector.SimpleOnGestureListener {
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
if (Math.abs(distanceX) >= Math.abs(distanceY)) {
//父亲不滑动
setParentScrollAble(false);
return true;
}else{
setParentScrollAble(true);
}
return false;
}
}
}

接下来为我们的AbInnerViewPager绑定adapter

public class AbViewPagerAdapter extends PagerAdapter {

private Context mContext;

private ArrayList<View> mListViews = null;

private HashMap<Integer,View> mViews = null;

public AbViewPagerAdapter(Context context,ArrayList<View> mListViews) {
this.mContext = context;
this.mListViews = mListViews;
this.mViews = new HashMap <Integer,View>();
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mListViews.get(position));
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mListViews.get(position));
return mListViews.get(position);
}

@Override
public int getCount() {
return mListViews.size();
}

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

@Override
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}

这里我的viewpager添加View的布局为

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
android:id="@+id/pic_item"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

</LinearLayout>

在自定义的fragment调用这个控件

viewPager.addViews(allListView);
viewPager.setPlayType(1);
viewPager.setSleepTime(3000);
viewPager.startPlay();

详情可见我的gitHub

https://github.com/Django15/AbSlidingPlayView!

演示效果