Firebase UI Phone Auth Spinner 样式

Question

我们在如何设置 Firebase 样式方面遇到了困难 UI。我们试图查看存储库，但似乎没有干净的解决方案，也没有关于自定义 Spinner 的适当文档。

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

这是我们的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());

以上造型会给你这个

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

PS

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

Answer 1

经过长时间的斗争和挫折，我找到了一个解决方案，它可以通过扩展 Theme.AppCompat 在 API 21、API 26、API 29 和更高版本上工作作为 parent.

<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 版本中都是可读的，这将很好地发挥作用。

Firebase UI Phone Auth Spinner 样式

Firebase UI Phone Auth Spinner styling

android

firebase-authentication

android-spinner

android-styles

firebaseui