如何为iOS的FirebaseUI登录添加背景图像?

Bra*_*ell 3 login ios firebase swift firebaseui

我希望能够在FirebaseUI登录屏幕的三个登录按钮(用于Google,Facebook和电子邮件)后面放置背景图像.FirebaseUI登录是iOS,Android和Web的嵌入式身份验证解决方案.我在使用iOS时遇到了麻烦.

Github上有一些建议,但还不够.

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

然后,这是我的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
}
Run Code Online (Sandbox Code Playgroud)

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

是一张没有尝试实现背景图像的登录屏幕的图片.

在此输入图像描述

更新:我可以使用我在下面的评论中给出的代码来显示图像,但它显示了登录按钮,如下图所示.

在此输入图像描述

这是杰里瑞的帮助下的"层次结构"的图像:

在此输入图像描述

Bra*_*ell 5

这是解决方案!

从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   
}
Run Code Online (Sandbox Code Playgroud)

创建一个.swift"子类" FIRAuthPickerViewController,你可以命名任何东西,并在那里添加你的背景图像/自定义:

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)
    }}
Run Code Online (Sandbox Code Playgroud)

在您ViewController.swift(或其他任何名称)中,在您登录的部分中,将authViewController更改为等于您的新子类,为导航控制器添加一行,并将其传递给self.present:

let authViewController = BizzyAuthViewController(authUI: authUI!)

let navc = UINavigationController(rootViewController: authViewController)

self.present(navc, animated: true, completion: nil)
Run Code Online (Sandbox Code Playgroud)

我还制作了一个YouTube教程,展示了如何深入实现这一目标.

  • 根据最新的Firebase UI版本(5.x),应该是FUIAuthPickerViewController的子类而不是FIRAuthPickerViewController (2认同)