Android自定义View实现BMI指数条

下面是详细讲解Android自定义View实现BMI指数条的完整攻略：

1. 概述

BMI指数条是一种可以通过用户输入身高和体重来计算出BMI指数并展示的自定义View。在这个过程中，我们需要实现以下功能：

绘制指数条：根据BMI指数所处的范围，在自定义View内部绘制一个水平的指数条，显示出用户的BMI指数。
计算BMI指数：通过用户输入的身高体重数据计算出BMI指数，并在指数条上显示出来。
自定义样式：允许用户自定义指数条的样式，如条的颜色、宽度、背景色等。

2. 实现步骤

步骤一：自定义View

首先，我们需要自定义一个View来实现这个功能，我们可以继承自View或者ViewGroup类。这里我们选择继承自View类来完成。

我们先来看一下自定义View的基本结构，一个自定义View类通常包括以下几个部分：

public class BMICustomView extends View {

    public BMICustomView(Context context) {
        super(context);
        // 初始化视图
        init();
    }

    public BMICustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        // 初始化视图
        init();
    }

    public BMICustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 初始化视图
        init();
    }

    // 初始化视图的方法
    private void init() {
        // 初始化逻辑
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制视图的方法
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // 测量视图大小的方法
    }

    // 其他可覆盖的方法
}

构造函数：构造函数用来初始化自定义View相关的数据和逻辑，通常有三个参数的构造函数是必须实现的，分别是上下文、属性集和样式。其中，第二个参数代表XML属性集，通过它我们可以从XML中获取一些设置的属性值，如果没有设置，则为空。
初始化方法：init()方法用来初始化自定义View相关的数据和逻辑，比如初始化画笔、颜色等等。
绘制方法：在绘制View时，系统会调用onDraw()方法来绘制视图内容。
测量方法：当我们使用自定义View的时候，系统会自动调用测量控件大小的方法onMeasure()方法。在这个方法中，我们需要计算出自定义View所需要的大小。

步骤二：计算BMI指数

为了计算BMI指数，我们需要根据用户输入的身高和体重信息来进行计算。BMI指数计算公式为：BMI = 体重（kg） / 身高 ^ 2（m）。

因此，我们可以在自定义View中添加两个属性，分别代表用户输入的身高和体重：

public class BMICustomView extends View {

    private float mHeight;  // 身高
    private float mWeight;  // 体重

    // 构造函数...

    // 初始化方法...

    // 绘制方法...

    // 测量方法...

    // 计算BMI指数的方法
    private float calculateBMI() {

        if (mHeight == 0 || mWeight == 0) {
            return 0;
        }

        float bmi = mWeight / (mHeight * mHeight); // 计算BMI指数

        return bmi;
    }

}

在计算出BMI指数后，我们可以根据所处的范围来绘制对应的指数条，比如：

private void drawBMI(Canvas canvas, float bmi) {

    float barWidth = getWidth() - 2 * mPaddingX;
    float barHeight = mBarHeight;

    // 计算出BMI指数所对应的比例
    float progress = getProgress(bmi);

    // 绘制进度条背景
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(mBgColor);
    canvas.drawRect(mPaddingX, getHeight() - mPaddingY - barHeight,
            getWidth() - mPaddingX, getHeight() - mPaddingY, mPaint);

    // 绘制进度条填充
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setColor(mBarColor);
    canvas.drawRect(mPaddingX, getHeight() - mPaddingY - barHeight,
            mPaddingX + progress * barWidth, getHeight() - mPaddingY, mPaint);

    // 绘制当前BMI指数值
    mPaint.setStyle(Paint.Style.FILL);
    mPaint.setTextSize(mTextSize);
    mPaint.setColor(mTextColor);
    canvas.drawText(String.format("%.1f", bmi), mPaddingX + progress * barWidth + 10, getHeight() - mPaddingY - mTextSize, mPaint);
}

该方法会在用户输入身高体重数据后，将计算出的BMI指数在自定义View中绘制出来。

步骤三：自定义样式

用户通常会希望自定义指数条的样式，我们可以通过为自定义View添加自定义属性来实现。

首先，我们可以定义一些自定义属性，比如：

<declare-styleable name="BMICustomView">
    <!-- 身高 -->
    <attr name="height" format="float" />
    <!-- 体重 -->
    <attr name="weight" format="float" />
    <!-- 指数条高度 -->
    <attr name="barHeight" format="dimension" />
    <!-- 指数条宽度 -->
    <attr name="barWidth" format="dimension" />
    <!-- 指数条背景色 -->
    <attr name="bgColor" format="color" />
    <!-- 指数条填充色 -->
    <attr name="barColor" format="color" />
    <!-- 指数值文字大小 -->
    <attr name="textSize" format="dimension" />
    <!-- 指数值文字颜色 -->
    <attr name="textColor" format="color" />
</declare-styleable>

然后，在构造函数中获取自定义属性的值，并根据值进行设置，比如：

public class BMICustomView extends View {

    // 声明自定义属性
    private float mHeight;          // 身高
    private float mWeight;          // 体重
    private float mBarHeight;       // 指数条高度
    private float mBarWidth;        // 指数条宽度
    private int mBgColor;           // 指数条背景色
    private int mBarColor;          // 指数条填充色
    private float mTextSize;        // 指数值文字大小
    private int mTextColor;         // 指数值文字颜色

    public BMICustomView(Context context) {
        super(context);
        // 初始化视图
        init(null, 0);
    }

    public BMICustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        // 初始化视图
        init(attrs, 0);
    }

    public BMICustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        // 初始化视图
        init(attrs, defStyleAttr);
    }

    // 初始化视图的方法
    private void init(AttributeSet attrs, int defStyleAttr) {

        // 获取自定义属性的值
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.BMICustomView, defStyleAttr, 0);
        mHeight = a.getFloat(R.styleable.BMICustomView_height, 0);
        mWeight = a.getFloat(R.styleable.BMICustomView_weight, 0);
        mBarHeight = a.getDimension(R.styleable.BMICustomView_barHeight, 20);
        mBarWidth = a.getDimension(R.styleable.BMICustomView_barWidth, 0);
        mBgColor = a.getColor(R.styleable.BMICustomView_bgColor, Color.parseColor("#E0E0E0"));
        mBarColor = a.getColor(R.styleable.BMICustomView_barColor, Color.parseColor("#4CAF50"));
        mTextSize = a.getDimension(R.styleable.BMICustomView_textSize, 20);
        mTextColor = a.getColor(R.styleable.BMICustomView_textColor, Color.parseColor("#FFFFFF"));
        a.recycle();

        // 初始化逻辑
    }

    // 其他方法...

}

在设置完自定义属性后，用户就可以在XML中对自定义View进行自定义属性的设置：

<com.example.BMICustomView
    android:id="@+id/custom_view"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    app:height="1.75"
    app:weight="60"
    app:barHeight="20dp"
    app:barWidth="300"
    app:bgColor="#E0E0E0"
    app:barColor="#4CAF50"
    app:textSize="20sp"
    app:textColor="#FFFFFF" />

这样用户就可以很方便地自定义指数条的样式了。

3. 示例

下面是两条实现BMI指数条的示例说明：

示例一：单行自定义View

在这个示例中，我们会创建一个单行的自定义View，用户通过输入身高和体重，可以计算出BMI指数，并在自定义View中绘制对应的指数条。

1. 创建自定义View

首先，在项目中创建一个名为BMICustomView的自定义View类，并在类中添加如下代码：

public class BMICustomView extends View {

    // 定义一些参数
    private float mHeight;          // 身高
    private float mWeight;          // 体重
    private float mBarHeight;       // 指数条高度
    private float mBarWidth;        // 指数条宽度
    private int mBgColor;           // 指数条背景色
    private int mBarColor;          // 指数条填充色
    private float mTextSize;        // 指数值文字大小
    private int mTextColor;         // 指数值文字颜色
    private float mPaddingX;        // X轴内边距
    private float mPaddingY;        // Y轴内边距

    private Paint mPaint = new Paint();   // 画笔

    public BMICustomView(Context context) {
        super(context);
        init(null, 0);
    }

    public BMICustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(attrs, 0);
    }

    public BMICustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs, defStyleAttr);
    }

    private void init(AttributeSet attrs, int defStyle) {

        // 获取自定义属性的值
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.BMICustomView, defStyle, 0);
        mHeight = a.getFloat(R.styleable.BMICustomView_height, 0);
        mWeight = a.getFloat(R.styleable.BMICustomView_weight, 0);
        mBarHeight = a.getDimension(R.styleable.BMICustomView_barHeight, 20);
        mBarWidth = a.getDimension(R.styleable.BMICustomView_barWidth, 0);
        mBgColor = a.getColor(R.styleable.BMICustomView_bgColor, Color.parseColor("#E0E0E0"));
        mBarColor = a.getColor(R.styleable.BMICustomView_barColor, Color.parseColor("#4CAF50"));
        mTextSize = a.getDimension(R.styleable.BMICustomView_textSize, 20);
        mTextColor = a.getColor(R.styleable.BMICustomView_textColor, Color.parseColor("#FFFFFF"));
        a.recycle();

        mPaddingX = mBarHeight * 2;
        mPaddingY = mBarHeight / 2;

        mPaint.setAntiAlias(true);
    }


    // 绘制BMI指数条
    private void drawBMI(Canvas canvas, float bmi) {

        float barWidth = getWidth() - 2 * mPaddingX;
        float barHeight = mBarHeight;

        // 计算出BMI指数所对应的比例
        float progress = getProgress(bmi);

        // 绘制进度条背景
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mBgColor);
        canvas.drawRect(mPaddingX, getHeight() - mPaddingY - barHeight,
                getWidth() - mPaddingX, getHeight() - mPaddingY, mPaint);

        // 绘制进度条填充
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mBarColor);
        canvas.drawRect(mPaddingX, getHeight() - mPaddingY - barHeight,
                mPaddingX + progress * barWidth, getHeight() - mPaddingY, mPaint);

        // 绘制当前BMI指数值
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(mTextSize);
        mPaint.setColor(mTextColor);
        canvas.drawText(String.format("%.1f", bmi), mPaddingX + progress * barWidth + 10, getHeight() - mPaddingY - mTextSize, mPaint);
    }

    // 计算BMI指数
    private float calculateBMI() {

        if (mHeight == 0 || mWeight == 0) {
            return 0;
        }

        float bmi = mWeight / (mHeight * mHeight);

        return bmi;
    }

    // 获取指数值所对应的比例
    private float getProgress(float bmi) {

        if (bmi <= 0 || bmi > 100) {
            return 0;
        }

        float progress = 0;

        if (bmi < 18.5) {
            progress = bmi / 18.5f * 0.25f;
        } else if (bmi < 25) {
            progress = (bmi - 18.5f) / 6.5f * 0.25f + 0.25f;
        } else if (bmi < 30) {
            progress = (bmi - 25f) / 5f * 0.25f + 0.5f;
        } else {
            progress = (bmi - 30f) / 70f * 0.25f + 0.75f;
        }

        return progress;
    }

    // 处理测量尺寸
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        int width = 0;
        int height = 0;

        if (widthMode == MeasureSpec.EXACTLY) {
            width = widthSize;
        } else {
            width = (int) (getPaddingLeft() + mPaddingX * 2 + mBarWidth + getPaddingRight());
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            height = heightSize;
        } else {
            height = (int) (getPaddingTop() + mPaddingY * 2 + mBarHeight + mTextSize + getPaddingBottom());
        }

        setMeasuredDimension(width, height);
    }

    // 处理绘制
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        float bmi = calculateBMI();

        drawBMI(canvas, bmi);
    }

    // 设置身高
    public void setHeight(float height) {
        mHeight = height;
        invalidate();
    }

    // 设置体重
    public void setWeight(float weight) {
        mWeight = weight;
        invalidate();
    }

    // 设置指数条宽度
    public void setBarWidth(float width) {
        mBarWidth = width;
        invalidate();
    }

    // 设置指数条高度
    public void setBarHeight(float height) {
        mBarHeight = height;
        invalidate();
    }

    // 设置指数条背景色
    public void setBgColor(int color) {
        mBgColor = color;
        invalidate();
    }

    // 设置指数条填充色
    public void setBarColor(int color) {
        mBarColor = color;
        invalidate();
    }

    // 设置指数文字大小
    public void setTextSize(float size) {
        mTextSize = size;
        invalidate();
    }

    // 设置指数文字颜色
    public void setTextColor(int color) {
        mTextColor = color;
        invalidate();
    }
}

2. 布局文件

在项目中创建一个

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Android自定义View实现BMI指数条 - Python技术站