swift - 我应该如何从 Firebase 检索数据到 UICollectionViewCell？

Question

我是 Swift 和 Firebase 的新手，所以我有一个问题。我有一个带有数据的模型。但我需要从 firebase 检索数据并用此数据填充 UICollectionViewCells 。

这是数据模型:

 // MARK: - Public API
var title = ""
var description = ""
var ref = Database.database().reference()

init(withSnapshot: DataSnapshot) {
    self.description = withSnapshot.childSnapshot(forPath: "description").value as? String ?? "No Description"
   // self.featuredImage = withSnapshot.childSnapshot(forPath: "image").value as? String ?? "No Image"
    self.title = withSnapshot.childSnapshot(forPath: "title").value as? String ?? "No Title"
}

var programsArrayDataSource = [TrainingProgram]()

func fetchPrograms() {
    let programsRef = self.ref.child("programs")
    programsRef.observeSingleEvent(of: .value, with: { snapshot in
        let allPrograms = snapshot.children.allObjects as! [DataSnapshot]
        for programSnap in allPrograms {
            let aProgram = TrainingProgram(withSnapshot: programSnap)
            self.programsArrayDataSource.append(aProgram)
        }

       // self.programTableView.reloadData()
    })
}

UICollectionViewCell

import UIKit

class TrainingProgramCollectionViewCell: UICollectionViewCell {



    @IBOutlet weak var roundedView: UIView!
    @IBOutlet weak var bgView: UIView!
    @IBOutlet weak var viewForImage: UIView!

    @IBOutlet weak var buttonOutlet: UIButton!


    @IBOutlet weak var featuredImageView: UIImageView!

    @IBOutlet weak var descriptionLabel: UILabel!
    @IBOutlet weak var titleLabel: UILabel!

    var trainingPrograms: TrainingProgram? {
        didSet {
            self.updateUI()
        }
    }



    private func updateUI()
    {
        if let trainingProgram = trainingPrograms {

            featuredImageView.image = trainingPrograms!.featuredImage
            titleLabel.text = trainingPrograms!.title
            descriptionLabel.text = trainingPrograms!.description

            buttonOutlet.backgroundColor = UIColor(red: 0, green: 122/255, blue: 255/255, alpha: 1)
            buttonOutlet.layer.cornerRadius = 25
            buttonOutlet.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.4).cgColor
            buttonOutlet.layer.shadowOffset = CGSize(width: 0, height: 5)
            buttonOutlet.layer.shadowRadius = 15
            buttonOutlet.layer.shadowOpacity = 1
            bgView!.layer.cornerRadius = 20
            featuredImageView.roundCorners(corners: [.topLeft, .topRight], radius: 20.0)
            viewForImage.roundCorners(corners: [.topLeft, .topRight], radius: 20.0)
            roundedView.layer.cornerRadius = 20



            featuredImageView.contentMode = .scaleAspectFill

            let view = UIView(frame: featuredImageView.frame)
            view.clipsToBounds = true



            featuredImageView.clipsToBounds = true



        } else {
            featuredImageView.image = nil
            titleLabel.text = nil
            descriptionLabel.text = nil
        }


    }

    override func layoutSubviews() {
        super.layoutSubviews()

        self.layer.cornerRadius = 3.0
        layer.shadowRadius = 10
        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize(width: 5, height: 10)

        self.clipsToBounds = false
    }

    override func prepareForReuse() {
        super.prepareForReuse()


    }

}

UIViewController

class TrainingProgramViewController: UIViewController {

@IBOutlet weak var collectionView: UICollectionView!


  //    var trainingPrograms = TrainingProgram.fetchTrainingProgram()
var trainingPrograms = [TrainingPrograms]()
    let cellScale: CGFloat = 0.7


override func viewDidLoad() {
    super.viewDidLoad()

    let screenSize = UIScreen.main.bounds.size

    collectionView.dataSource = self
    collectionView.delegate = self

    let cellWidth = floor(screenSize.width * cellScale)
    let cellHeight = floor(screenSize.height * cellScale)

    let insetX = (view.bounds.width - cellWidth) / 3.0
    let insetY = (view.bounds.height - cellHeight) / 2.0

    let layout = collectionView!.collectionViewLayout as! UICollectionViewFlowLayout
    layout.itemSize = CGSize(width: cellWidth, height: cellHeight)
    collectionView?.contentInset = UIEdgeInsets(top: insetY, left: insetX, bottom: insetY, right: insetX)

}

}

扩展 TrainingProgramViewController:UICollectionViewDataSource {

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return trainingPrograms.count
}

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
{

    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TrainingProgramCollectionViewCell", for: indexPath) as!  TrainingProgramCollectionViewCell
    let trainingProgram = trainingPrograms[indexPath.item]
    cell.trainingPrograms = trainingProgram

    return cell

}

}

extension TrainingProgramViewController : UIScrollViewDelegate, UICollectionViewDelegate
{
    func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>)
    {
        let layout = self.collectionView?.collectionViewLayout as! UICollectionViewFlowLayout
        let cellWidthIncludingSpacing = layout.itemSize.width + layout.minimumLineSpacing

        var offset = targetContentOffset.pointee
        let index = (offset.x + scrollView.contentInset.left) / cellWidthIncludingSpacing
        let roundedIndex = round(index)

        offset = CGPoint(x: roundedIndex * cellWidthIncludingSpacing - scrollView.contentInset.left, y: -scrollView.contentInset.top)
        targetContentOffset.pointee = offset
    }
}

如何将数据从 Firebase 检索到此数组？我需要检索两个标签和一张图像

Firebase 结构。 “link”- 来自 Firebase 存储的链接。这是一个将进行编程的结构示例

program1
    description: 
      "Lorem"
    image: 
     "link"
    title: 
     "Workout1"
 program2
    description: 
     "Lorem"
    image: 
     "link"
    title: 
     "Workout2"

Answer 1

通读评论，您似乎在询问如何从 Firebase 读取数据。由于问题中没有 Firebase 代码，我不得不猜测您最终想要完成什么，因此我首先将您引导至 Firebase 指南 Reading and Writing Data因为这涵盖了主题。然后，参见Working With Lists

为了提供帮助，这里有一个可能的解决方案。

由于您有一个 tableView，因此通常由 tableView 数据源支持。因此，其概念是从 Firebase 读取数据，然后填充该数据源，然后刷新 tableView，这将在 UI 中向用户显示对象。

让我们从一个类来保存 Firebase 实时数据库中的数据

class ProgramClass {
    var description = ""
    var image = ""
    var title = ""

    init(withSnapshot: DataSnapshot) {
        self.description = withSnapshot.childSnapshot(forPath: "description").value as? String ?? "No Description"
        self.image = withSnapshot.childSnapshot(forPath: "image").value as? String ?? "No Image"
        self.title = withSnapshot.childSnapshot(forPath: "title").value as? String ?? "No Title"
    }
}

然后是一个类变量来保存这些对象

var programsArrayDataSource = [ProgramClass]()

请记住，类 var 将充当支持 TableView 的数据源。当 Firebase 中发生更改时，将通过 Firebase 观察(.childAdded、.childChanged 或 .childRemoved)更新数据源，然后重新加载 tableView。

要实际阅读问题中提供的 Firebase 结构，请使用以下代码。这将读取 Firebase 并填充 tableView 的数据源。

func fetchPrograms() {
    let programsRef = self.ref.child("programs")
    programsRef.observeSingleEvent(of: .value, with: { snapshot in
        let allPrograms = snapshot.children.allObjects as! [DataSnapshot]
        for programSnap in allPrograms {
            let aProgram = ProgramClass(withSnapshot: programSnap)
            self.programsArrayDataSource.append(aProgram)
        }

        self.programTableView.reloadData()
    })
}

从那里你可以处理tableView代码；当一行需要刷新时，通过索引(行)从数据源获取该对象，从该对象读取数据并以您需要的任何格式填充 tableView 单元格。