自定义Firebase-ui验证Android

Question

最近的Firebase在Github上的验证系统中开放了他们的Firebase-Auth版本。 Firebase-ui auth Github。虽然他们还没有发布任何关于如何定制包中所有UI的文档，但这是一个很好的步骤。一个选择是克隆完整的repo，然后挖掘代码，修改它，然后在Android项目中包含每个类，依赖项。有没有更简单的解决方案？

Answer 1

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

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> 

使用上面的方法，我能够实现这一结果：

这仍然没有提供尽可能多的灵活性，因为一想，但你可以定制它在一定程度上，以便它可以与你的品牌的标志和颜色主题一起工作。

这些都是一些资源，如果你想用这种方法走的更远，你可以找到有用的：

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