android - 自定义 Firebase-ui 身份验证 Android

Question

最近 Firebase 在 Github 上开源了他们的 Firebase-Auth drop in Authentication System。 Firebase-ui auth Github .尽管这是一个非常好的步骤，但他们还没有发布任何关于我们如何自定义包中存在的所有 UI 的文档。这样做的一种选择是，克隆完整的 repo，然后挖掘代码，修改它，然后在我们的 Android 项目中包含每个类和依赖项。有没有更简单的解决方案？

Answer 1

您可以在 styles.xml 中创建样式资源文件，然后使用它来自定义 Firebase-Auth UI。您可以使用 setTheme() 设置新样式创建 Auth 实例时。

startActivityForResult(
            AuthUI.getInstance()
                    .createSignInIntentBuilder()
                    .setProviders(
                            Arrays.asList(
                                    new AuthUI.IdpConfig.Builder(AuthUI.EMAIL_PROVIDER).build(),
                                    new AuthUI.IdpConfig.Builder(AuthUI.GOOGLE_PROVIDER).build(),
                                    new AuthUI.IdpConfig.Builder(AuthUI.FACEBOOK_PROVIDER).build()
                            )
                    )
                    .setTheme(R.style.LoginTheme)
                    .setLogo(R.mipmap.logo)
                    .build(),
            RC_SIGN_IN);

这是如何配置样式主题的示例。

<style name="LoginTheme" parent="FirebaseUI">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorButtonNormal">@color/colorAccent</item>
    <item name="colorControlNormal">@android:color/white</item>
    <item name="colorControlActivated">@android:color/white</item>
    <item name="colorControlHighlight">@android:color/white</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
    <item name="android:windowBackground">@mipmap/bg_login</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:textColorHint">@android:color/white</item>
</style>

使用上述方法，我能够达到这个结果:


这仍然没有提供人们想要的那么大的灵 active ，但您可以在某种程度上对其进行自定义，以便它可以与您品牌的 Logo 和颜色主题一起使用。

如果您想进一步使用这种方法，这些是您可能会发现有用的一些资源:

https://firebaseopensource.com/projects/firebase/firebaseui-android/auth/README.md#ui_customization
https://gist.github.com/cutiko/9942f76504cbb67c8d04ee6632286dbc
https://github.com/firebase/FirebaseUI-Android/issues/229#issuecomment-236868365