如何为iOS的FirebaseUI登录添加背景图像？ [英] How Can I Add a Background Image for FirebaseUI Login for iOS?

问题描述

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

关于

更新：我可以使用下面评论中给出的代码显示图像，但它显示了登录按钮，如下图所示。 / p>

这是heirarchy的图像在杰弗里的帮助下：

解决方案

这是解决方案！

从ViewController.swift中删除无效的垃圾：

  func authPickerViewController（用于authUI：FIRAuthUI） - > FIRAuthPickerViewController {
 
 customAuthPickerViewController = authPickerViewController（for：authUI）
 backgroundImage = UIImageView（image：UIImage（named：bizzybooksbee））
 backgroundImage.contentMode = UIViewContentMode.scaleAspectFill 
 customAuthPickerViewController.view.addSubview（backgroundImage）
 
返回customAuthPickerViewController 
} 
  

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

  import UIKit 
 import FirebaseAuthUI 
 
 class BizzyAuthViewController：FIRAuthPickerViewController {
 
 override func viewDidLoad（）{ 
 super.viewDidLoad（）
 
 //加载视图后进行任何其他设置。 
 
 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（名称：bizzybooksbee）
 
 //你可以改变内容模式：
 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，ani交配：true，完成：nil）
  

我还做了一个 YouTube教程，展示了如何深入实现这一目标。

I'd like to be able to place a background image behind the three sign-in buttons (for Google, Facebook, and Email) of the FirebaseUI login screen. FirebaseUI login is a drop-in authentication solution for iOS, Android, and Web. I'm having trouble with iOS.

There's a little bit of advice on Github, but not enough.

I first initialize my var customAuthPickerViewController : FIRAuthPickerViewController! near the top of the ViewController.swift file.

Then, this is the function in my ViewController.swift file, but it's not working. When I click the logout button, the app crashes, and no background image is ever shown.

// 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
}

The background image "bizzybooksbee" is a Universal Image Set with 1x, 2x, and 3x images already loaded in my Assets.xcassets folder.

Here's a picture of what the login screen looks like without trying to implement the background image.

UPDATE: I'm able to get the image to show, with the code I gave in the comments below, but it shows OVER the sign-in buttons, as in the pic below.

Here's an image of the "heirarchy," with Jeffrey's help:

解决方案

Here's the solution!

Remove the junk that doesn't work from 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   
}

Create a .swift "subclass" of FIRAuthPickerViewController that you can name anything, and add your background image/customization there:

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)
    }}

In your ViewController.swift (or whatever you call it), in the section where you login, change authViewController to equal your new subclass, add a line for the navigation controller, and pass it into the self.present:

let authViewController = BizzyAuthViewController(authUI: authUI!)

let navc = UINavigationController(rootViewController: authViewController)

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

I also made a YouTube tutorial which shows how to do this in depth.

这篇关于如何为iOS的FirebaseUI登录添加背景图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！