【问题标题】:display firebase images array in custom view (icarousel)在自定义视图中显示 firebase 图像数组(icarousel)
【发布时间】:2017-11-11 06:19:50
【问题描述】:

我的应用程序的用户可以发布帖子,当他们发布帖子时,他们可以上传多张图片。我遇到的问题是在我的应用程序中查看图片。这是该节点在 Firebase 中的外观:

  },    
  "-Kjy7sfa7pWmlawqWTsN" : {    
    "image" : "CfHWd.jpg",  
    "imageFive" : "30fQI.jpg",  
    "imageFour" : "uOnVB.jpg",  
    "imageThree" : "eHMOY.jpg", 
    "imageTwo" : "jQCLu.jpg",   
  } 

这就是我从 firebase 中检索它们的方式:

if let stringImage = self.imageNames {

            let imageRef = storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage)")

            imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                if error == nil {

                    self.ImageOne = UIImage(data: data!)!



                }else {
                    print("Error downloading image:" )
                }

                if let stringImages = self.imagesTwo {

                    let imageRefs = self.storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImages)")

                    imageRefs.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                        if error == nil {

                            self.ImageTwo = UIImage(data: data!)!


                        }else {
                            print("Error downloading image:" )
                        }



                    })}
                if let stringImage3 = self.imagesThree {

                    let imageRef = self.storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage3)")

                    imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                        if error == nil {

                            self.ImageThree = UIImage(data: data!)!


                        }else {
                            print("Error downloading image:" )
                        }



                    })}
                if let stringImage4 = self.imagesFour {

                    let imageRef = self.storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage4)")

                    imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                        if error == nil {

                            self.ImageFour = UIImage(data: data!)!


                        }else {
                            print("Error downloading image:" )
                        }



                    })}
                if let stringImage5 = self.imagesFive {
                    AppDelegate.instance().showActivityIndicator()
                    let imageRef = self.storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage5)")

                    imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                        if error == nil {
                            AppDelegate.instance().dismissActivityIndicator()
                            self.ImageFive = UIImage(data: data!)!


                        }else {
                            print("Error downloading image:" )
                        }



                    })}



            })}

现在我的问题是在一个名为 icarousel 的特殊视图中显示它们。我成功地能够在 icarousel 中显示我的资产文件夹中的图像:

  var imageArray : NSMutableArray = NSMutableArray()
    @IBOutlet weak var carouselView: iCarousel!
override func viewDidLoad() {
        super.viewDidLoad()
self.carouselView.delegate = self
        self.carouselView.dataSource = self

imageArray = ["imageOne", "imageTwo", "imageThree"]
carouselView.type = .wheel
        carouselView.reloadData()
}

func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
        var imageView: UIImageView!

        if view == nil {
            imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 100, height: 130))
            imageView.contentMode = .scaleAspectFit
        }else{
            imageView = view as! UIImageView

        }
        imageView.image = UIImage(named: "\(imageArray.object(at: index))")
        return imageView

        }


    public func numberOfItems(in carousel: iCarousel) -> Int {
        return imageArray.count
    }

但是,我尝试从 firebase 检索所有图像并将它们放入一个数组中:

imageArray = [self.ImageOne, self.ImageTwo, self.ImageThree, self.ImageFour, self.ImageFive]

但它不起作用,我不确定我做错了什么 这是我从 firebase 设置 icarousel 的尝试:

var imageArray : NSMutableArray = NSMutableArray()
@IBOutlet var carouselView: iCarousel!

var ImageOne = UIImage()
var ImageTwo = UIImage()
var ImageThree = UIImage()
var ImageFour = UIImage()
var ImageFive = UIImage()

    var images: NSArray! = []
override func viewDidLoad() {
        super.viewDidLoad()
self.carouselView.delegate = self
        self.carouselView.dataSource = self
 if let stringImage = self.imageNames {

            let imageRef = storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage)")

            imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                if error == nil {

                    self.ImageOne = UIImage(data: data!)!



                }else {
                    print("Error downloading image:" )
                }

                if let stringImages = self.imagesTwo {

                    let imageRefs = self.storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImages)")

                    imageRefs.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                        if error == nil {

                            self.ImageTwo = UIImage(data: data!)!


                        }else {
                            print("Error downloading image:" )
                        }



                    })}
                if let stringImage3 = self.imagesThree {

                    let imageRef = self.storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage3)")

                    imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                        if error == nil {

                            self.ImageThree = UIImage(data: data!)!


                        }else {
                            print("Error downloading image:" )
                        }



                    })}
                if let stringImage4 = self.imagesFour {

                    let imageRef = self.storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage4)")

                    imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                        if error == nil {

                            self.ImageFour = UIImage(data: data!)!


                        }else {
                            print("Error downloading image:" )
                        }



                    })}
                if let stringImage5 = self.imagesFive {
                    AppDelegate.instance().showActivityIndicator()
                    let imageRef = self.storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage5)")

                    imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
                        if error == nil {
                            AppDelegate.instance().dismissActivityIndicator()
                            self.ImageFive = UIImage(data: data!)!


                        }else {
                            print("Error downloading image:" )
                        }



                    })}



            })}


       imageArray = [self.ImageOne, self.ImageTwo, self.ImageThree, self.ImageFour, self.ImageFive]


        carouselView.type = .rotary
        carouselView.reloadData()


    }
func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
        var imageView: UIImageView!

        if view == nil {
            imageView = UIImageView(frame: CGRect(x: 20, y: 0, width: 230, height: 270))
            imageView.backgroundColor = UIColor.lightGray
            imageView.contentMode = .scaleAspectFit
            imageView.clipsToBounds = true
            carousel.clipsToBounds = true
        }else{
            imageView = view as! UIImageView

        }


        imageView.image = imageArray[index] as? UIImage;
        print(imageArray)
        return imageView

    }



    public func numberOfItems(in carousel: iCarousel) -> Int {
        return imageArray.count
    }

【问题讨论】:

  • carousel,设置图片为imageView.image = imageArray[index]
  • if let stringImage = self.imageNames{} 在哪里调用?既然应该有异步/后台进程,那么你调用carouselView.reloadData()的时候数组满了吗?
  • 在 imageArray 中,您没有保存图像名称.. 但您正在保存图像.. 要么保存图像名称并将它们保存在本地以获得更好的性能.. 要么使用 @Wei Jay 的解决方案..
  • @WeiJay 我做到了,但还是不行
  • 另外,下载图片是一个异步函数,图片准备好后记得调用carouselView.reloadData()

标签: ios swift firebase firebase-realtime-database icarousel


【解决方案1】:

使用 imageArray 让您的图像远离火力基地,并在一切完成后重新加载轮播。

var imageArray = [UIImage]() 

if let stringImage = self.imageNames {
    let imageRef = storage.reference(forURL: "gs://gsignme-14416.appspot.com/images/\(stringImage)")
    imageRef.data(withMaxSize: 25 * 1024 * 1024, completion: { (data, error) -> Void in
        guard let error != nil else { return }

        if let data = data, let image = UIImage(data: data) {
            imageArray.append(image)

            if imageArray.count ==  self.imageNames.count { carouselView.reloadData() }
        }
    })
}

func carousel(_ carousel: iCarousel, viewForItemAt index: Int, reusing view: UIView?) -> UIView {
    var imageView: UIImageView!

    if view == nil {
        imageView = UIImageView(frame: CGRect(x: 20, y: 0, width: 230, height: 270))
        imageView.backgroundColor = UIColor.lightGray
        imageView.contentMode = .scaleAspectFit
        imageView.clipsToBounds = true
        carousel.clipsToBounds = true
    }else{
        imageView = view as! UIImageView
    }


    imageView.image = imageArray[index]
    print(imageArray)
    return imageView

}

【讨论】:

  • 我们正在进步!!现在正在显示图像!但是,并非所有帖子都有五张图片,但是当我点击任何一张帖子时,它会显示我数据库中的所有图像,而不是帖子特定的一张
  • 你必须检查你的点击逻辑。索引应该与您点击的图像相对应。
  • 我可以使用 imageArray.append(image) 以外的东西吗,因为当我单击单元格并离开并再次单击时,它会添加两次相同的图像,如果我再次离开它会再次添加相同的图像
  • 你可以在需要更新图片时使用imageArray.removeAll()
  • 好的,现在这似乎是最后一个问题,你知道为什么当我第一次单击单元格时什么都没有显示,但当我第二次单击它时图像出现
猜你喜欢
  • 2017-09-28
  • 1970-01-01
  • 1970-01-01
  • 2017-07-02
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多