很多时候我们都需要用到 ViewPager 的小圆点,比如引导页,首页的轮播图。
有用过 ViewPagerindicator去实现,但是觉得太大。
后来自己写了个,在Acitivy中增加一个LinerLayout 去添加背景小点,然后再增加一个焦点Imageview去实现,然后通过监听viewpager的OnPageChangeListener去实现
但是发现复用性很差,同时导致activity臃肿。
于是通过自定义View的形式去实现了一个小圆点控件。下面上代码
import android.content.Context;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.ViewGroup;
import android.view.ViewTreeObserver;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
/**
* Created by chenxiaoli on 2017/4/28 0028.
* viewpager小圆点
*/
public class ViewPagerPoint extends RelativeLayout {
private Context context;
private int mPointDis = 40;
private int width;
private int dotOnfocusBackgroundResource;
private int dotFocusBackgroundResource;
private int length;
public ViewPagerPoint(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}
/**
*设置点个数,不设置则默认使用viewpager Adapter的条目数
*/
public void setLength(int length) {
this.length = length;
}
/**
* 设置点间距
*
* @param mPointDis
*/
public void setmPointDis(int mPointDis) {
this.mPointDis = mPointDis;
}
/**
* 设置背景圆点图
*
* @param dotFocusBackgroundResource
*/
public void setDotFocusBackgroundResource(int dotFocusBackgroundResource) {
this.dotFocusBackgroundResource = dotFocusBackgroundResource;
}
/**
* 设置焦点原点图
*
* @param dotOnfocusBackgroundResource
*/
public void setDotOnfocusBackgroundResource(int dotOnfocusBackgroundResource) {
this.dotOnfocusBackgroundResource = dotOnfocusBackgroundResource;
}
/**
* 关联viewpager
* @param viewPager
*/
public void setWithViewPager(ViewPager viewPager) {
if (length == 0) {
length = viewPager.getAdapter().getCount();
}
for (int i = 0; i < length; i++) {//添加背景小圆点
final ImageView ivDotOnfocus = new ImageView(context);
if (dotOnfocusBackgroundResource == 0) {
ivDotOnfocus.setBackgroundResource(R.mipmap.dot_normal);
} else {
ivDotOnfocus.setBackgroundResource(dotOnfocusBackgroundResource);
}
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
params.leftMargin = mPointDis * i;
ivDotOnfocus.setLayoutParams(params);
if (width == 0) {
width = ivDotOnfocus.getMeasuredWidth();
}
addView(ivDotOnfocus);
}
final ImageView ivDotFocus = new ImageView(context);//添加焦点小圆点
if (dotFocusBackgroundResource == 0) {
ivDotFocus.setBackgroundResource(R.mipmap.dot_focus);
} else {
ivDotFocus.setBackgroundResource(dotFocusBackgroundResource);
}
addView(ivDotFocus);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {//改变小圆点的位置
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = mPointDis * (position%length);
ivDotFocus.setLayoutParams(params);
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
需要注意的是:如果你在viewPager中使用了无限大的条目数去实现无限轮播的话,请在setWithViewPager()前调用setLength()方法确定背景圆点个数。
目前这个还比较简单,背景圆点图必须和焦点圆点图像素一致,不然会发生错位。
如果焦点圆点图像素较大,大家可以自己重新计算位置。
思路如下 焦点的向左偏移量 = 焦点半径-背景半径 。即可
大家还有什么问题可以评论中提问