安卓TimePicker如何修改分割线样式实现类iOS显示效果

1 自定义样式不生效原因 #

你当前直接给TimePicker设置字体、字号属性不生效，是因为spinner模式下的TimePicker内部是由多个NumberPicker子控件组成，文本、分割线相关属性都需要作用在NumberPicker上才会生效。

2 静态样式配置方案 #

第一步：定义NumberPicker自定义样式 #

在styles.xml中新增专门的NumberPicker样式，配置你需要的字体、字号、分割线属性：

<style name="CustomIOSNumberPicker" parent="android:Widget.Material.NumberPicker">
    <!-- 文本相关配置 -->
    <item name="android:textSize">24sp</item>
    <item name="android:fontFamily">@font/poppins_semibold</item>
    <item name="android:textColor">@color/unpicked</item>
    <item name="android:textColorPrimary">@color/你需要的选中态文字颜色</item>
    <!-- 分割线相关配置，和iOS效果对齐 -->
    <item name="android:divider">@drawable/time_picker_divider</item>
    <item name="android:dividerHeight">1dp</item>
    <item name="android:showDividers">middle</item>
</style>

第二步：新增分割线drawable #

在res/drawable下新建time_picker_divider.xml，定义细灰色分割线：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFE0E0E0" /> <!-- 替换为你需要的分割线颜色 -->
    <size android:height="1dp" />
</shape>

第三步：修改TimePicker样式 #

修改你原来的TimePicker自定义样式，绑定上面的NumberPicker样式：

<style name="pickerPersonnalizedUnpicked" parent="android:Widget.Material.TimePicker.Spinner">
    <item name="android:numberPickerStyle">@style/CustomIOSNumberPicker</item>
    <item name="android:background">@color/beige_bg_rounded</item>
</style>

3 动态适配方案（兼容高版本系统） #

部分高版本安卓系统会强制覆盖NumberPicker的系统样式，你可以在代码中动态修改属性，兼容所有版本：

import android.widget.EditText
import android.widget.NumberPicker
import android.widget.TimePicker
import androidx.core.content.ContextCompat
import androidx.core.content.res.ResourcesCompat

fun customizeTimePicker(timePicker: TimePicker) {
    // 开启24小时制可去掉AM/PM选项，更接近iOS效果
    timePicker.setIs24HourView(true)
    
    for (i in 0 until timePicker.childCount) {
        val child = timePicker.getChildAt(i)
        if (child is NumberPicker) {
            try {
                // 修改分割线
                val dividerField = NumberPicker::class.java.getDeclaredField("mSelectionDivider")
                dividerField.isAccessible = true
                dividerField.set(child, ContextCompat.getDrawable(timePicker.context, R.drawable.time_picker_divider))
                
                val dividerHeightField = NumberPicker::class.java.getDeclaredField("mSelectionDividerHeight")
                dividerHeightField.isAccessible = true
                dividerHeightField.setInt(child, 1)

                // 修改文本字体、字号、颜色
                for (j in 0 until child.childCount) {
                    val innerChild = child.getChildAt(j)
                    if (innerChild is EditText) {
                        innerChild.typeface = ResourcesCompat.getFont(timePicker.context, R.font.poppins_semibold)
                        innerChild.textSize = 24f
                        innerChild.setTextColor(ContextCompat.getColor(timePicker.context, R.color.unpicked))
                    }
                }
            } catch (e: Exception) {
                e.printStackTrace()
            }
        }
    }
}

在初始化TimePicker时调用上面的方法即可生效。

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