Android中如何为View设置点状背景（不使用背景图片）

Hey there, don't stress about the downvotes—every Android developer started where you are, and asking questions is how we all learn! Let's walk through two solid ways to make this dotted background View that plays nicely with your TextView below, no image required.

方法一：自定义View（最直观） #

我们可以创建一个继承自View的自定义类，在onDraw()方法里直接用Canvas绘制圆点。这种方式很直观，适合新手理解绘制逻辑。

1. 编写自定义View代码 #

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View

class DottedBackgroundView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {

    // 配置圆点的样式
    private val dotPaint = Paint().apply {
        color = Color.LIGHT_GRAY // 你可以改成任意颜色
        style = Paint.Style.FILL
        isAntiAlias = true // 让圆点边缘更平滑
    }
    private val dotRadius = 4f // 圆点半径（像素），可以转dp适配不同屏幕
    private val dotSpacing = 20f // 圆点之间的间距（中心到中心）

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 横向遍历画圆点
        var x = dotRadius
        while (x < width) {
            // 纵向遍历画圆点
            var y = dotRadius
            while (y < height) {
                canvas.drawCircle(x, y, dotRadius, dotPaint)
                y += dotSpacing
            }
            x += dotSpacing
        }
    }
}

小提示：如果要适配不同屏幕，可以把dotRadius和dotSpacing从像素转成dp，比如用context.resources.displayMetrics.density来计算。

2. 在布局中使用 #

把这个自定义View和你的TextView放在布局里，比如用LinearLayout垂直排列：

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- 你的点状背景View -->
    <com.yourpackage.DottedBackgroundView
        android:layout_width="match_parent"
        android:layout_height="200dp"/>

    <!-- 下方的TextView -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="我是下面的TextView"
        android:padding="16dp"
        android:textSize="16sp"/>

</LinearLayout>

方法二：自定义Drawable（更灵活） #

如果不想单独写一个View，也可以自定义Drawable，把它作为任意View的背景。这种方式更灵活，比如你可以给一个FrameLayout设置这个背景，然后在里面放其他控件。

1. 编写自定义Drawable代码 #

import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.PixelFormat
import android.graphics.drawable.Drawable

class DottedBackgroundDrawable : Drawable() {

    private val dotPaint = Paint().apply {
        color = Color.LIGHT_GRAY
        style = Paint.Style.FILL
        isAntiAlias = true
    }
    private val dotRadius = 4f
    private val dotSpacing = 20f

    override fun draw(canvas: Canvas) {
        val bounds = bounds // 获取Drawable所在View的边界
        var x = dotRadius
        while (x < bounds.width()) {
            var y = dotRadius
            while (y < bounds.height()) {
                canvas.drawCircle(x, y, dotRadius, dotPaint)
                y += dotSpacing
            }
            x += dotSpacing
        }
    }

    // 以下是Drawable必须实现的方法
    override fun setAlpha(alpha: Int) {
        dotPaint.alpha = alpha
        invalidateSelf()
    }

    override fun setColorFilter(colorFilter: Paint.ColorFilter?) {
        dotPaint.colorFilter = colorFilter
        invalidateSelf()
    }

    override fun getOpacity(): Int {
        return PixelFormat.TRANSLUCENT
    }
}

2. 使用这个Drawable #

你可以在代码里给任意View设置背景：

// 在Activity或Fragment里
val targetView = findViewById<View>(R.id.your_target_view)
targetView.background = DottedBackgroundDrawable()

额外优化建议 #

• 自定义属性：可以在attrs.xml里定义圆点颜色、半径、间距的属性，这样不用改代码就能在布局里调整样式，比如：

  <declare-styleable name="DottedBackgroundView">
      <attr name="dotColor" format="color"/>
      <attr name="dotRadius" format="dimension"/>
      <attr name="dotSpacing" format="dimension"/>
  </declare-styleable>
  

  然后在自定义View的构造方法里读取这些属性，让控件更灵活。
• 性能优化：如果你的View尺寸很大，可以考虑缓存绘制结果，不过对于普通大小的View，直接循环绘制完全没问题。

内容的提问来源于stack exchange，提问作者ArunavaS