自定義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