Android Studio中自定义视图实现类Google Ads式预览求助

Hey there! Let's tackle this problem together. Since your custom view doesn't include any TextView, we can still replicate that Google Ads-style preview by leveraging Android's Canvas API directly in the onDraw() method. Here are a few practical approaches you can try:

You can use basic canvas drawing methods to recreate the structure of a typical ad layout—think colored blocks for text lines, rounded shapes for icons, and buttons. This gives you full control over every part of the preview.

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val blockPaint = Paint().apply {
        color = Color.LIGHT_GRAY
        style = Paint.Style.FILL
        isAntiAlias = true
    }
    val iconPaint = Paint().apply {
        color = Color.DKGRAY
        style = Paint.Style.FILL
        isAntiAlias = true
    }
    val ctaPaint = Paint().apply {
        color = Color.parseColor("#4285F4") // Google's blue
        style = Paint.Style.FILL
        isAntiAlias = true
    }

    // Draw top "Sponsored" label block
    canvas.drawRect(40f, 25f, width - 160f, 50f, blockPaint)
    // Draw main ad title block
    canvas.drawRect(40f, 60f, width - 80f, 85f, blockPaint)
    // Draw icon placeholder (circle)
    canvas.drawCircle(width - 70f, 42f, 22f, iconPaint)
    // Draw CTA button with rounded corners
    canvas.drawRoundRect(40f, 100f, 170f, 130f, 15f, 15f, ctaPaint)
}

If you want more flexible, easily adjustable preview elements, define ShapeDrawables (either in code or XML) and draw them onto the canvas. This makes it simpler to tweak styles or reuse components across your view.

// Define reusable drawables in your custom view class
private val titlePlaceholder = ShapeDrawable(RectShape()).apply {
    paint.color = Color.LIGHT_GRAY
    intrinsicWidth = 500
    intrinsicHeight = 25
}

private val iconPlaceholder = ShapeDrawable(OvalShape()).apply {
    paint.color = Color.DKGRAY
    intrinsicWidth = 44
    intrinsicHeight = 44
}

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    // Position and draw each placeholder
    titlePlaceholder.setBounds(40, 25, width - 160, 50)
    titlePlaceholder.draw(canvas)

    iconPlaceholder.setBounds(width - 92, 20, width - 48, 64)
    iconPlaceholder.draw(canvas)

    // Add more drawables for subtitle, CTA, etc.
}

Even without TextView, you can draw placeholder text directly on the canvas to make the preview feel more realistic. Use semi-transparent colors to signal it's a placeholder.

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    val placeholderTextPaint = Paint().apply {
        color = Color.GRAY
        textSize = 22f
        alpha = 140 // Soften the text to look like a placeholder
        isAntiAlias = true
    }
    val ctaTextPaint = Paint().apply {
        color = Color.WHITE
        textSize = 18f
        textAlign = Paint.Align.CENTER
        isAntiAlias = true
    }

    // Draw placeholder text lines
    canvas.drawText("Sponsored", 40f, 42f, placeholderTextPaint)
    canvas.drawText("Your Ad Title Here", 40f, 80f, placeholderTextPaint)

    // Draw CTA button background first
    canvas.drawRoundRect(40f, 100f, 170f, 130f, 15f, 15f, Paint().apply { color = Color.parseColor("#4285F4") })
    // Draw CTA text on top
    canvas.drawText("Learn More", 105f, 122f, ctaTextPaint)
}

To ensure this preview doesn't show up in your production app, wrap all drawing code in a debug check:

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    if (BuildConfig.DEBUG) {
        // All your preview drawing code goes here
    }
}

These methods should help you recreate that Google Ads-style preview perfectly in your custom view, no TextView required. Feel free to tweak colors, sizes, and positions to match the exact layout you're aiming for!

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