效果图
主要的自定义类
import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
/**
* android banner图
*/
public class RollHeaderView extends FrameLayout implements OnPageChangeListener {
private Context mContext;
private ViewPager mViewPager;
private LinearLayout mDotLl;
private List<Integer> mUrlList;
private List<ImageView> dotList = null;
private MyAdapter mAdapter = null;
private Handler mHandler = null;
private AutoRollRunnable mAutoRollRunnable = null;
private int prePosition = 0;
private HeaderViewClickListener headerViewClickListener;
public RollHeaderView(Context context) {
this(context, null);
}
public RollHeaderView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RollHeaderView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.mContext = context;
initView();
initData();
initListener();
}
//初始化view
private void initView() {
View.inflate(mContext, R.layout.view_header, this);
mViewPager = (ViewPager) findViewById(R.id.vp);
mDotLl = (LinearLayout) findViewById(R.id.ll_dot);
//让banner的高度是屏幕的1/4
ViewGroup.LayoutParams vParams = mViewPager.getLayoutParams();
vParams.height = (int) (DisplayUtil.getMobileHeight(mContext) * 0.25);
mViewPager.setLayoutParams(vParams);
}
//初始化数据
private void initData() {
dotList = new ArrayList<>();
mAutoRollRunnable = new AutoRollRunnable();
mHandler = new Handler();
mAdapter = new MyAdapter();
}
private void initListener() {
mViewPager.addOnPageChangeListener(this);
}
/**
* 设置数据
*
* @param urlList
*/
public void setImgUrlData(List<Integer> urlList) {
this.mUrlList = urlList;
if (mUrlList != null && !mUrlList.isEmpty()) {
//清空数据
dotList.clear();
mDotLl.removeAllViews();
ImageView dotIv;
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
for (int i = 0; i < mUrlList.size(); i++) {
dotIv = new ImageView(mContext);
if (i == 0) {
dotIv.setBackgroundResource(R.drawable.bg_point_select);
} else {
dotIv.setBackgroundResource(R.drawable.bg_point_normal);
}
//设置点的间距
params.setMargins(0, 0, DisplayUtil.dip2px(mContext, 5), 0);
dotIv.setLayoutParams(params);
//添加点到view上
mDotLl.addView(dotIv);
//添加到集合中, 以便控制其切换
dotList.add(dotIv);
}
}
mAdapter = new MyAdapter();
mViewPager.setAdapter(mAdapter);
//设置viewpager初始位置, +10000就够了
mViewPager.setCurrentItem(urlList.size() + 10000);
startRoll();
}
/**
* 设置点击事件
*
* @param headerViewClickListener
*/
public void setOnHeaderViewClickListener(HeaderViewClickListener headerViewClickListener) {
this.headerViewClickListener = headerViewClickListener;
}
//开始轮播
public void startRoll() {
mAutoRollRunnable.start();
}
// 停止轮播
public void stopRoll() {
mAutoRollRunnable.stop();
}
private class AutoRollRunnable implements Runnable {
//是否在轮播的标志
boolean isRunning = false;
public void start() {
if (!isRunning) {
isRunning = true;
mHandler.removeCallbacks(this);
mHandler.postDelayed(this, 3000);
}
}
public void stop() {
if (isRunning) {
mHandler.removeCallbacks(this);
isRunning = false;
}
}
@Override
public void run() {
if (isRunning) {
mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
mHandler.postDelayed(this, 3000);
}
}
}
public interface HeaderViewClickListener {
void HeaderViewClick(int position);
}
private class MyAdapter extends PagerAdapter {
//为了复用
private List<ImageView> imgCache = new ArrayList<ImageView>();
@Override
public int getCount() {
//无限滑动
return Integer.MAX_VALUE;
}
@Override
public boolean isViewFromObject(View view, Object o) {
return view == o;
}
@Override
public Object instantiateItem(ViewGroup container, final int position) {
ImageView iv;
//获取ImageView对象
if (imgCache.size() > 0) {
iv = imgCache.remove(0);
} else {
iv = new ImageView(mContext);
}
iv.setScaleType(ScaleType.FIT_XY);
iv.setOnTouchListener(new OnTouchListener() {
private int downX = 0;
private long downTime = 0;
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mAutoRollRunnable.stop();
//获取按下的x坐标
downX = (int) v.getX();
downTime = System.currentTimeMillis();
break;
case MotionEvent.ACTION_UP:
mAutoRollRunnable.start();
int moveX = (int) v.getX();
long moveTime = System.currentTimeMillis();
if (downX == moveX && (moveTime - downTime < 500)) {//点击的条件
//轮播图回调点击事件
headerViewClickListener.HeaderViewClick(position % mUrlList.size());
}
break;
case MotionEvent.ACTION_CANCEL:
mAutoRollRunnable.start();
break;
}
return true;
}
});
//加载图片
// Glide.with(mContext).load()
// .error(R.mipmap.ic_launcher).into(iv);
iv.setImageResource(mUrlList.get(position % mUrlList.size()));
container.addView(iv);
return iv;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
if (object != null && object instanceof ImageView) {
ImageView iv = (ImageView) object;
container.removeView(iv);
imgCache.add(iv);
}
}
}
@Override
public void onPageSelected(int position) {
dotList.get(prePosition).setBackgroundResource(R.drawable.bg_point_normal);
dotList.get(position % dotList.size()).setBackgroundResource(R.drawable.bg_point_select);
prePosition = position % dotList.size();
}
@Override
public void onPageScrollStateChanged(int arg0) {
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
//停止轮播
@Override
protected void onDetachedFromWindow() {
super.onDetachedFromWindow();
stopRoll();
}
}
圆点指示器的 样式
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid android:color="@color/colorGary" />
<size
android:width="5dp"
android:height="5dp" />
</shape>
轮播布局样式(也就是一个viewpager 然后后面一个layout 用作添加圆点指示器,当然这个界面样式你可以随意写)
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true" />
<!--<TextView-->
<!--android:id="@+id/desc"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_alignBottom="@+id/vp" />-->
<LinearLayout
android:id="@+id/ll_dot"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/vp"
android:layout_alignParentRight="true"
android:layout_margin="10dp"
android:gravity="center"
android:orientation="horizontal"></LinearLayout>
</RelativeLayout>
Activity的代码
import android.app.Activity;
import android.os.Bundle;
import java.util.ArrayList;
public class MainActivity extends Activity {
//String list[] = {"'梅卡拉'艳情出轨", "芳岛燕子穿比基尼大秀身材", "上海年轻失足女的自述", "90后美女无畏世俗眼光 尝试裸模"};
int IMG[] = {R.mipmap.img1, R.mipmap.img2, R.mipmap.img3, R.mipmap.img4};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RollHeaderView rollHeaderView = (RollHeaderView) findViewById(R.id.roll);
ArrayList<Integer> list = new ArrayList<>();
for (int i = 0; i < IMG.length; i++) {
list.add(IMG[i]);
}
rollHeaderView.setImgUrlData(list);
}
}
Activity 的布局样式
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/bannerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#D4D4D4"
android:orientation="vertical">
<com.example.vsat.test.RollHeaderView
android:id="@+id/roll"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.example.vsat.test.RollHeaderView>
</RelativeLayout>
实现了以上的代码 基本上就可以 实现无限轮播了
如果想要调节viewpager的滑动速度 我们则需要实现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;
/**
* Created by Administrator on 2016/11/11 0011.
*/
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();
}
}
}
使用自定义之后的滑动类
ViewPagerScroller pagerScroller = new ViewPagerScroller(this);
pagerScroller.setScrollDuration(1000);//设置时间,时间越长,速度越慢
pagerScroller.initViewPagerScroll(viewpager);
只需要把viewpager 设置进去就可以了,很简单,这样就实现了所有的东西了
主要的东西都贴上了 源码 也就没必要了