使用ViewPager实现轮播图
原理就是把viewpager的count设置的很大,然后把当前item也设置到很大,这样前后翻都好像翻不到头。
先来个指示器的类,就是几个点,显示当前选中了第几个,以前都是写一个linearLayout放一堆ImageView来实现,感觉逼格有点低,就自定义个view实现。这也能用在引导图或多个图片下面之类的地方。
效果图
代码:
private Paint paint;
private int num;//一共几个点
private int itemWidth;//每个点的大小
private int index;//当前显示的第几个
private int colorNormal;//默认颜色
private int colorSelect;//选中颜色
public RIndicatorView(Context context) {
this(context, null);
}
public RIndicatorView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RIndicatorView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RIndicatorView, defStyleAttr, 0);
num = array.getInt(R.styleable.RIndicatorView_number, 3);
itemWidth = array.getDimensionPixelSize(R.styleable.RIndicatorView_itemWidth, 30);
colorNormal = array.getColor(R.styleable.RIndicatorView_colorNormal, 0x88ffffff);
colorSelect = array.getColor(R.styleable.RIndicatorView_colorSelect, 0xffffffff);
array.recycle();
init();
}
private void init() {
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int width = (num * 2 - 1) * itemWidth;
setMeasuredDimension(width, itemWidth);//高度就是单个点的高度,这里设置点间距和点宽度一样。
}
//设置点个数
public void setNum(int num) {
this.num = num;
invalidate();
}
//设置当前第几个
public void setIndex(int index) {
this.index = index;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float x;
float y = itemWidth / 2;
for (int i = 0; i < num; i++) {
x = (i * 2 + 0.5f) * itemWidth;
if (i == index) {
paint.setColor(colorSelect);
} else {
paint.setColor(colorNormal);
}
canvas.drawCircle(x, y, itemWidth / 2, paint);
}
}
自定义属性:
<declare-styleable name="RIndicatorView">
<attr name="number" format="integer" />
<attr name="itemWidth" format="dimension" />
<attr name="colorNormal" format="color" />
<attr name="colorSelect" format="color" />
</declare-styleable>
用法:
<com.rsd.view.RIndicatorView
android:layout_width="wrap_content"
app:itemWidth="8dp"
android:layout_height="wrap_content"
app:colorNormal="@color/white"
app:colorSelect="@color/red" />
轮播图布局是后面放一个viewpager前面一个指示器
代码:
private static final int DelayTime = 4000;//隔几秒刷新
private static final int CHANGE_PIC = 0;
private Context context;
private ViewPager viewPager;
private RIndicatorView indicator;
private BannerAdapter adapter;
private int size;
private List<RBanner> list;//数据列表
private OnItemClickListener onClickListener;
private LoopTouchListener loopTouchListener;
private Handler handler = new Handler() {
public void handleMessage(Message msg) {
switch (msg.what) {
case CHANGE_PIC:
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
sendEmptyMessageDelayed(CHANGE_PIC, DelayTime);
break;
}
}
};
private ViewPager.OnPageChangeListener pageChangeListener = new ViewPager.OnPageChangeListener() {
public void onPageSelected(int arg0) {
if (size == 0) {
return;
}
indicator.setIndex(arg0 % size);//改变指示器位置
}
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
public void onPageScrollStateChanged(int arg0) {
}
};
private View.OnTouchListener touchListener = new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
//滑动的时候不让滑动
if (loopTouchListener != null) {
loopTouchListener.onTouch();
}
handler.removeMessages(CHANGE_PIC);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
//手抬起后又开始滑动
if (loopTouchListener != null) {
loopTouchListener.onCancel();
}
handler.removeMessages(CHANGE_PIC);
if (size>1) {
handler.sendEmptyMessageDelayed(CHANGE_PIC, DelayTime);
}
break;
}
return false;
}
};
public RBannerView(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public RBannerView(Context context) {
this(context, null);
}
private void init(Context context) {
this.context = context;
LayoutInflater.from(context).inflate(R.layout.view_banner, this);
viewPager = (ViewPager) findViewById(R.id.banner_viewPager);
indicator = (RIndicatorView) findViewById(R.id.banner_indicator);
adapter = new BannerAdapter();
if (viewPager != null) {
viewPager.setOnPageChangeListener(pageChangeListener);
viewPager.setOnTouchListener(touchListener);
viewPager.setAdapter(adapter);
}
}
//设置数据的方法
public void setData(List<RBanner> list) {
if (list == null || list.isEmpty()) {
return;
}
this.list = list;
this.size = list.size();
initData();
}
private void initData() {
adapter = new BannerAdapter();
viewPager.setAdapter(adapter);
indicator.setNum(size);
viewPager.setCurrentItem(size * 1000); 设置当前要是点数的整数倍,要不默认选中就不是第一个了
handler.removeMessages(CHANGE_PIC);//移除是为了防止第二次设置数据handler重复接收消息
if (size <= 1) {
return;
}//一张图就不让滚动了
handler.sendEmptyMessageDelayed(CHANGE_PIC, DelayTime);
}
public void setLoopTouchListener(LoopTouchListener loopTouchListener) {
this.loopTouchListener = loopTouchListener;
}
public void setOnItemClickListener(OnItemClickListener clickListener) {
this.onClickListener = clickListener;
}
public interface OnItemClickListener {
public void onBannerClick(int position);//单张点击事件
}
public interface LoopTouchListener {
public void onTouch();
public void onCancel();
}
private class BannerAdapter extends PagerAdapter {
private View.OnClickListener clickListener = new View.OnClickListener() {
public void onClick(View v) {
if (onClickListener != null) {
int position = (Integer) v.getTag();
onClickListener.onBannerClick(position);
}
}
};
public int getCount() {
if (list == null) {
return 0;
}
return Integer.MAX_VALUE >> 3;
}
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
public Object instantiateItem(ViewGroup container, int position) {
position = position % size;
ImageView imageView = new ImageView(context);
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setTag(position);
imageView.setOnClickListener(clickListener);
imageView.setImageResource(R.mipmap.ic_launcher);
container.addView(imageView);
//ImageLoader.getInstance().displayImage(list.get(position).getUrl(), imageView, App.head);
return imageView;
}
public void finishUpdate(View arg0) {
}
;
public void restoreState(Parcelable state, ClassLoader loader) {
}
public Parcelable saveState() {
return null;
}
public void startUpdate(View arg0) {
}
public int getItemPosition(Object object) {
return POSITION_NONE;
}
}
RBanner类里面暂时就一个图片地址,可以扩展加标题等