以编程方式将视图添加到UIScrollView [英] Add Views to UIScrollView Programmatically
问题描述
我已将以下代码添加到我的UIViewController中:
I have added the following code to my UIViewController:
override func viewDidLoad() {
super.viewDidLoad()
viewBrochures.isUserInteractionEnabled = true
let brochure1: UIImageView = UIImageView(image: UIImage(named: "image1")!)
brochure1.translatesAutoresizingMaskIntoConstraints = false
brochure1.contentMode = .scaleAspectFit
brochure1.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400)
viewBrochures.addSubview(brochure1)
let brochure2: UIImageView = UIImageView(image: UIImage(named: "image2")!)
brochure2.translatesAutoresizingMaskIntoConstraints = false
brochure2.contentMode = .scaleAspectFit
brochure2.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400)
viewBrochures.addSubview(brochure2)
let brochure3: UIImageView = UIImageView(image: UIImage(named: "image3")!)
brochure3.translatesAutoresizingMaskIntoConstraints = false
brochure3.contentMode = .scaleAspectFit
brochure3.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400)
viewBrochures.addSubview(brochure3)
let brochure4: UIImageView = UIImageView(image: UIImage(named: "image4")!)
brochure4.translatesAutoresizingMaskIntoConstraints = false
brochure4.contentMode = .scaleAspectFit
brochure4.frame = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 400)
viewBrochures.addSubview(brochure4)
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure1,
attribute: .trailing,
relatedBy: .equal,
toItem: viewBrochures,
attribute: .trailingMargin,
multiplier: 1,
constant: 0))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure1,
attribute: .leading,
relatedBy: .equal,
toItem: viewBrochures,
attribute: .leadingMargin,
multiplier: 1,
constant: 0))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure1,
attribute: .top,
relatedBy: .equal,
toItem: viewBottomButtons,
attribute: .bottom,
multiplier: 1,
constant: 10))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure1,
attribute: .bottom,
relatedBy: .equal,
toItem: brochure2,
attribute: .top,
multiplier: 1,
constant: 10))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure2,
attribute: .trailing,
relatedBy: .equal,
toItem: viewBrochures,
attribute: .trailingMargin,
multiplier: 1,
constant: 0))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure2,
attribute: .leading,
relatedBy: .equal,
toItem: viewBrochures,
attribute: .leadingMargin,
multiplier: 1,
constant: 0))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure2,
attribute: .top,
relatedBy: .equal,
toItem: brochure1,
attribute: .bottom,
multiplier: 1,
constant: 10))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure2,
attribute: .bottom,
relatedBy: .equal,
toItem: brochure3,
attribute: .top,
multiplier: 1,
constant: 10))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure3,
attribute: .trailing,
relatedBy: .equal,
toItem: viewBrochures,
attribute: .trailingMargin,
multiplier: 1,
constant: 0))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure3,
attribute: .leading,
relatedBy: .equal,
toItem: viewBrochures,
attribute: .leadingMargin,
multiplier: 1,
constant: 0))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure3,
attribute: .top,
relatedBy: .equal,
toItem: brochure2,
attribute: .bottom,
multiplier: 1,
constant: 10))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure3,
attribute: .bottom,
relatedBy: .equal,
toItem: brochure4,
attribute: .top,
multiplier: 1,
constant: 10))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure4,
attribute: .trailing,
relatedBy: .equal,
toItem: viewBrochures,
attribute: .trailingMargin,
multiplier: 1,
constant: 0))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure4,
attribute: .leading,
relatedBy: .equal,
toItem: viewBrochures,
attribute: .leadingMargin,
multiplier: 1,
constant: 0))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure4,
attribute: .top,
relatedBy: .equal,
toItem: brochure3,
attribute: .bottom,
multiplier: 1,
constant: 10))
viewBrochures.addConstraint(NSLayoutConstraint(item: brochure4,
attribute: .bottomMargin,
relatedBy: .greaterThanOrEqual,
toItem: viewBrochures,
attribute: .bottom,
multiplier: 1,
constant: 10))
}
还有:
override func viewDidLayoutSubviews() {
scrlMain.contentSize = viewBrochures.bounds.size
}
请注意，我已经在情节提要中设置了UIScrollView和容器视图(viewBrochures)，我只需要向容器中添加图像，然后就可以垂直滚动它们，因为它们不适合屏幕.在scrollview的容器视图中，我已经有两个其他视图需要位于这些新图像上方(图像必须位于这两个视图下方，并且所有这些视图(2个视图+图像)必须在scrollview中一起滚动).这两个其他视图已经添加到情节提要中，没有任何问题.如您所见，我已经创建了图像并以编程方式向其添加了约束.我为每个图像添加了4个约束，一个约束用于前导，一个约束在尾部，一个约束在顶部，一个约束在底部.我已使用bigThanOrEqual约束将最上面的图像约束到视图正上方的底部，并将我最底部的图像约束到容器视图的底部.我还在SO的某处看到，在将代码添加到代码中的滚动视图时，需要在图像上添加"translatesAutoresizingMaskIntoConstraints = false"，但是我不确定它到底是做什么的，以及是否需要它.
Note that I have setup my UIScrollView and my container view (viewBrochures) in the storyboard already, I just need to add images to the container, and then be able to scroll them vertically, because they don't fit into the screen. In the scrollview's container view, I already have 2 other views that need to be above these new images (images need to be below the 2 views, and all of them together (2 views + images) need to scroll together in the scrollview). These other 2 views have already been added in the storyboard without issues. As you can see I've created the images and added constraints to them programmatically. I've added 4 constraints for each image, one for leading, one for trailing, one for top, and one for bottom. The top most image I have constrained to the bottom of the view directly above, and the bottom most image I have constrained to the bottom of the container view using a greaterThanOrEqual constraint. I have also seen somewhere on SO that adding "translatesAutoresizingMaskIntoConstraints = false" to an image is needed when adding images to a scrollview in code, but I'm not sure exactly what it does and if it is needed.
因此，此代码可用于添加图像，但是问题是，滚动视图根本不会滚动.我不确定这是否是正确的方法，请随时为我提供其他选择.如您所见，我使用了自动布局和布局约束.如果您看到我的实施方式有什么问题，请多多指教和/或更正.
So this code works for adding the images, but the problem is the scrollview won't scroll, at all. I am not sure if this is the correct way of doing this, so feel free to suggest me any other options. As you can see I used autolayout and layout constraints. If you can see if there is anything wrong with my implementation of it, any advise and/or correction would be appreciated.
推荐答案
您的方法存在两个主要问题:
There are two main issues with your approach:
- 使用自动版式时，不应手动设置任何框架. AutoLayout会为您做到这一点，并且在您干扰时不喜欢它.
- 使用UIScrollViews和AutoLayout时，不应设置UIScrollView的
contentSize.只要正确设置了约束，UIScrollView就会自动调整其contentSize并滚动其内容.
- When working with AutoLayout you should not set any frames manually. AutoLayout does that for you and does not like it when you interfere.
- When working with UIScrollViews and AutoLayout you should not set the UIScrollView's
contentSize. As long as your constraints are set correctly the UIScrollView will automatically adjust itscontentSizeand scroll its content.
此外，您实际上并不需要viewBrochures容器视图(除非它除了作为图像的容器外，不执行其他任何操作).您只需将上面的2个视图和所有图像添加为UIScrollView的直接子视图即可.
Also you do not really need the viewBrochures container view (unless it does anything except being a container for the images). You can simply add your 2 above views and all the images as direct subviews of your UIScrollView.
要使滚动视图正常工作，您必须执行以下操作:
To make your scroll view work you have to do the following:
- 最顶部的子视图必须具有UIScrollView的顶部约束
- 所有其他子视图必须具有顶部约束，且其上方的子视图具有底部约束
- 最底部的子视图必须具有UIScrollView的底部约束
还必须注意，子视图不会比滚动视图宽(否则滚动视图也会突然水平滚动).为此，您必须在一个等于滚动视图宽度的子视图上设置一个width约束.
You also have to take care that the subviews do not become wider that your scrollview (or the scrollview will suddenly also scroll horizontally). To do that you have to set a width constraint on one of the subviews that is equal to the scrollview's width.
如果您仍然无法使用它，请查看以下博客文章我前段时间写的文章中描述了与您相似的情况.
If you still have difficulties making it work have a look at this blogpost I wrote some time ago where I describe a similar scenario than yours.
我还创建了要点，并提供了一个有效示例.
I also created this gist with a working example.
这篇关于以编程方式将视图添加到UIScrollView的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
