Android语言基础教程（41）Android用户界面设计中的控制UI界面之开发自定义的View：别再用模板了！手把手教你打造专属Android“变形金刚View”，让你的APP秀出天际！

嘿，各位正在Android开发路上“打怪升级”的小伙伴们，有没有遇到过这种尴尬：产品经理拿着某个“炫酷”的UI设计稿跑来，你一看，心里咯噔一下——“这按钮长得也太非主流了，系统自带的Button根本实现不了啊！”

别慌，今天咱们就来彻底攻克这个难题！我将带你深入Android用户界面设计中最硬核、也最能体现程序员“骚操作” 的部分——开发自定义View。这就像是给你一套乐高积木，而不是一个成品玩具，让你能自由拼出任何你想象中的样子。

一、为什么想不开要“造轮子”？系统View不香吗？

说实话，系统提供的Button、TextView这些标准控件在大多数情况下是真香。它们稳定、高效，拿来就能用。但当我们遇到以下这些场景时，就不得不撸起袖子，自己上了：

1. 奇葩的UI效果：比如一个会随着进度变色的圆形进度条，或者一个带有复杂动画的导航栏。系统的ProgressBar只能让你改个颜色和样式，要实现“七十二变”，那就得自定义。
2. 极致的性能需求：在某些对性能要求极高的场景（如游戏、图表绘制），使用系统View层层嵌套的布局可能会造成性能瓶颈。一个轻量级、自己掌控一切的自定义View能带来更流畅的体验。
3. 高度复用的组件：当你发现某个UI组合在项目中反复出现，把它封装成一个自定义View，能极大提高代码的复用性和可维护性，告别“复制粘贴大法”。

简单来说，自定义View就是你从“API调用者”迈向“框架设计者”的关键一步。它让你不再受限于系统提供的“标准件”，可以尽情挥洒创意。

二、自定义View的“内功心法”：三大流程

在开始写代码前，我们必须了解自定义View的三大核心流程：测量（Measure）、布局（Layout） 和绘制（Draw）。这好比盖房子，得先量好地基（测量），然后规划每个房间的位置（布局），最后才是装修粉刷（绘制）。

• onMeasure(int widthMeasureSpec, int heightMeasureSpec)：这是最关键的一步！ 系统会通过这个方法来问你：“你这个View想占多大地方啊？” 它会传入两个参数（widthMeasureSpec和heightMeasureSpec），这可不是简单的宽高值，而是包含了模式和尺寸的复合信息。

• • 模式有三种：EXACTLY（精确值，比如设置了100dp或match_parent）、AT_MOST（最多不能超过，比如wrap_content）、UNSPECIFIED（不限制，少见）。
  • 你的任务就是根据这些模式，计算出你的View最终需要的宽和高，然后调用setMeasuredDimension(width, height)方法把这个结果告诉系统。这一步算错了，后面全白搭！

• onLayout(boolean changed, int left, int top, int right, int bottom)：这个方法主要用于ViewGroup（容器类View），用来确定它子View的位置。如果你只是自定义一个单一的、不包含其他子View的组件，通常不需要重写这个方法。
• onDraw(Canvas canvas)：这里就是展现你艺术细胞的地方！ 系统会给你一个“画布”（Canvas）和一支“画笔”（Paint）。你可以在这个方法里，通过Canvas绘制圆形、矩形、文字、路径，甚至图片。你想让View长什么样，就在这里画出来。

三、实战：打造一个“会读心术”的智能按钮

光说不练假把式。下面我们一起来创造一个SmartButton，它有以下超能力：

1. 默认是蓝色的圆角矩形。
2. 当用户手指按下时，它会变成一个更深的蓝色，提供按压反馈。
3. 当进度改变时（比如从0%到100%），它的颜色会从蓝色平滑过渡到绿色。

第一步：创建SmartButton类

public class SmartButton extends View {
    // 定义画笔
    private Paint mPaint;
    // 圆角半径
    private float mCornerRadius = 50f;
    // 当前进度 (0f - 1f)
    private float mProgress = 0f;
    // 按钮默认颜色和进度完成颜色
    private int mDefaultColor = Color.BLUE;
    private int mProgressColor = Color.GREEN;
    // 是否是按下状态
    private boolean isPressed = false;

    // 构造方法们，通常重点关心两个参数的
    public SmartButton(Context context) {
        super(context);
        init();
    }

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

    private void init() {
        // 初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); // ANTI_ALIAS_FLAG抗锯齿，让边缘更平滑
        mPaint.setStyle(Paint.Style.FILL); // 填充模式
    }
}

第二步：重写onMeasure，告诉系统“我有多大”

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int desiredWidth = 400; // 我们期望的宽度，单位是像素(px)
    int desiredHeight = 200; // 我们期望的高度

    // 使用resolveSize这个工具方法来优雅地处理测量规格
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    int width, height;

    // 处理宽度
    if (widthMode == MeasureSpec.EXACTLY) {
        width = widthSize; // 父View说了算
    } else if (widthMode == MeasureSpec.AT_MOST) {
        width = Math.min(desiredWidth, widthSize); // 不能超过父View给的空间
    } else { // UNSPECIFIED
        width = desiredWidth; // 想多大就多大
    }

    // 处理高度，逻辑同上
    if (heightMode == MeasureSpec.EXACTLY) {
        height = heightSize;
    } else if (heightMode == MeasureSpec.AT_MOST) {
        height = Math.min(desiredHeight, heightSize);
    } else {
        height = desiredHeight;
    }

    // 最重要的一步：设置测量结果
    setMeasuredDimension(width, height);
}

第三步：重写onDraw，施展“魔法”画出按钮

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    // 1. 根据进度计算当前颜色
    int currentColor = evaluateColor(mProgress, mDefaultColor, mProgressColor);

    // 2. 如果是按下状态，就把颜色变深
    if (isPressed) {
        float[] hsv = new float[3];
        Color.colorToHSV(currentColor, hsv);
        hsv[2] *= 0.8f; // 降低亮度值，让颜色变暗
        currentColor = Color.HSVToColor(hsv);
    }

    // 3. 设置画笔颜色
    mPaint.setColor(currentColor);

    // 4. 在画布上绘制一个圆角矩形！
    // 参数解释： (left, top, right, bottom)是矩形区域，mCornerRadius是圆角半径，mPaint是画笔
    canvas.drawRoundRect(0, 0, getWidth(), getHeight(), mCornerRadius, mCornerRadius, mPaint);

    // (可选) 5. 还可以画点文字
    mPaint.setColor(Color.WHITE);
    mPaint.setTextSize(60f);
    mPaint.setTextAlign(Paint.Align.CENTER);
    String text = (int)(mProgress * 100) + "%";
    // 计算文字baseline，让文字垂直居中
    Paint.FontMetrics fm = mPaint.getFontMetrics();
    float textY = getHeight() / 2 - fm.descent + (fm.bottom - fm.top) / 2;
    canvas.drawText(text, getWidth() / 2, textY, mPaint);
}

// 一个根据进度在两个颜色间插值的工具方法，非常实用！
private int evaluateColor(float fraction, int startColor, int endColor) {
    int startA = Color.alpha(startColor);
    int startR = Color.red(startColor);
    int startG = Color.green(startColor);
    int startB = Color.blue(startColor);

    int endA = Color.alpha(endColor);
    int endR = Color.red(endColor);
    int endG = Color.green(endColor);
    int endB = Color.blue(endColor);

    return Color.argb(
            (int)(startA + (endA - startA) * fraction),
            (int)(startR + (endR - startR) * fraction),
            (int)(startG + (endG - startG) * fraction),
            (int)(startB + (endB - startB) * fraction)
    );
}

第四步：处理触摸事件，让按钮“活起来”

@Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            isPressed = true;
            invalidate(); // 重绘！这会触发onDraw再次被调用，显示按下效果
            return true; // 返回true表示我们消耗了这个事件

        case MotionEvent.ACTION_UP:
            isPressed = false;
            invalidate(); // 重绘，恢复原状
            // 在这里可以触发点击监听器，比如performClick()
            performClick();
            break;

        case MotionEvent.ACTION_CANCEL: // 手指滑出View区域，也应取消按下状态
            isPressed = false;
            invalidate();
            break;
    }
    return super.onTouchEvent(event);
}

// 别忘了这个，避免Android Studio报警告
@Override
public boolean performClick() {
    super.performClick();
    // 这里可以处理点击逻辑
    return true;
}

第五步：提供设置进度的方法

// 对外暴露的方法，用于设置进度
public void setProgress(float progress) {
    this.mProgress = Math.max(0f, Math.min(1f, progress)); // 确保进度在0-1之间
    invalidate(); // 进度改变，请求重绘
}

第六步：在布局文件中使用它

现在，这个自定义的SmartButton就可以像普通View一样在XML中使用了！

<com.yourpackage.SmartButton
    android:id="@+id/smartButton"
    android:layout_width="400dp"
    android:layout_height="200dp"
    android:layout_gravity="center"/>

在Activity中使用：

SmartButton smartButton = findViewById(R.id.smartButton);

// 模拟一个进度动画
ValueAnimator animator = ValueAnimator.ofFloat(0f, 1f);
animator.setDuration(3000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
        float progress = (float) animation.getAnimatedValue();
        smartButton.setProgress(progress);
    }
});
animator.start();

// 设置点击监听
smartButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "智能按钮被点击了！", Toast.LENGTH_SHORT).show();
    }
});

四、避坑指南与进阶思考

恭喜你！一个功能丰富的自定义View已经诞生了。但在实际开发中，还有几个坑要注意：

• wrap_content失效：我们的onMeasure中，对AT_MOST模式的处理直接用了Math.min(desiredWidth, widthSize)。这没问题，但如果你希望View的内容动态变化时尺寸也能自适应，就需要在onMeasure里根据内容去动态计算desiredWidth和desiredHeight。
• 内存泄漏：如果View内部启动了动画或长时间运行的任务，一定要在onDetachedFromWindow方法中及时清理和取消，否则可能导致Activity无法被回收。
• 自定义属性：为了让你的View在XML中更易用（比如允许布局文件设置默认颜色），可以定义自定义属性。这涉及到在res/values/attrs.xml中定义属性，并在构造方法中通过TypedArray来读取。

结语

看到这里，你是不是已经对自定义View“路转粉”了？它并没有想象中那么神秘和可怕。核心就是测量、绘制、交互三部曲。

从今天这个会变色、会反馈的SmartButton开始，大胆去尝试吧！你可以用它做游戏血条、音乐播放器的波形图、甚至是自定义的图表。你的想象力，就是你的APP UI的唯一瓶颈。别再忍受千篇一律的UI了，用自定义View，让你的应用拥有独一无二的灵魂！