最近 Firebase 在 Github 上开源了他们的 Firebase-Auth drop in Authentication System。 Firebase-ui auth Github。尽管这是一个非常好的步骤，但他们还没有发布任何关于我们如何自定义包中存在的所有 UI 的文档。这样做的一种选择是，克隆完整的 repo，然后挖掘代码，修改它，然后在我们的 Android 项目中包含每个类和依赖项。有没有更简单的解决方案？
【问题讨论】：
标签： android firebase firebase-authentication
您可以在 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
【讨论】：
在styles.xml 资源文件中创建以下样式。
1.全屏主题：
<style name="FullscreenTheme" parent="AppTheme">
<item name="android:actionBarStyle">@style/FullscreenActionBarStyle</item>
<item name="android:windowActionBarOverlay">true</item>
<item name="android:windowBackground">@drawable/bg_login</item>
<item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
<item name="metaButtonBarButtonStyle">?android:attr/buttonBarButtonStyle</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="colorControlNormal">@color/colorWhite</item>
<item name="colorControlActivated">@color/colorWhite</item>
<item name="colorControlHighlight">@color/colorWhite</item>
</style>
<style name="FullscreenActionBarStyle" parent="Widget.AppCompat.ActionBar">
<item name="android:background">@color/colorPrimary</item>
</style>
2.自定义登录主题。
<style name="LoginTheme" parent="FirebaseUI">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_gravity">bottom</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="colorButtonNormal">@color/white</item>
<item name="colorControlNormal">@color/white</item>
<item name="colorControlActivated">@color/white</item>
<item name="colorControlHighlight">@color/white</item>
<item name="android:textColor">@color/white</item>
<item name="android:textColorPrimary">@color/white</item>
<item name="android:textColorSecondary">@android:color/white</item>
<item name="android:windowBackground">@drawable/bg_login</item>
<item name="android:icon">@drawable/youricon</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:textColorHint">@color/white</item>
</style>
3.自定义带LOGO的背景图。
右键点击进入drawable=>新建drawable资源文件。 将此文件命名为bg_login，上面引用过
<item android:drawable="@mipmap/cool_photo"/>
<item android:top="120dp">
<bitmap
android:src="@mipmap/your_logo"
android:gravity="top|center_horizontal" />
</item>
4.自定义编辑文本
<style name="FirebaseUI.EditText">
<item name="android:paddingBottom">14dp</item>
<item name="android:paddingTop">14dp</item>
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="colorControlActivated">@color/colorWhite</item>
<item name="colorControlHighlight">@color/colorWhite</item>
<item name="android:textColorHint">@color/colorWhite</item>
<item name="android:textColor">@color/colorWhite</item>
</style>
<style name="FirebaseUI.Text.TextInputLayout" parent="@style/FirebaseUI.EditText" />
<style name="FirebaseUI.Text.HintText" parent="@style/FirebaseUI.EditText" />
5.自定义文本链接
<style name="FirebaseUI.Text.Link">
<item name="android:textColor">@color/colorBlue</item>
</style>
最后，当您像这样创建 Auth 实例引用时：
.setAvailableProviders(Collections.singletonList(
new AuthUI.IdpConfig.PhoneBuilder()
.build()))
.setTheme(R.style.LoginTheme)
.setLogo(R.drawable.urlogo)
.setTosAndPrivacyPolicyUrls("https://urls","https://urls")
.build();
【讨论】：
如果您想自定义身份验证屏幕并且仅更改样式对您不起作用，您也可以使用这个：
AuthMethodPickerLayout customLayout = new AuthMethodPickerLayout
.Builder(R.layout.your_custom_layout_xml)
.setGoogleButtonId(R.id.bar)
.setEmailButtonId(R.id.foo)
// ...
.setTosAndPrivacyPolicyId(R.id.baz)
.build();
startActivityForResult(
AuthUI.getInstance(this).createSignInIntentBuilder()
// ...
.setAuthMethodPickerLayout(customLayout)
.build());
这允许您创建自定义布局，并且您可以为您正在使用的不同登录提供程序定义 ID，以便 Firebase 可以在单击这些按钮时自动调用正确的提供程序。
欲了解更多信息，您可以阅读：https://github.com/firebase/FirebaseUI-Android/blob/master/auth/README.md#custom-layout
【讨论】：