Android端不同设备Dash Width显示不一致问题求助

你的问题核心在于直接使用固定像素值设置dashWidth和dashGap，没有考虑屏幕密度差异以及圆形边框的实际周长，导致不同设备上的虚线比例和显示效果不一致。下面是具体的分析和解决方案：

问题根源 #

1. 屏幕密度适配缺失：dashWidth和dashGap的单位是像素（px），但你直接用200f这种固定值，在高dpi设备上会显得更短，低dpi设备上更长，视觉比例完全混乱。
2. 未基于圆形周长计算参数：你把总dashWidth设为200f，但这个值和圆形边框的实际周长没有关联——不同尺寸的View（或不同dpi下的同一dp尺寸）周长不同，均分固定值自然会出错。
3. View尺寸时机问题：如果在onCreate中直接获取View的背景并修改参数，此时View可能还没完成测量，尺寸为0，导致计算错误。

解决方案 #

1. 先做dp转px的适配 #

所有涉及到视觉尺寸的参数（stroke宽度、gap宽度）都要从dp转换成像素，保证跨设备的视觉一致性：

// 工具方法：dp转px
fun Context.dpToPx(dp: Float): Float {
    return dp * resources.displayMetrics.density
}

2. 基于View实际周长计算dash参数 #

圆形边框的虚线应该根据周长来分配dash和gap的宽度，这样不管View尺寸或设备dpi如何，比例都是一致的：

// 等待View完成测量后再计算参数
image_story.post {
    // 获取View的实际尺寸（取宽高中较小值作为圆形直径）
    val viewSize = min(image_story.width, image_story.height)
    val radius = viewSize / 2f
    val circumference = 2 * Math.PI * radius // 计算圆形周长

    val strokeWidth = this.dpToPx(5f).toInt() // 5dp转px
    val gapWidth = this.dpToPx(10f) // 10dp转px
    val postCount = posts.size

    val (dashWidth, dashGap) = if (postCount > 1) {
        // 总gap宽度 = 帖子数量 × 单个gap宽度
        // 总dash宽度 = 周长 - 总gap宽度
        // 单个dash宽度 = 总dash宽度 ÷ 帖子数量
        val totalDashWidth = circumference - postCount * gapWidth
        Pair(totalDashWidth / postCount, gapWidth)
    } else {
        // 只有一个帖子时，显示完整实线
        Pair(circumference, 0f)
    }

    // 更新GradientDrawable的参数
    val drawable = image_story.background as GradientDrawable
    drawable.setStroke(strokeWidth, Color.parseColor("#000000"), dashWidth, dashGap)
}

3. 简化Drawable文件 #

因为我们在代码中动态设置了stroke属性，border.xml可以简化为只保留基础的圆形形状：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval"
    android:useLevel="true">
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
</shape>

进阶方案：自定义View绘制（更稳定） #

如果系统的GradientDrawable在某些版本仍有渲染差异，你可以用自定义View完全控制绘制逻辑：

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

    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.STROKE
        strokeWidth = context.dpToPx(5f)
        color = Color.parseColor("#000000")
    }
    private var dashPathEffect: DashPathEffect? = null

    fun setPostCount(count: Int) {
        if (count <= 1) {
            dashPathEffect = null
        } else {
            val viewSize = min(width, height)
            val radius = viewSize / 2f - paint.strokeWidth / 2
            val circumference = 2 * Math.PI * radius
            val gapWidth = context.dpToPx(10f)
            val totalDashWidth = circumference - count * gapWidth
            val dashWidth = totalDashWidth / count
            dashPathEffect = DashPathEffect(floatArrayOf(dashWidth, gapWidth), 0f)
        }
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        paint.pathEffect = dashPathEffect
        val centerX = width / 2f
        val centerY = height / 2f
        val radius = min(width, height) / 2f - paint.strokeWidth / 2
        canvas.drawCircle(centerX, centerY, radius, paint)
    }
}

使用这个自定义View的话，只需要在布局中替换原来的ImageView，然后调用setPostCount(posts.size)即可，兼容性更好。

注意事项 #

• 确保View的尺寸是固定的（比如你设置的55dp），如果是wrap_content，要保证内容能让View测量出正确的尺寸。
• 测试不同Android版本（尤其是Android 10以下和以上），确保渲染效果一致。

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