UIScrollView或UICollectionView可以按顺序从Firebase调用图像? [英] UIScrollView or UICollectionView to swipe through images in order called from firebase?

问题描述

我的应用具有一项功能，可在其中回答有关您所关注的人的问题，例如(选项A，B，C，D是用户名称所在的位置):

My app is has a feature in which you answer questions about people you are following, such as (Option A, B, C, D are where the names for the users will be):

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

The idea is that you answer a question about a user and it randomly shuffles from the people you are following from the firebase database. The images are the profile pictures that a user uploads when signing up and they are shown in order from the top left, top right, bottom left, bottom right of whoever is in the answer of the question.

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

I am trying to use UIScrollView but all the images have stacked up on top of each other instead of being able to swipe between them (and the Question label has disappeared)

是否有办法使ScrollView正常工作，或者有一种更好/更有效的方法来集成UICollectionView(我见过几篇类似的文章对此进行了推荐)?

Is there a way to get the ScrollView to work or is there a better/more efficient way of integrating a UICollectionView (i've seen a few posts that recommend this for similar things)?

我对此很陌生，所以需要任何帮助，在此先感谢:)

I'm new to this so would appreciate any help, thanks in advance :)

更新:

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

I've edited the constraints so the left and right anchors of the image views should be correct and added a UIView on top of the UIScrollView on storyboard. I've also seen it could be done with UIPageViewController?

@IBOutlet weak var userImageScrollView: UIScrollView!
@IBOutlet weak var contentView: UIView!
@IBOutlet weak var questionLabel: UILabel!
@IBOutlet weak var optionA: UIButton!
@IBOutlet weak var optionB: UIButton!
@IBOutlet weak var optionC: UIButton!
@IBOutlet weak var optionD: UIButton!

func setupLayout() {
    userImageScrollView.isPagingEnabled = true
    userImageScrollView.isScrollEnabled = true

    userImageScrollView.addSubview(imageViewA)
    imageViewA.translatesAutoresizingMaskIntoConstraints = false
    imageViewA.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor).isActive = true
    imageViewA.heightAnchor.constraint(equalTo: userImageScrollView.heightAnchor).isActive = true
    imageViewA.topAnchor.constraint(equalTo: userImageScrollView.topAnchor).isActive = true
    imageViewA.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor).isActive = true
    imageViewA.leftAnchor.constraint(equalTo: userImageScrollView.leftAnchor)
    imageViewA.rightAnchor.constraint(equalTo: imageViewB.leftAnchor)
    imageViewA.contentMode = .scaleAspectFit

    userImageScrollView.addSubview(imageViewB)
    imageViewB.translatesAutoresizingMaskIntoConstraints = false
    imageViewB.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor).isActive = true
    imageViewB.heightAnchor.constraint(equalTo: userImageScrollView.heightAnchor).isActive = true
    imageViewB.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor).isActive = true
    imageViewB.leftAnchor.constraint(equalTo: imageViewA.rightAnchor)
    imageViewA.rightAnchor.constraint(equalTo: imageViewC.leftAnchor)
    imageViewB.contentMode = .scaleAspectFit

    userImageScrollView.addSubview(imageViewC)
    imageViewC.translatesAutoresizingMaskIntoConstraints = false
    imageViewC.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor).isActive = true
    imageViewC.heightAnchor.constraint(equalTo: userImageScrollView.heightAnchor).isActive = true
    imageViewC.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor).isActive = true
    imageViewC.leftAnchor.constraint(equalTo: imageViewB.rightAnchor)
    imageViewC.rightAnchor.constraint(equalTo: imageViewD.leftAnchor)
    imageViewC.contentMode = .scaleAspectFit

    userImageScrollView.addSubview(imageViewD)
    imageViewD.translatesAutoresizingMaskIntoConstraints = false
    imageViewD.widthAnchor.constraint(equalTo: userImageScrollView.widthAnchor).isActive = true
    imageViewD.heightAnchor.constraint(equalTo: userImageScrollView.heightAnchor).isActive = true
    imageViewD.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor).isActive = true
    imageViewD.leftAnchor.constraint(equalTo: imageViewC.rightAnchor)
    imageViewD.rightAnchor.constraint(equalTo: userImageScrollView.rightAnchor)
    imageViewD.contentMode = .scaleAspectFit

    self.userImageScrollView.delegate = self
}

推荐答案

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

The reason your imageViews are on top of each other is you define:

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

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

This translates to: the left of imageView B is the same as the left of imageViewA, essentially saying that their left sides both start at the same place, so they will be on top of each other.

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

So you need to define each item from left to right:

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

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

imageViewBs left side, starts on the right of imageViewA. imageView Cs leftAnchor would be equal to imageViewBs right and so on, until you reach the final imageViewD, where you would need to have the leftAnchor equal to imageViewCs rightAnchor AND imageViewDs rightAnchor equal to the scrollViews rightAnchor to allow scrolling to work correctly.

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

You could also do what you want easily with a scrollView if you want to scroll Down instead of left to right, instead of left and right anchors, use centerXAnchors to keep the views centered in the scrollView

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

You need to imagine you are describing the layout to someone, ImageViewA is at the top, so its top anchor is equal to the scrollViews top anchor.

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

With imageViewB you do the same describing it from the top down, so:

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

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

The top of image view B starts at the bottom of imageView A, then you do the same with the rest like so:

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

和

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

由于其为scrollView，并且您正在向下滚动，因此顶部(imageViewA)需要设置为滚动视图的顶部，此外，底部项目需要将其bottomAnchor定义到scrollView的底部，以便滚动以正常工作:

Because its a scrollView, and you are scrolling down, the top (imageViewA) needs to be set to the top of the scroll view, and additionally the bottom item needs to define its bottomAnchor to the bottom of the scrollView in order for scrolling to work correctly:

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

您在某些视图中还同时使用了centerXAnchor和leftAnchor，假设centerXAnchor与leftAnchor相同，但是只是从视图的不同部分描述它，就像您的centerXAnchor在leftAnchor之后，它将仅使用centerX，这意味着图像将在scrollView中居中.

You also are using centerXAnchor and leftAnchor together in some of the views, imagine the centerXAnchor is the same as leftAnchor but just describing it from a different part of the view, as your centerXAnchor comes after leftAnchor, it will just use the centerX, meaning that the image will be center in the scrollView.

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

I'd recommend following this pattern and building your constraints again from scratch, really focusing on what anchors need to be defined and where. You could also use the Interface Builder to add the views, but learning to define constraints like this will prove to be a very valuable skill in future and helps to keep your code very clear and clean.

更新:

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

This code will do exactly what you want, take note of the height and width of the scroll view and the constants I use to give space. Each imageView is defined the way I stated above, left to right, with the last item having left and right constraints. remove your setupLayout and replace it with this (making sure to change the constraints where necessary to suit your app):

 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


}

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

Here is a gif of what that code does:

通过GIPHY

• 别忘了在viewDidLoad()

 override func viewDidLoad() {
super.viewDidLoad()

setupLayout()
// Do any additional setup after loading the view, typically from a nib.
 }

这篇关于UIScrollView或UICollectionView可以按顺序从Firebase调用图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！