Android：自定义原生TimePickerDialog样式

侠亦狐

已于 2023-10-09 14:37:32 修改

阅读量744

点赞数

分类专栏： Android 文章标签： android timepicker dialog 自定义 style

于 2023-10-09 11:24:34 首次发布

本文链接：https://blog.csdn.net/qq_35584878/article/details/133696418

版权

Android 专栏收录该内容

92 篇文章 2 订阅

订阅专栏

效果图：

目标效果图：

原生效果：

实现：

首先是Dialog样式：

<style name="TimePickerDialogStyle" parent="@style/Theme.AppCompat.DayNight.Dialog.Alert">
        <item name="android:timePickerStyle">@style/TimePickerStyle</item>
        <item name="android:timePickerMode">clock</item>
        <item name="dialogCornerRadius">12dp</item>
    </style>

声明有圆角，时间选择器的模式是时钟选择模式。原来按钮样式也打算在这里用比如buttonBarPositiveButtonStyle这种来声明的，但是没有效果，所以按钮部分我用的动态代码设置的方式修改。

public void showTimePicker(){
        TimePickerDialog timePickerDialog = new TimePickerDialog(
                this, R.style.TimePickerDialogStyle, null, 0, 0, true);
        Window window = timePickerDialog.getWindow();
        WindowManager.LayoutParams attributes = window.getAttributes();
        attributes.gravity = Gravity.BOTTOM;
        window.setAttributes(attributes);
        timePickerDialog.setOnShowListener(dialog -> {
            attributes.width = WindowManager.LayoutParams.MATCH_PARENT;
            window.setAttributes(attributes);
            
            Button buttonPositive = timePickerDialog.getButton(DialogInterface.BUTTON_POSITIVE);
            buttonPositive.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            buttonPositive.setBackgroundResource(R.drawable.test_shape);
            buttonPositive.setTextColor(Color.WHITE);
            buttonPositive.setWidth(320);

            Button buttonNegative = timePickerDialog.getButton(DialogInterface.BUTTON_NEGATIVE);
            buttonNegative.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
            buttonNegative.setBackgroundResource(R.drawable.test_shape);
            buttonNegative.setTextColor(Color.WHITE);
            buttonNegative.setWidth(320);

            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) buttonNegative.getLayoutParams();
            layoutParams.setMarginEnd(40);
            layoutParams.height = 125;
            buttonPositive.setLayoutParams(layoutParams);
            buttonNegative.setLayoutParams(layoutParams);

        });
        timePickerDialog.show();
    }

然后是关键的timepicker样式：

<style name="TimePickerStyle" parent="@android:style/Widget.Material.TimePicker">
        <item name="android:headerBackground">@color/white</item>  <!--顶部背景颜色，原生绿色部分-->
        <item name="android:numbersTextColor">@drawable/selector_color</item>    <!--外圈的数字颜色-->
        <item name="android:numbersInnerTextColor">@drawable/selector_color_inner</item>  <!--内圈数字颜色-->
        <item name="android:numbersBackgroundColor">@color/white</item>  <!--选择区域时钟背景颜色-->
        <item name="android:numbersSelectorColor">#3c77fc</item>  <!--选中数字背景颜色-->
    </style>

parent用ThemeOverlay.MaterialComponents.TimePicker默认顶部大时钟字体颜色是白色，parent用的@android:style/Widget.Material.TimePicker，默认顶部大时钟字体颜色是黑色。如果要其他颜色的话使用android:headerTextColor属性，但是编译的时候会报错，这个属性是私有的，不允许直接使用：

解决方案也很简单，前面加一个“*”，编译就可以通过了：

<!--顶部数字颜色，可用selector的方式来声明选中和未选中的颜色-->
<item name="*android:headerTextColor">@color/black</item>

然后是外圈和内圈数字字体颜色，直接设置颜色的话在选中之后颜色是不变的，我们看原生的选中之后是会变成白色的，所以那个颜色我们需要用selector的drawable文件来声明不同激活状态的颜色：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_activated="true" android:color="@color/white" />
    <item android:state_activated="false" android:color="@color/black" />
</selector>

前面说的headerTextColor的时钟和分钟选择状态的颜色也可以通过这种selector的方式设置不同状态时的颜色。

完。