Android_指引点View

来源：互联网发布：淘宝卖家取消订单投诉编辑：程序博客网时间：2024/05/01 22:42

项目中多多少少都会用到一个view,类似于indicatior,viewpager滑动到第几个,第几个点选中,本身这个东西实现由很多方式,并不难,可以在xml 写,但是代码量有点大,还是做成一个view拿来用就行,今天就带来这个简单的view

如下图:

这里写图片描述

我们只要像textview一样使用就能达到下面几个点点的效果,

首先我们分析下我们支持的扩展属性

">        <attr name="point_view_selector_background" format="reference" />        <attr name="point_view_point_size" format="dimension" />        <attr name="point_view_point_margin" format="dimension" />    </declare-styleable>

这里我提供了三个属性,一个是点点的选择状态,另外是点点的大小,和点点的间距,

ok,自定义属性,完毕,我们开始写我们的view

这个view其实继承viewgroup 比继承view好实现,所以我继承了Lxxxayout,
这样我们可以不用管方向只要管好里面子view的间距即可

如下;

我们在构造函数中获取自定义属性

    public ATDotPointView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        setOrientation(HORIZONTAL);        setGravity(Gravity.CENTER);        dotList = new ArrayList<>();        DisplayMetrics metrics = getResources().getDisplayMetrics();        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ATDotPointView, defStyleAttr, 0);        int indexCount = typedArray.getIndexCount();        for (int i = 0; i < indexCount; i++) {            int attr = typedArray.getIndex(i);            switch (attr) {                case R.styleable.ATDotPointView_point_view_selector_background:                    mDotPintBackgroundRes = typedArray.getResourceId(attr, 0);                    break;                case R.styleable.ATDotPointView_point_view_point_size:                    pointSize = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, POINT_DE_SIZE, metrics));                    break;                case R.styleable.ATDotPointView_point_view_point_margin:                    pointMargin = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, POINT_DE_MARGIN, metrics));                    break;            }        }        typedArray.recycle();        pointSize = pointSize == 0 ? (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, POINT_DE_SIZE, metrics) : pointSize;        pointMargin = pointMargin == 0 ? (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, POINT_DE_MARGIN, metrics) : pointMargin;    }

获取属性完毕后,我们提供生成一个小球的方法

/**     * generate dot point     */    private View generateDotPoint() {        View view = new View(getContext());        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pointSize, pointSize);        params.rightMargin = pointMargin;        view.setLayoutParams(params);        view.setBackgroundResource(mDotPintBackgroundRes);        return view;    }

直接返回一个view即可,

提供添加小球的方法

/**     * add point into point view     *     * @param dotPointCount point count;     */    public void addPoint2View(int dotPointCount) {        removeAllViews();        dotList.clear();        for (int i = 0; i < dotPointCount; i++) {            View dotPoint = generateDotPoint();            dotList.add(dotPoint);            addView(dotPoint);        }        // default first point select        setDotPointSelecedByInDex(0);    }

提供选中当前小球的方法

/**     * set point select     *     * @param index select index     */    public void setDotPointSelecedByInDex(int index) {        resetPointViewState();        dotList.get(index).setSelected(true);    }

ok 到此我们的view定义完毕,这样无论哪个界面用到指点的时候,只需要引入你的view即可,很简单下面把完整的view代码放下面.

public class ATDotPointView extends LinearLayout {    private static final int POINT_DE_SIZE = 9;    private static final float POINT_DE_MARGIN = 12;    private List<View> dotList;    private int mDotPintBackgroundRes;    private int pointSize;    private int pointMargin;    public ATDotPointView(Context context) {        this(context, null);    }    public ATDotPointView(Context context, AttributeSet attrs) {        this(context, attrs, 0);    }    public ATDotPointView(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        setOrientation(HORIZONTAL);        setGravity(Gravity.CENTER);        dotList = new ArrayList<>();        DisplayMetrics metrics = getResources().getDisplayMetrics();        TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ATDotPointView, defStyleAttr, 0);        int indexCount = typedArray.getIndexCount();        for (int i = 0; i < indexCount; i++) {            int attr = typedArray.getIndex(i);            switch (attr) {                case R.styleable.ATDotPointView_point_view_selector_background:                    mDotPintBackgroundRes = typedArray.getResourceId(attr, 0);                    break;                case R.styleable.ATDotPointView_point_view_point_size:                    pointSize = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, POINT_DE_SIZE, metrics));                    break;                case R.styleable.ATDotPointView_point_view_point_margin:                    pointMargin = typedArray.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, POINT_DE_MARGIN, metrics));                    break;            }        }        typedArray.recycle();        pointSize = pointSize == 0 ? (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, POINT_DE_SIZE, metrics) : pointSize;        pointMargin = pointMargin == 0 ? (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, POINT_DE_MARGIN, metrics) : pointMargin;    }    /**     * add point into point view     *     * @param dotPointCount point count;     */    public void addPoint2View(int dotPointCount) {        removeAllViews();        dotList.clear();        for (int i = 0; i < dotPointCount; i++) {            View dotPoint = generateDotPoint();            dotList.add(dotPoint);            addView(dotPoint);        }        // default first point select        setDotPointSelecedByInDex(0);    }    /**     * generate dot point     */    private View generateDotPoint() {        View view = new View(getContext());        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(pointSize, pointSize);        params.rightMargin = pointMargin;        view.setLayoutParams(params);        view.setBackgroundResource(mDotPintBackgroundRes);        return view;    }    /**     * set all point selected false     */    private void resetPointViewState() {        for (View pointView : dotList) {            pointView.setSelected(false);        }    }    /**     * set point select     *     * @param index select index     */    public void setDotPointSelecedByInDex(int index) {        resetPointViewState();        dotList.get(index).setSelected(true);    }}

0 0