Причина, по которой ваши imageViews располагаются друг над другом, заключается в том, что вы определяете:
imageViewB.leftAnchor.constraint(equalTo: imageViewA.leftAnchor)
Это означает: левая сторона imageView B совпадает с левой частью imageViewA, фактически говоря, что их левые стороныоба начинаются в одном и том же месте, поэтому они будут друг над другом.
Таким образом, вам нужно определить каждый элемент слева направо:
imageViewB.leftAnchor.constraint(equalTo: imageViewA.rightAnchor)
imageViewBs слева, начинается справа от imageViewA.imageView Cs leftAnchor будет равен imageViewBs right и так далее, пока вы не достигнете окончательного imageViewD, где вам нужно будет иметь значение leftAnchor, равное imageViewCs rightAnchor, и imageViewDs rightAnchor, равное scrollViews rightAnchor, чтобы обеспечить правильную работу прокрутки.
Вы также можете легко делать то, что хотите, с помощью scrollView, если вы хотите прокрутить Вниз вместо лево-правого, вместо левого и правого якорей, используйте centerXAnchors, чтобы держать представления в центре scrollView
Вы должны представить, что кто-то описывает макет, ImageViewA находится сверху, поэтому его верхняя привязка равна верхней привязке scrollViews.
С imageViewB вы делаете то же самое, описывая его сверху вниз, поэтому:
imageViewB.topAnchor.constraint(equalTo: imageViewA.bottomAnchor).isActive = true
Верх изображения B начинается в нижней части imageView A, затем вы делаете то же самое состальное примерно так:
imageViewC.topAnchor.constraint(equalTo: imageViewC.bottomAnchor).isActive = true
и
imageViewD.topAnchor.constraint(equalTo: imageViewC.bottomAnchor).isActive = true
Поскольку это scrollView, а вы прокручиваете вниз, верх (imageViewA) должен быть установлен вверху прокруткипредставление, и дополнительно нижний элемент должен определить свой bottomAnchor к нижней части scrollView для правильной работы прокрутки:
imageViewD.bottomAnchor.constraint(equalTo: userImageScrollView.bottomAnchor).isActive = true
Вы также используете centerXAnchor и leftAnchor вместе в некоторых изПредставьте себе, что centerXAnchor - это то же самое, что и leftAnchor, но просто описывает его с другой части представления, так как ваш centerXAnchor идет после leftAnchor, он просто будет использовать centerX, что означает, что изображение будет центромв scrollView.
Я бы порекомендовал следовать этому шаблону и заново строить свои ограничения с нуля, сосредоточившись на том, какие якоря нужно определить и где.Вы также можете использовать Интерфейсный Разработчик для добавления представлений, но обучение определению подобных ограничений в будущем окажется очень полезным навыком и поможет сохранить ваш код очень ясным и чистым.
ОБНОВЛЕНИЕ:
Этот код будет делать именно то, что вы хотите, обратите внимание на высоту и ширину вида прокрутки и константы, которые я использую, чтобы освободить место.Каждый 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
}
Вот рисунок того, что делает этот код:
через GIPHY
Не забудьте позвонить setupLayout в viewDidLoad()
override func viewDidLoad() {
super.viewDidLoad()
setupLayout()
// Do any additional setup after loading the view, typically from a nib.
}