创建自定义绘图

试用 Compose 方式
Jetpack Compose 是推荐在 Android 设备上使用的界面工具包。了解如何在 Compose 中使用布局。
<ph type="x-smartling-placeholder"></ph> Compose 中的画布 →

自定义视图最重要的部分是外观。自定义绘图 可以很简单，也可以很复杂此文档 涵盖了一些最常见的操作。

如需了解详情，请参阅 可绘制对象概览。

替换 onDraw()

绘制自定义视图最重要的一步是覆盖 onDraw() 方法。onDraw() 的参数是 Canvas 对象，供视图用来绘制自身。Canvas 类 定义了绘制文本、线条、位图和许多其他图形的方法， 基元。您可以在 onDraw() 中使用这些方法创建 自定义界面。

首先，请创建 Paint 对象。 下一节将详细介绍 Paint。

创建绘图对象

通过 android.graphics 框架将绘制分为两个方面：

  • 需要绘制的内容，由 Canvas 处理。
  • 如何绘制，由 Paint 处理。

例如，Canvas 提供了一种绘制线条的方法， Paint 提供了用于定义线条颜色的方法。 Canvas 具有绘制矩形的方法，Paint 可定义是在矩形中填充颜色还是留空。 Canvas 定义可在屏幕上绘制的形状； Paint 定义每个形状的颜色、样式和字体等 。

在绘制任何内容之前，请先创建一个或多个 Paint 对象。通过 以下示例在名为 init 的方法中执行此操作。此方法 从 Java 中的构造函数调用，但可以在 Kotlin。

Kotlin

@ColorInt
private var textColor    // Obtained from style attributes.

@Dimension
private var textHeight   // Obtained from style attributes.

private val textPaint = Paint(ANTI_ALIAS_FLAG).apply {
    color = textColor
    if (textHeight == 0f) {
        textHeight = textSize
    } else {
        textSize = textHeight
    }
}

private val piePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
    style = Paint.Style.FILL
    textSize = textHeight
}

private val shadowPaint = Paint(0).apply {
    color = 0x101010
    maskFilter = BlurMaskFilter(8f, BlurMaskFilter.Blur.NORMAL)
}

Java

private Paint textPaint;
private Paint piePaint;
private Paint shadowPaint;

@ColorInt
private int textColor;       // Obtained from style attributes.

@Dimension
private float textHeight;    // Obtained from style attributes.

private void init() {
   textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   textPaint.setColor(textColor);
   if (textHeight == 0) {
       textHeight = textPaint.getTextSize();
   } else {
       textPaint.setTextSize(textHeight);
   }

   piePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
   piePaint.setStyle(Paint.Style.FILL);
   piePaint.setTextSize(textHeight);

   shadowPaint = new Paint(0);
   shadowPaint.setColor(0xff101010);
   shadowPaint.setMaskFilter(new BlurMaskFilter(8, BlurMaskFilter.Blur.NORMAL));
   ...
}

提前创建对象是一项重要的优化措施。观看次数为 并且许多绘制对象都需要开销大的初始化。 在 onDraw() 方法中创建绘图对象效果显著 降低性能，并可能导致界面运行缓慢。

处理布局事件

为了正确绘制自定义视图，需要确定其尺寸。复杂自定义 视图通常需要执行多次布局计算 及其在屏幕上的形状切勿对应用的大小 。即使只有一个应用使用您的视图，该应用也需要 处理不同的屏幕尺寸、多种屏幕密度和各种宽高比 调整宽高比。

虽然 View 有很多方法来处理衡量数据，大多数方法并不需要 已覆盖。如果您的视图不需要对其大小进行特殊控制， 替换一种方法： onSizeChanged()。

onSizeChanged() 在视图首次被分配 视图大小；如果视图大小由于任何原因发生变化，则再次显示。计算 位置、尺寸以及与视图大小相关的任何其他值 onSizeChanged()，而不是每次绘制时都重新计算。 在以下示例中，onSizeChanged() 是视图的位置 会计算图表的边界矩形以及 文本标签和其他视觉元素。

为视图指定尺寸时，布局管理器会假定尺寸 包括视图的内边距。在计算 视图大小以下是来自 onSizeChanged() 的一段代码，展示了如何 执行以下操作：

Kotlin

private val showText    // Obtained from styled attributes.
private val textWidth   // Obtained from styled attributes.

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
    super.onSizeChanged(w, h, oldw, oldh)
    // Account for padding.
    var xpad = (paddingLeft + paddingRight).toFloat()
    val ypad = (paddingTop + paddingBottom).toFloat()

    // Account for the label.
    if (showText) xpad += textWidth.toFloat()
    val ww = w.toFloat() - xpad
    val hh = h.toFloat() - ypad

    // Figure out how big you can make the pie.
    val diameter = Math.min(ww, hh)
}

Java

private Boolean showText;    // Obtained from styled attributes.
private int textWidth;       // Obtained from styled attributes.

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    // Account for padding.
    float xpad = (float)(getPaddingLeft() + getPaddingRight());
    float ypad = (float)(getPaddingTop() + getPaddingBottom());

    // Account for the label.
    if (showText) xpad += textWidth;

    float ww = (float)w - xpad;
    float hh = (float)h - ypad;

    // Figure out how big you can make the pie.
    float diameter = Math.min(ww, hh);
}

如果您需要对视图的布局参数进行更精细的控制，请实现 onMeasure()。 此方法的参数为 View.MeasureSpec 值指示您的视图的父项希望您的视图有多大 无论该大小是硬性最大值，还是只是建议值。作为优化措施 这些值存储为打包整数，您可以使用 View.MeasureSpec 用于解压缩每个整数中存储的信息。

下面是 onMeasure() 的实现示例。在本课中， 因此系统会尝试将其面积加大到足够大 作为其标签：

Kotlin

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    // Try for a width based on your minimum.
    val minw: Int = paddingLeft + paddingRight + suggestedMinimumWidth
    val w: Int = View.resolveSizeAndState(minw, widthMeasureSpec, 1)

    // Whatever the width is, ask for a height that lets the pie get as big as
    // it can.
    val minh: Int = View.MeasureSpec.getSize(w) - textWidth.toInt() + paddingBottom + paddingTop
    val h: Int = View.resolveSizeAndState(minh, heightMeasureSpec, 0)

    setMeasuredDimension(w, h)
}

Java

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   // Try for a width based on your minimum.
   int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth();
   int w = resolveSizeAndState(minw, widthMeasureSpec, 1);

   // Whatever the width is, ask for a height that lets the pie get as big as it
   // can.
   int minh = MeasureSpec.getSize(w) - (int)textWidth + getPaddingBottom() + getPaddingTop();
   int h = resolveSizeAndState(minh, heightMeasureSpec, 0);

   setMeasuredDimension(w, h);
}

在此代码中，有三点需要注意：

  • 计算时会考虑视图的内边距。如前所述 则是视图的责任
  • 辅助方法 resolveSizeAndState() 用于创建最终的宽度和高度值。此帮助程序会返回 比较合适的 View.MeasureSpec 值， 传递给 onMeasure() 的值。
  • onMeasure() 没有返回值。相反，方法为 调用 setMeasuredDimension()。 必须调用此方法。如果您省略此调用， View 类会抛出运行时异常。

绘制

定义对象创建和测量代码后，您可以 onDraw()。每个视图以不同的方式实现 onDraw()， 但大多数视图都共享一些常见的操作：

以下代码会绘制文本、线条和形状的组合：

Kotlin

private val data = mutableListOf<Item>() // A list of items that are displayed.

private var shadowBounds = RectF()       // Calculated in onSizeChanged.
private var pointerRadius: Float = 2f    // Obtained from styled attributes.
private var pointerX: Float = 0f         // Calculated in onSizeChanged.
private var pointerY: Float = 0f         // Calculated in onSizeChanged.
private var textX: Float = 0f            // Calculated in onSizeChanged.
private var textY: Float = 0f            // Calculated in onSizeChanged.
private var bounds = RectF()             // Calculated in onSizeChanged.
private var currentItem: Int = 0         // The index of the currently selected item.

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)

    canvas.apply {
        // Draw the shadow.
        drawOval(shadowBounds, shadowPaint)

        // Draw the label text.
        drawText(data[currentItem].label, textX, textY, textPaint)

        // Draw the pie slices.
        data.forEach {item ->
            piePaint.shader = item.shader
            drawArc(
                bounds,
                360 - item.endAngle,
                item.endAngle - item.startAngle,
                true,
                piePaint
            )
        }

        // Draw the pointer.
        drawLine(textX, pointerY, pointerX, pointerY, textPaint)
        drawCircle(pointerX, pointerY, pointerRadius, textPaint)
    }
}

// Maintains the state for a data item.
private data class Item(
    var label: String,      
    var value: Float = 0f,

    @ColorInt
    var color: Int = 0,

    // Computed values.
    var startAngle: Float = 0f,
    var endAngle: Float = 0f,

    var shader: Shader
)

Java

private List<Item> data = new ArrayList<Item>();  // A list of items that are displayed.

private RectF shadowBounds;                       // Calculated in onSizeChanged.
private float pointerRadius;                      // Obtained from styled attributes.
private float pointerX;                           // Calculated in onSizeChanged.
private float pointerY;                           // Calculated in onSizeChanged.
private float textX;                              // Calculated in onSizeChanged.
private float textY;                              // Calculated in onSizeChanged.
private RectF bounds;                             // Calculated in onSizeChanged.
private int currentItem = 0;                      // The index of the currently selected item.

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

    // Draw the shadow.
    canvas.drawOval(
            shadowBounds,
            shadowPaint
    );

    // Draw the label text.
    canvas.drawText(data.get(currentItem).label, textX, textY, textPaint);

    // Draw the pie slices.
    for (int i = 0; i < data.size(); ++i) {
        Item it = data.get(i);
        piePaint.setShader(it.shader);
        canvas.drawArc(
                bounds,
                360 - it.endAngle,
                it.endAngle - it.startAngle,
                true, 
                piePaint
        );
    }

    // Draw the pointer.
    canvas.drawLine(textX, pointerY, pointerX, pointerY, textPaint);
    canvas.drawCircle(pointerX, pointerY, pointerRadius, textPaint);
}

// Maintains the state for a data item.
private class Item {
    public String label;
    public float value;
    @ColorInt
    public int color;

    // Computed values.
    public int startAngle;
    public int endAngle;

    public Shader shader;
}

应用图形效果

Android 12（API 级别 31）添加了 RenderEffect 类，该类可应用常见的图形效果，例如模糊、色彩滤镜 Android 着色器效果及更多功能 View 对象和 呈现层次结构您可以将各种效果组合成连锁效应，即 可以实现内外部效应或混合效果。对此功能的支持 因设备的处理能力而异

还可以将效果应用到 RenderNode： 通过调用 View View.setRenderEffect(RenderEffect)。

如需实现 RenderEffect 对象，请执行以下操作：

view.setRenderEffect(RenderEffect.createBlurEffect(radiusX, radiusY, SHADER_TILE_MODE))

您可以通过编程方式创建视图，也可以从 XML 布局中扩充视图， 使用 View 绑定检索它 或 findViewById()。