Android自定义view（三），简易的数值输入器

最新推荐文章于 2021-05-25 22:54:00 发布

宿罪

最新推荐文章于 2021-05-25 22:54:00 发布

阅读量3.1k

点赞数 1

分类专栏： Android进阶 Android进阶文章标签： android 控件迅雷自定义view 属性

本文链接：https://blog.csdn.net/ydxlt/article/details/50865352

版权

Android进阶同时被 2 个专栏收录

23 篇文章 4 订阅

订阅专栏

Android进阶

22 篇文章 0 订阅

订阅专栏

前言：前几天看到了迅雷app上有个一元夺宝，那时无聊就参加了几次，到后来中奖结果出来了，哎，根本就没我的份啊（意料之中），还好投的钱不多，就一块两块，不过，我看到了那里有个数值输入的效果，我当时想了想这个实现挺简单了，应该有很多种方式，于是做了个决定，如果没中奖，我就把那个数值输入器做出来以惩罚自己（开玩笑~），现在，该是兑现自己承诺的时候了。

先看看我们即将要实现的效果图：

这里写图片描述

大家看到这个效果，要实现这么一个控件，我们可以怎么做？

一开始，我心想，这还不简单，自定义一个view，然后分别画出左边的减号按钮，中间的输入控件，和右边的加法按钮，包括最外边的边框，最后重新view的事件监听方法，在里面判断点击的坐标，如果是点击了左边按钮的坐标范围，那么让中间的输入控件数值递减，如果是点击了右边按钮的坐标范围，那么让中间的输入按钮数值递增。

嗯，这听起来不错，好吧，我动手试着按照这种思路开始做了，当我在画中间的输入按钮的时候，我懵了，怎么才能画出一个可以让用户输入的控件？于是，我放弃了这种思路，开始了另一种思路。

接着，我想，这用类似组合控件的形式不是很简单吗，干嘛搞得那么复杂啊，这样一来，不是不仅不用自己画一个输入控件了，而且还不用计算点击坐标了。所以，下面将用组合控件的形式实现这个控件。

1. 自定义属性

为了提供控件的可定制性，我们需要自定义属性，观察上面的效果图，我们可以定义下面9个属性供用户使用（当然，你也可以定义其他的属性供用户定制）

border_color：边框的颜色
border_width：边框的宽度
minus_color：减号的颜色
minus_width：…
plus_color：加号的颜色
plus_width：…
min_value：允许的最小值
initial_value：初始值
max_value：允许的最大值

2. 自定义加减按钮

为了解决耦合问题，那个减号，加号按钮使用自定义view绘图来实现，不引用任何资源，这里以加号按钮为例，做个说明（在文章结尾将会贴上全部代码）。

class PlusView extends View{

    private Paint mPlusPaint;

    public PlusView(Context context) {
        this(context, null);
    }

    public PlusView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PlusView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mPlusPaint = new Paint();
        mPlusPaint.setAntiAlias(true);
        mPlusPaint.setStrokeWidth(mPlusWidth);
        mPlusPaint.setStyle(Paint.Style.STROKE);
        mPlusPaint.setStrokeCap(Paint.Cap.ROUND);
        mPlusPaint.setColor(mPlusColor);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        if(widthMode == MeasureSpec.AT_MOST){
            widthSize = Math.min(widthSize,100);
        }
        if(heightMode == MeasureSpec.AT_MOST){
            heightSize = Math.min(heightSize,100);
        }
        setMeasuredDimension(widthSize,heightSize);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();
        canvas.drawLine(mWidth - mWidth / 5, mHeight / 2, mWidth / 5, mHeight / 2, mPlusPaint);
        canvas.save();
        canvas.rotate(90, mWidth / 2, mHeight / 2);
        canvas.drawLine(mWidth / 5, mHeight / 2, mWidth - mWidth / 5, mHeight / 2, mPlusPaint);
        canvas.restore();
    }
}

这里自定义view，就是在测量的时候判断一些测量模式，如果是AT_MOST模式，那么给个最小值。测量完了以后，在onDraw()方法中画个加号就行了，对于自定义view不熟悉的可以参考这篇文章：android自定义view（一），打造绚丽的验证码

3. 继承LinearLayout实现控件组合

观察上面的效果图，可以看出这个控件的三部分是等宽的，所以，使用LinearLayout实现非常简单（weight属性），下面，定义类继承LinearLayout：

public class NumberInput extends LinearLayout {

    public NumberInput(Context context) {
        this(context, null);
    }

    public NumberInput(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NumberInput(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // viewGroup必须设置背景，这样才会调用onDraw()方法
        setBackgroundColor(Color.TRANSPARENT);
        init(context,attrs);
        initView(context);
    }
}

这里，三个构造方法的调用情况就不多说了，不懂的可以问度娘~。我们在构造方法中做了一些初始化的工作，包括获取布局属性值，添加子view等等。这里，要注意的事，viewGroup默认是不会调用onDraw()方法的，我们可以给它设置背景强制viewGroup调用onDraw()方法。

获取属性值：

/**
 * 获取自定义属性值
 */
private void init(Context context,AttributeSet attrs) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.NumberInput);
    mBorderColor = typedArray.getColor(R.styleable.NumberInput_border_color, Color.GRAY);
    mBorderWidth = typedArray.getDimension(R.styleable.NumberInput_border_width, 6);
    mMinusColor = typedArray.getColor(R.styleable.NumberInput_minus_color, Color.GRAY);
    mMinusWidth = typedArray.getDimension(R.styleable.NumberInput_minus_width, 5);
    mPlusColor = typedArray.getColor(R.styleable.NumberInput_plus_color, Color.GRAY);
    mPlusWidth = typedArray.getDimension(R.styleable.NumberInput_plus_width, 5);
    mInitialValue = typedArray.getInteger(R.styleable.NumberInput_initial_value, 0);
    mMinValue = typedArray.getInteger(R.styleable.NumberInput_min_value, Integer.MIN_VALUE);
    mMaxValue = typedArray.getInteger(R.styleable.NumberInput_max_value, Integer.MAX_VALUE);
    // 回收资源
    typedArray.recycle();
}

添加子View：

private void initView(Context context) {
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    params.gravity = Gravity.CENTER;
    params.setMargins(20, 6, 20, 6);
    params.weight = 1;

    mMinusButton = new MinusView(context);
    mMinusButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            int currentNum = Integer.valueOf(mEditText.getText().toString());
            currentNum--;
            mEditText.setText(currentNum + "");
        }
    });
    if(mInitialValue<=mMinValue){
        mMinusButton.setEnabled(false);
    }
    addView(mMinusButton, params);

    mEditText = new EditText(context);
    // 做个判断，如果给的初始值小于最小值，那么初始值就是最小值
    // 如果给的初始值大于最大值，那么初始值就是最大值
    if(mInitialValue<=mMinValue){
        mEditText.setText(mMinValue + "");
    }else if(mInitialValue>=mMaxValue){
        mEditText.setText(mMaxValue + "");
    }else {
        mEditText.setText(mInitialValue + "");
    }
    mEditText.requestFocus();
    mEditText.setGravity(Gravity.CENTER);
    mEditText.setInputType(InputType.TYPE_CLASS_NUMBER);
    // 去除默认的下划线
    mEditText.setBackground(null);
    mEditText.addTextChangedListener(mWatcher);
    addView(mEditText, params);

    mPlusButton = new PlusView(context);
    params.weight = 1;
    mPlusButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            int currentNum = Integer.valueOf(mEditText.getText().toString());
            currentNum++;
            mEditText.setText(currentNum + "");
        }
    });
    if(mInitialValue>=mMaxValue){
        mPlusButton.setEnabled(false);
    }
    addView(mPlusButton,params);
}

这里相信大家都看得懂，就是用代码分别添加了左边按钮，中间的输入控件和右边的按钮，并做了一些初始判断操作和绑定点击事件的操作，其中，给EditView添加了文本改变监听：

private TextWatcher mWatcher = new TextWatcher() {
    @Override
    public void beforeTextChanged(CharSequence s, int start, int count, int after) {

    }

    @Override
    public void onTextChanged(CharSequence s, int start, int before, int count) {
        int value = Integer.valueOf(mEditText.getText().toString());
        if(value<=mMinValue){
            mMinusButton.setEnabled(false);
        }else{
            mMinusButton.setEnabled(true);
        }
        if(value>=mMaxValue){
            mPlusButton.setEnabled(false);
        }else{
            mPlusButton.setEnabled(true);
        }
    }

    @Override
    public void afterTextChanged(Editable s) {

    }
};

完成了子控件的添加，那么，这个容器还需要绘制最外边和中间的边框

@Override
protected void onDraw(Canvas canvas) {
    mWidth = getMeasuredWidth();
    mHeight = getMeasuredHeight();

    Paint borderPaint = new Paint();
    borderPaint.setAntiAlias(true);
    borderPaint.setStrokeWidth(mBorderWidth);
    borderPaint.setStyle(Paint.Style.STROKE);
    borderPaint.setColor(mBorderColor);

    canvas.drawRect(0, 0, mWidth, mHeight, borderPaint);
    borderPaint.setStrokeWidth(mBorderWidth/2);
    canvas.drawLine(mWidth / 3 - mBorderWidth/2, 0, mWidth / 3 - mBorderWidth/2, mHeight, borderPaint);
    canvas.drawLine(mWidth * 2 / 3 - mBorderWidth/2, 0, mWidth * 2 / 3 - mBorderWidth/2, mHeight, borderPaint);
}

最后将编辑控件中的数值暴露出去：

/**
 * 返回控件中的数值
 * @return 数值
 */
public int getNumber(){
    return Integer.valueOf(mEditText.getText().toString());
}

都这里，这个简易的数值输入器就基本完工了。

4. 使用控件

万事具备，只欠测试了，所以，写一个测试的布局文件，如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:layout_height="match_parent"
    >

    <com.example.lt.custom_number_input.NumberInput
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        custom:initial_value="11"
        custom:min_value="0"
        custom:max_value="10"
        android:background="@android:color/transparent"
        android:layout_height="wrap_content">
    </com.example.lt.custom_number_input.NumberInput>

    <com.example.lt.custom_number_input.NumberInput
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="30dp"
        custom:border_color="#69BAD8"
        custom:plus_color="#DD4814"
        custom:initial_value="-1"
        custom:min_value="0"
        custom:max_value="10"
        android:background="@android:color/transparent"
        android:layout_height="wrap_content">
    </com.example.lt.custom_number_input.NumberInput>

    <com.example.lt.custom_number_input.NumberInput
        android:layout_width="240dp"
        android:layout_marginTop="30dp"
        android:layout_centerInParent="true"
        custom:initial_value="0"
        custom:min_value="0"
        custom:max_value="10"
        android:background="@android:color/transparent"
        android:layout_height="80dp">
    </com.example.lt.custom_number_input.NumberInput>
</LinearLayout>

将这个布局文件作为activity的内容视图，运行这个应用就可以测试效果了。

由于只是这个控件只是一个类而已，并没有涉及什么图片资源，所以就不麻烦大家下载了，直接贴上完整代码：

NumberInput.java

package com.example.lt.custom_number_input;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.text.Editable;
import android.text.InputType;
import android.text.TextWatcher;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by lt on 2016/3/12.
 */
public class NumberInput extends LinearLayout {

    private int mHeight;
    private int mWidth;
    private EditText mEditText;
    private int mBorderColor;
    private float mBorderWidth;
    private int mMinusColor;
    private float mMinusWidth;
    private int mPlusColor;
    private float mPlusWidth;
    private int mInitialValue;
    private int mMinValue;
    private int mMaxValue;
    private TextWatcher mWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            int value = Integer.valueOf(mEditText.getText().toString());
            if(value<=mMinValue){
                mMinusButton.setEnabled(false);
            }else{
                mMinusButton.setEnabled(true);
            }
            if(value>=mMaxValue){
                mPlusButton.setEnabled(false);
            }else{
                mPlusButton.setEnabled(true);
            }
        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    };
    private View mPlusButton;
    private View mMinusButton;

    public NumberInput(Context context) {
        this(context, null);
    }

    public NumberInput(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public NumberInput(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // viewGroup必须设置背景，这样才会调用onDraw()方法
        setBackgroundColor(Color.TRANSPARENT);
        init(context,attrs);
        initView(context);
    }

    /**
     * 获取自定义属性值
     */
    private void init(Context context,AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.NumberInput);
        mBorderColor = typedArray.getColor(R.styleable.NumberInput_border_color, Color.GRAY);
        mBorderWidth = typedArray.getDimension(R.styleable.NumberInput_border_width, 6);
        mMinusColor = typedArray.getColor(R.styleable.NumberInput_minus_color, Color.GRAY);
        mMinusWidth = typedArray.getDimension(R.styleable.NumberInput_minus_width, 5);
        mPlusColor = typedArray.getColor(R.styleable.NumberInput_plus_color, Color.GRAY);
        mPlusWidth = typedArray.getDimension(R.styleable.NumberInput_plus_width, 5);
        mInitialValue = typedArray.getInteger(R.styleable.NumberInput_initial_value, 0);
        mMinValue = typedArray.getInteger(R.styleable.NumberInput_min_value, Integer.MIN_VALUE);
        mMaxValue = typedArray.getInteger(R.styleable.NumberInput_max_value, Integer.MAX_VALUE);
        // 回收资源
        typedArray.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        mWidth = getMeasuredWidth();
        mHeight = getMeasuredHeight();

        Paint borderPaint = new Paint();
        borderPaint.setAntiAlias(true);
        borderPaint.setStrokeWidth(mBorderWidth);
        borderPaint.setStyle(Paint.Style.STROKE);
        borderPaint.setColor(mBorderColor);

        canvas.drawRect(0, 0, mWidth, mHeight, borderPaint);
        borderPaint.setStrokeWidth(mBorderWidth/2);
        canvas.drawLine(mWidth / 3 - mBorderWidth/2, 0, mWidth / 3 - mBorderWidth/2, mHeight, borderPaint);
        canvas.drawLine(mWidth * 2 / 3 - mBorderWidth/2, 0, mWidth * 2 / 3 - mBorderWidth/2, mHeight, borderPaint);
    }

    private void initView(Context context) {
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.gravity = Gravity.CENTER;
        params.setMargins(20, 6, 20, 6);
        params.weight = 1;

        mMinusButton = new MinusView(context);
        mMinusButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                int currentNum = Integer.valueOf(mEditText.getText().toString());
                currentNum--;
                mEditText.setText(currentNum + "");
            }
        });
        if(mInitialValue<=mMinValue){
            mMinusButton.setEnabled(false);
        }
        addView(mMinusButton, params);

        mEditText = new EditText(context);
        // 做个判断，如果给的初始值小于最小值，那么初始值就是最小值
        // 如果给的初始值大于最大值，那么初始值就是最大值
        if(mInitialValue<=mMinValue){
            mEditText.setText(mMinValue + "");
        }else if(mInitialValue>=mMaxValue){
            mEditText.setText(mMaxValue + "");
        }else {
            mEditText.setText(mInitialValue + "");
        }
        mEditText.requestFocus();
        mEditText.setGravity(Gravity.CENTER);
        mEditText.setInputType(InputType.TYPE_CLASS_NUMBER);
        // 去除默认的下划线
        mEditText.setBackground(null);
        mEditText.addTextChangedListener(mWatcher);
        addView(mEditText, params);

        mPlusButton = new PlusView(context);
        params.weight = 1;
        mPlusButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                int currentNum = Integer.valueOf(mEditText.getText().toString());
                currentNum++;
                mEditText.setText(currentNum + "");
            }
        });
        if(mInitialValue>=mMaxValue){
            mPlusButton.setEnabled(false);
        }
        addView(mPlusButton,params);
    }

    class MinusView extends View{

        private Paint mMinusPaint;

        public MinusView(Context context) {
            this(context, null);
        }

        public MinusView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }

        public MinusView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            mMinusPaint = new Paint();
            mMinusPaint.setAntiAlias(true);
            mMinusPaint.setStrokeWidth(mMinusWidth);
            mMinusPaint.setStyle(Paint.Style.STROKE);
            mMinusPaint.setStrokeCap(Paint.Cap.ROUND);
            mMinusPaint.setColor(mMinusColor);
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightSize = MeasureSpec.getSize(heightMeasureSpec);

            if(widthMode == MeasureSpec.AT_MOST){
                widthSize = Math.min(widthSize,80);
            }
            if(heightMode == MeasureSpec.AT_MOST){
                heightSize = Math.min(heightSize,80);
            }
            setMeasuredDimension(widthSize, heightSize);

        }

        /**
         * 返回控件中的数值
         * @return 数值
         */
        public int getNumber(){
            return Integer.valueOf(mEditText.getText().toString());
        }


        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mWidth = getMeasuredWidth();
            mHeight = getMeasuredHeight();
            canvas.drawLine(mWidth/5,mHeight/2,mWidth-mWidth/5,mHeight/2,mMinusPaint);
        }
    }

    class PlusView extends View{

        private Paint mPlusPaint;

        public PlusView(Context context) {
            this(context, null);
        }

        public PlusView(Context context, AttributeSet attrs) {
            this(context, attrs, 0);
        }

        public PlusView(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
            mPlusPaint = new Paint();
            mPlusPaint.setAntiAlias(true);
            mPlusPaint.setStrokeWidth(mPlusWidth);
            mPlusPaint.setStyle(Paint.Style.STROKE);
            mPlusPaint.setStrokeCap(Paint.Cap.ROUND);
            mPlusPaint.setColor(mPlusColor);
        }

        @Override
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            int widthMode = MeasureSpec.getMode(widthMeasureSpec);
            int heightMode = MeasureSpec.getMode(heightMeasureSpec);
            int widthSize = MeasureSpec.getSize(widthMeasureSpec);
            int heightSize = MeasureSpec.getSize(heightMeasureSpec);

            if(widthMode == MeasureSpec.AT_MOST){
                widthSize = Math.min(widthSize,100);
            }
            if(heightMode == MeasureSpec.AT_MOST){
                heightSize = Math.min(heightSize,100);
            }
            setMeasuredDimension(widthSize,heightSize);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            mWidth = getMeasuredWidth();
            mHeight = getMeasuredHeight();
            canvas.drawLine(mWidth - mWidth / 5, mHeight / 2, mWidth / 5, mHeight / 2, mPlusPaint);
            canvas.save();
            canvas.rotate(90, mWidth / 2, mHeight / 2);
            canvas.drawLine(mWidth / 5, mHeight / 2, mWidth - mWidth / 5, mHeight / 2, mPlusPaint);
            canvas.restore();
        }
    }
}

总结

这个控件可能不是很完善，大家可以试着扩展一下它，比如：多定制一些属性，添加加减按钮不可用时按钮显示的颜色（这里提示一下，可以在我们添加的那个文本监听器中监听文本的变化，如果超出范围，那就改变一下画笔颜色的那个全局变量，再让加减按钮重新绘制即可(调用View的postInvalidate()方法））。

宿罪

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
5
评论
Android自定义view（三），简易的数值输入器

前言：前几天看到了迅雷app上有个一元夺宝，那时无聊就参加了几次，到后来中奖结果出来了，哎，根本就没我的份啊（意料之中），还好投的钱不多，就一块两块，哈哈。不过，我看到了那里有个数值输入的效果，我当时想了想这个实现挺简单了，应该有很多种方式，于是做了个决定，如果没中奖，我就把那个数值输入器做出来以惩罚自己（开玩笑~），现在，该是兑现自己承诺的时候了。先看看我们即将要实现的效果图：大家看到这个效果，要
复制链接

扫一扫