Firebase UI Phone Auth Spinner 样式

Question

长期以来，我们一直在努力研究如何设计 Firebase UI 的样式。我们试图查看 repo，但似乎没有干净的解决方案，也没有关于自定义 Spinner 的适当文档。

我们需要通过覆盖现有的 FirebaseUI 样式，使 Spinner 背景弹出对话框变暗，而项目的文本颜色为白色。

这是我们的 XML 代码

 <style name="FirebaseUI.CountrySpinner">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:drawablePadding">10dp</item>
    <item name="android:spinnerDropDownItemStyle">@style/CustomSpinnerItemStyle</item>
</style>

<style name="CustomSpinnerItemStyle" parent="Widget.AppCompat.DropDownItem.Spinner">
    <item name="android:textColor">@android:color/white</item>
    <item name="backgroundColor">@color/colorPrimaryDark</item>
</style>

上面的样式会给你这个

然后也尝试了其他方法

<style name="AuthStyle" parent="FirebaseUI">

    <!--Override action bar and status bar-->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="android:colorControlNormal">@color/colorAccent</item> <!--Spinner underline color-->
    <item name="android:colorFocusedHighlight">@color/colorAccent</item>

    <!--Override action bar and status bar-->
    <item name="android:windowBackground">@color/colorPrimary</item>

    <item name="android:textColorTertiary">@android:color/white</item>
    <item name="android:buttonStyle">@style/AuthButton</item>
    <item name="android:spinnerStyle">@style/AuthSpinner</item>

</style>

 <style name="AuthSpinner" parent="FirebaseUI.CountrySpinner">
    <item name="android:textColor">@android:color/white</item> <!--Spinner placeholder text color-->
    <item name="itemTextColor">@android:color/white</item>
    <item name="android:popupBackground">@color/colorPrimaryDark</item>
    <item name="android:colorBackground">@color/colorPrimaryDark</item>
</style>

然后应用主题

AuthUI.SignInIntentBuilder builder = AuthUI.getInstance().createSignInIntentBuilder()
            .setTheme(R.style.AuthStyle)
            .setIsSmartLockEnabled(true)
            .setAvailableProviders(getProviderList());

上面的样式会给你这个

唯一的区别是微调器中的下划线在直接覆盖时会消失。如果我们可以调整向下箭头，因为它看起来非常接近文本，这也很好。

附言

最初 AuthStyle 扩展 ThemeOverlay.AppCompat.Dark 为我们提供了所需的样式，但仅适用于具有 SDK 30 及更高版本的较新设备，而旧版本（例如此处的 SDK 21）存在相同问题。

Answer 1

经过长时间的战斗和挫折后，我找到了一个解决方案，它可以通过扩展 Theme.AppCompat 作为父级在 API 21、API 26、API 29 以及可能更高版本上运行。

<style name="AuthStyle" parent="Theme.AppCompat">

    <!--Override action bar and status bar-->
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

    <item name="android:colorControlNormal">@color/colorAccent</item> <!--Spinner or non focus field underline color-->
    <item name="android:colorFocusedHighlight">@color/colorAccent</item>

    <!--Override main background-->
    <item name="android:windowBackground">@color/colorPrimary</item>

    <!--Description text color-->
    <item name="android:textColorTertiary">@android:color/white</item>

</style>

<!--Override-->
<style name="FirebaseUI.TextInputEditText.PhoneField">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textSize">14sp</item>
    <item name="android:inputType">number</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textColorHint">@android:color/white</item>
</style>

<!--Override-->
<style name="FirebaseUI.CountrySpinner">
    <item name="android:layout_width">wrap_content</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:textColor">@android:color/white</item> <!--Spinner placeholder text color-->
    <item name="android:backgroundTint">@color/colorAccent</item> <!--Spinner underline and arrow color-->
</style>

如果应用上述样式，将根据您的颜色值看起来像这样。

尽管无论我如何尝试都无法更改弹出背景和项目列表，但只要将在 Spinner 中添加的国家/地区在所有 API 版本中都是可读的，这将很有效。