UIScrollView或UICollectionView可以按顺序从Firebase调用图像？

Question

我的应用具有一项功能，可在其中回答有关您所关注的人的问题，例如（用户名将位于选项A，B，C，D）：

这个想法是您回答一个有关用户的问题，它会随机从Firebase数据库中追踪的人中随机播放。图像是用户注册时上传的个人资料图片，并按从回答问题的人的左上，右上，左下，右下的顺序显示。

我正在尝试使用UIScrollView，但是所有图像都堆叠在一起而不是能够在它们之间滑动（并且问题标签已消失）

是否有办法使ScrollView正常工作，或者有一种更好/更有效的方法来集成UICollectionView（我见过一些类似的文章推荐这样做）？

我是新来的，所以感谢您的帮助，谢谢：）

---

更新：

我已经编辑了约束，因此图像视图的左右锚点应该正确，并在情节提要上的UIScrollView顶部添加了UIView。我也看到可以用UIPageViewController做到吗？

<fx:include>

Answer 1

您定义imageView彼此重叠的原因是

 imageViewB.leftAnchor.constraint(equalTo: imageViewA.leftAnchor)

这意味着：imageView B的左侧与imageViewA的左侧相同，实质上是说它们的左侧都从同一位置开始，因此它们将彼此叠置。

因此，您需要从左到右定义每个项目：

imageViewB.leftAnchor.constraint(equalTo: imageViewA.rightAnchor)

imageViewBs左侧，从imageViewA的右侧开始。 imageView Cs leftAnchor将等于rightImageViewBs，依此类推，直到到达最终的imageViewD，在此处您需要将leftAnchor等于imageViewCs rightAnchor和imageViewDs rightAnchor等于scrollViews rightAnchor，以使滚动正常工作。

如果您想向下滚动而不是从左至右滚动，而不是左右锚，也可以使用scrollView轻松完成所需的操作，请使用centerXAnchors将视图保持在scrollView中心

您需要想象一下，您正在向某人描述布局，ImageViewA在顶部，因此其顶部锚点等于scrollViews顶部锚点。

使用imageViewB，您需要执行从上至下的描述，因此：

 imageViewB.topAnchor.constraint(equalTo: imageViewA.bottomAnchor).isActive = true

图像视图B的顶部从图像视图A的底部开始，然后对其余视图执行相同的操作，

 imageViewC.topAnchor.constraint(equalTo: imageViewC.bottomAnchor).isActive = true

和

 imageViewD.topAnchor.constraint(equalTo: imageViewC.bottomAnchor).isActive = true

因为它是一个scrollView，并且您正在向下滚动，所以顶部（imageViewA）需要设置为滚动视图的顶部，此外，底部项目需要在scrollView的底部定义其bottomAnchor，以便滚动以正常工作：

  imageViewD.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor).isActive = true 

在某些视图中，您还同时使用了centerXAnchor和leftAnchor，假设centerXAnchor与leftAnchor相同，只是从另一部分进行了描述。视图，因为您的centerXAnchor位于leftAnchor之后，它将仅使用centerX，这意味着图像将在scrollView中居中。

我建议您遵循这种模式，并从头开始重新构建约束，真正地着重于需要定义哪些锚点以及在何处。您也可以使用Interface Builder来添加视图，但是学会定义这样的约束将在将来被证明是一项非常有价值的技能，并且可以帮助您保持代码的清晰和整洁。

更新：

此代码将完全满足您的要求，请注意滚动视图的高度和宽度以及我用来给定空格的常量。每个imageView都是按照我上述从左到右的方式定义的，最后一项具有左右约束。删除setupLayout并将其替换为该布局（确保在必要时更改约束以适合您的应用）

 func setupLayout() {
    view.addSubview(scrollView)
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 50).isActive = true
    scrollView.heightAnchor.constraint(equalToConstant: 300).isActive = true
    scrollView.widthAnchor.constraint(equalToConstant: 300).isActive = true
    scrollView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    scrollView.backgroundColor = .gray
    scrollView.isPagingEnabled = true

    scrollView.addSubview(imageViewA)
    imageViewA.translatesAutoresizingMaskIntoConstraints = false

    imageViewA.widthAnchor.constraint(equalToConstant: 250).isActive = true
    imageViewA.heightAnchor.constraint(equalToConstant: 250).isActive = true

    imageViewA.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 25).isActive = true
    imageViewA.leftAnchor.constraint(equalTo: scrollView.leftAnchor, constant: 25).isActive = true

    imageViewA.backgroundColor = .cyan

    scrollView.addSubview(imageViewB)
    imageViewB.translatesAutoresizingMaskIntoConstraints = false

    imageViewB.heightAnchor.constraint(equalToConstant: 250).isActive = true
    imageViewB.widthAnchor.constraint(equalToConstant: 250).isActive = true


    imageViewB.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 25).isActive = true
    imageViewB.leftAnchor.constraint(equalTo: imageViewA.rightAnchor, constant: 25).isActive = true

    imageViewB.backgroundColor = .red

    scrollView.addSubview(imageViewC)
    imageViewC.translatesAutoresizingMaskIntoConstraints = false

    imageViewC.heightAnchor.constraint(equalToConstant: 250).isActive = true
    imageViewC.widthAnchor.constraint(equalToConstant: 250).isActive = true


    imageViewC.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 25).isActive = true
    imageViewC.leftAnchor.constraint(equalTo: imageViewB.rightAnchor, constant: 25).isActive = true

    imageViewC.backgroundColor = .black

    scrollView.addSubview(imageViewD)
    imageViewD.translatesAutoresizingMaskIntoConstraints = false

    imageViewD.heightAnchor.constraint(equalToConstant: 250).isActive = true
    imageViewD.widthAnchor.constraint(equalToConstant: 250).isActive = true


    imageViewD.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 25).isActive = true
    imageViewD.leftAnchor.constraint(equalTo: imageViewC.rightAnchor, constant: 25).isActive = true
    imageViewD.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -25).isActive = true

    imageViewD.backgroundColor = .green


}

以下是该代码的作用的图像：

via GIPHY

• 别忘了在setupLayout中呼叫viewDidLoad()

   override func viewDidLoad() {
  super.viewDidLoad()
  
  setupLayout()
  // Do any additional setup after loading the view, typically from a nib.
   }
  

Answer 2

是的，您可以将CollectionView与pageingnation一起使用。只需启用CollecitonView的分页选项。

1。在视图的顶部区域中添加水平集合视图。启用分页选项     通过属性选择器。

1. 将CollectionView单元格拖到CollectionView中。调整单元格的大小以填充     整个CollectionView

2. 将图像添加到单元格

3. 设置委托和数据源。

https://medium.com/@shaibalassiano/tutorial-horizontal-uicollectionview-with-paging-9421b479ee94