如何为 iOS 的 FirebaseUI 登录添加背景图片？

Question

我希望能够在 FirebaseUI 登录屏幕的三个登录按钮（Google、Facebook 和电子邮件）后面放置一个背景图像。 FirebaseUI 登录是 iOS、Android 和 Web 的嵌入式身份验证解决方案。我遇到了 iOS.

的问题

关于Github有一些建议，但还不够。

我首先在 ViewController.swift 文件的顶部附近初始化我的 var customAuthPickerViewController : FIRAuthPickerViewController!。

那么，这是我的 ViewController.swift 文件中的函数，但它不起作用。当我单击注销按钮时，应用程序崩溃，并且没有显示任何背景图像。

// Customize the sign-in screen to have the Bizzy Books icon/background image

func authPickerViewController(for authUI: FIRAuthUI) -> FIRAuthPickerViewController {

    customAuthPickerViewController = authPickerViewController(for: authUI)
    backgroundImage = UIImageView(image: UIImage(named: "bizzybooksbee"))
    backgroundImage.contentMode = UIViewContentMode.scaleAspectFill
    customAuthPickerViewController.view.addSubview(backgroundImage)

    return customAuthPickerViewController
}

背景图像 "bizzybooksbee" 是一个通用图像集，其中 1x、2x 和 3x 图像已加载到我的 Assets.xcassets 文件夹中。

这里 a picture of what the login screen looks like 没有尝试实现背景图片。

更新：我可以使用我在下面评论中提供的代码来显示图片，但它显示在登录按钮上方，如下图所示。

这是在 Jeffrey 的帮助下 "heirarchy," 的图像：

Answer 1

解决方法在这里！

从 ViewController.swift 中删除不起作用的垃圾：

func authPickerViewController(for authUI: FIRAuthUI) -> FIRAuthPickerViewController {

    customAuthPickerViewController = authPickerViewController(for: authUI)
    backgroundImage = UIImageView(image: UIImage(named: "bizzybooksbee"))
    backgroundImage.contentMode = UIViewContentMode.scaleAspectFill
    customAuthPickerViewController.view.addSubview(backgroundImage)

    return customAuthPickerViewController   
}

创建一个 .swift "subclass" of FIRAuthPickerViewController 你可以命名任何东西，然后添加你的背景 image/customization 在那里：

import UIKit
import FirebaseAuthUI

class BizzyAuthViewController: FIRAuthPickerViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.

        let width = UIScreen.main.bounds.size.width
        let height = UIScreen.main.bounds.size.height

        let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
        imageViewBackground.image = UIImage(named: "bizzybooksbee")

        // you can change the content mode:
        imageViewBackground.contentMode = UIViewContentMode.scaleAspectFill

        view.insertSubview(imageViewBackground, at: 0)
    }}

在你的ViewController.swift（或者你怎么称呼它）中，在你登录的部分，将 authViewController 更改为等于你的新子类，为导航控制器添加一行，并将其传递到 self.present:

let authViewController = BizzyAuthViewController(authUI: authUI!)

let navc = UINavigationController(rootViewController: authViewController)

self.present(navc, animated: true, completion: nil)

我还制作了一个 YouTube tutorial 来深入展示如何做到这一点。

如何为 iOS 的 FirebaseUI 登录添加背景图片？

How Can I Add a Background Image for FirebaseUI Login for iOS?

ios

swift

login

firebase

firebaseui