ViewPager小圆点

很多时候我们都需要用到 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) {
            }
        });
    }
}
在Activity或者Fragment中只需要给ViewPager设置完Adapter后调用setWithViewPager()就可以使用了

需要注意的是:如果你在viewPager中使用了无限大的条目数去实现无限轮播的话,请在setWithViewPager()前调用setLength()方法确定背景圆点个数。

目前这个还比较简单,背景圆点图必须和焦点圆点图像素一致,不然会发生错位。

如果焦点圆点图像素较大,大家可以自己重新计算位置。

思路如下  焦点的向左偏移量 = 焦点半径-背景半径  。即可

大家还有什么问题可以评论中提问

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值