如何在NumberPicker中增加数字间距，解决字号增大后重叠问题？

我尝试为NumberPicker中的数字添加间距，因为增大文本字号后数字出现重叠，显示效果较差。希望增大间距后能清晰看到选中数字上下方的数字，请问使用NumberPicker是否可实现该需求？

当前实现代码 #

Kotlin代码

speed.setOnClickListener {
    val dialog = NumberPicker(this)
    dialog.minValue = 1
    dialog.maxValue = 200
    dialog.value = targetTime.toInt()
    dialog.wrapSelectorWheel = false
    dialog.textColor = Color.WHITE // 设置文本颜色为白色
    dialog.setBackgroundColor(Color.BLACK) // 设置背景颜色为黑色

    val screenHeight = Resources.getSystem().displayMetrics.heightPixels
    val pickerHeight = (screenHeight * 0.9).toInt()

    val lp = LinearLayout.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        pickerHeight
    )

    dialog.setOnValueChangedListener { _, _, newVal ->
        targetTime = newVal.toDouble()
    }

    dialog.layoutParams = lp

    val title = TextView(this).apply {
        text = "Select Target Speed (mph)"
        textSize = 30f // 设置标题字号
        setTextColor(Color.WHITE) // 设置标题文本颜色为白色
        gravity = Gravity.CENTER // 标题文本居中
    }

    val alertDialog: AlertDialog = AlertDialog.Builder(this)
        .setCustomTitle(title) // 设置自定义标题
        .setView(dialog)
        .setPositiveButton("SET", null)
        .create()

    alertDialog.show()

    alertDialog.window?.setBackgroundDrawable(ColorDrawable(Color.BLACK))
    alertDialog.window?.setLayout(
        WindowManager.LayoutParams.MATCH_PARENT,
        WindowManager.LayoutParams.MATCH_PARENT
    ) // 设置对话框占满整个屏幕

    val positiveButton = alertDialog.getButton(DialogInterface.BUTTON_POSITIVE)

    // 设置确认按钮的布局参数
    val layoutParams = LinearLayout.LayoutParams(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.WRAP_CONTENT
    )

    // 设置按钮居中并添加边距
    layoutParams.gravity = Gravity.CENTER
    layoutParams.setMargins(430, 10, 430, 10) // 设置边距（左、上、右、下）

    // 应用按钮布局参数
    positiveButton.layoutParams = layoutParams

    positiveButton.setTextColor(Color.BLACK)
    positiveButton.setBackgroundColor(parseColor("#FFE222"))
    positiveButton.setTextSize(TypedValue.COMPLEX_UNIT_SP, 40f) // 设置按钮字号
}

NumberPicker样式XML代码

<item name="android:textSize">80sp</item>
<item name="android:orientation">horizontal</item>
<item name="android:showDividers">none</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>

解决方案：可以实现，以下是几种有效方法 #

方法1：通过XML样式直接调整项高度

在你的NumberPicker样式中添加android:itemHeight属性，为每个数字项设置足够的高度，避免大字号下重叠：

<item name="android:textSize">80sp</item>
<item name="android:orientation">horizontal</item>
<item name="android:showDividers">none</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
<item name="android:itemHeight">120sp</item> <!-- 调整为大于字号的高度，留出间距 -->
<item name="android:selectionDividerHeight">2dp</item> <!-- 可选：调整选中区域分割线高度 -->

方法2：通过反射修改内部列表间距

如果XML样式不够灵活，可通过反射修改NumberPicker内部的ListView间距：

// 在创建NumberPicker后添加这段代码
try {
    val field = NumberPicker::class.java.getDeclaredField("mSelectorWheel")
    field.isAccessible = true
    val listView = field.get(dialog) as ListView
    listView.dividerHeight = 40 // 设置项之间的间距（单位：px）
} catch (e: Exception) {
    e.printStackTrace()
}

方法3：自定义数字项布局

完全自定义每个数字项的样式，通过内边距增加间距：

1. 创建res/layout/number_picker_item.xml布局文件：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingVertical="20dp" <!-- 上下内边距增大间距 -->
    android:textSize="80sp"
    android:textColor="@android:color/white"
    android:gravity="center"/>

2. 通过反射将自定义布局设置给NumberPicker：

// 在创建NumberPicker后添加这段代码
try {
    val field = NumberPicker::class.java.getDeclaredField("mItemLayoutResId")
    field.isAccessible = true
    field.set(dialog, R.layout.number_picker_item)
} catch (e: Exception) {
    e.printStackTrace()
}

以上方法都能有效增大数字间的间距，解决大字号下的重叠问题，让选中数字上下的内容清晰显示。

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