ios - 从 URL 下载图像并添加到 scrollview subview

Question

我想当我的项目有画廊时获取图像 url 并使用 url 数据创建 imageView 并将此 ImageView 添加到 ScrollView subview ，并在 ScrollView subview 之间滚动。我的 imageView 数组有 6 个 imageView，但 ImageView 图像是空的，我的 ScrollView 分页效果很好，但只有一个图像显示在 ScrollView 中，其他 ImageView 图像是白色背景。有我的代码。

在从 webService 获取数据时创建 url 数组然后调用 getImageData 方法

func getImageData() {

  self.defaultImage.isHidden = true
  self.scrollView.isHidden = false
  scrollView.isPagingEnabled = true
  scrollView.showsVerticalScrollIndicator = true
  scrollView.showsHorizontalScrollIndicator = false
  scrollView.isScrollEnabled = true
  self.scrollView.willRemoveSubview(defaultImage)
  for i in gallaryURL {
      self.downloadImage(string: i)      
  }
  Timer.scheduledTimer(timeInterval: 3, target: self, selector: #selector(moveToNextPage), userInfo: nil, repeats: true) 

}

func downloadImage(string: String)  {

  let imageUrl:URL = URL(string: string)!
  // Start background thread so that image loading does not make app unresponsive
  DispatchQueue.global(qos: .background).async {
  let imageData:NSData = NSData(contentsOf: imageUrl)!
  let myImageView = UIImageView(frame: CGRect(x:self.scrollWith!*2, y:0,width:self.scrollWith!, height:self.scrollHeight!))
  myImageView.backgroundColor = #colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)
  let image = UIImage(data: imageData as Data)
  myImageView.image = image
   // When from background thread, UI needs to be updated on main_queue
  DispatchQueue.main.async {
    self.allImage.append(myImageView)
    self.scrollView.addSubview(myImageView)
    self.scrollView.contentSize = CGSize(width:self.scrollView.frame.width * 4, height:self.scrollView.frame.height)
        }
    }

func moveToNextPage() {

    let pageWidth:CGFloat = self.scrollView.frame.width
    let maxWidth:CGFloat = pageWidth * 4
    let contentOffset:CGFloat = self.scrollView.contentOffset.x
    var slideToX = contentOffset + pageWidth
    if  contentOffset + pageWidth == maxWidth{
        slideToX = 0
    }
    self.scrollView.scrollRectToVisible(CGRect(x:slideToX, y:0, width:pageWidth, height:self.scrollView.frame.height), animated: true)
}

如何解决这个问题？

Answer 1

我认为你的问题出在这一行:

let myImageView = UIImageView(frame: CGRect(x:self.scrollWith!*2, y:0,width:self.scrollWith!, height:self.scrollHeight!))

你让所有的 ImageView 都是同一个位置 x，它们重叠位置 self.scrollWith!*2。

您可以在 downloadImage 函数中添加一个名为 index 或 position 的参数，如下所示:

func downloadImage(string: String, index: Int) {

    let imageUrl:URL = URL(string: string)!
    // Start background thread so that image loading does not make app unresponsive
    DispatchQueue.global(qos: .background).async {

    let imageData:NSData = NSData(contentsOf: imageUrl)!

    let myImageView = UIImageView(frame: CGRect(x:self.scrollWith!*index, y:0,width:self.scrollWith!, height:self.scrollHeight!))
    myImageView.backgroundColor = #colorLiteral(red: 0.9568627477, green: 0.6588235497, blue: 0.5450980663, alpha: 1)

    let image = UIImage(data: imageData as Data)
    myImageView.image = image

    // When from background thread, UI needs to be updated on main_queue
    DispatchQueue.main.async {

        self.allImage.append(myImageView)

        self.scrollView.addSubview(myImageView)


        self.scrollView.contentSize = CGSize(width:self.scrollView.frame.width * 4, height:self.scrollView.frame.height)

    }
}

然后您可以像下面这样使用 for 循环:

func getImageData() {

    self.defaultImage.isHidden = true
    self.scrollView.isHidden = false
    scrollView.isPagingEnabled = true
    scrollView.showsVerticalScrollIndicator = true
    scrollView.showsHorizontalScrollIndicator = false
    scrollView.isScrollEnabled = true
    self.scrollView.willRemoveSubview(defaultImage)

    for i in 0..<gallaryURL.count {

        self.downloadImage(string: gallaryURL[i], index: i)

    }

    Timer.scheduledTimer(timeInterval: 3, target: self, selector: #selector(moveToNextPage), userInfo: nil, repeats: true)

}

希望该解决方案对您有用。