在Swift 3中以编程方式使用ScrollView

我已经search了其他的问题，似乎仍然有一些麻烦创build我的scrollView以自动布局在swift 3.我能够让我的滚动显示如下图所示，但当我滚动到底部我的另一个标签没有显示，“滚动顶部”标签不会消失。

希望有人可以帮助检查我的代码在下面！

import UIKit class ViewController: UIViewController { let labelOne: UILabel = { let label = UILabel() label.text = "Scroll Top" label.backgroundColor = .red label.translatesAutoresizingMaskIntoConstraints = false return label }() let labelTwo: UILabel = { let label = UILabel() label.text = "Scroll Bottom" label.backgroundColor = .green label.translatesAutoresizingMaskIntoConstraints = false return label }() override func viewDidLoad() { super.viewDidLoad() let screensize: CGRect = UIScreen.main.bounds let screenWidth = screensize.width let screenHeight = screensize.height var scrollView: UIScrollView! scrollView = UIScrollView(frame: CGRect(x: 0, y: 120, width: screenWidth, height: screenHeight)) scrollView.contentSize = CGSize(width: screenWidth, height: 2000) scrollView.addSubview(labelOne) scrollView.addSubview(labelTwo) view.addSubview(labelOne) view.addSubview(labelTwo) view.addSubview(scrollView) // Visual Format Constraints view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": labelOne])) view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-100-[v0]", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": labelOne])) // Using iOS 9 Constraints in order to place the label past the iPhone 7 view view.addConstraint(NSLayoutConstraint(item: labelTwo, attribute: .top, relatedBy: .equal, toItem: labelOne, attribute: .bottom, multiplier: 1, constant: screenHeight + 200)) view.addConstraint(NSLayoutConstraint(item: labelTwo, attribute: .right, relatedBy: .equal, toItem: labelOne, attribute: .right, multiplier: 1, constant: 0)) view.addConstraint(NSLayoutConstraint(item: labelTwo, attribute: .left, relatedBy: .equal, toItem: labelOne, attribute: .left, multiplier: 1, constant: 0) } } 

Answer 1

使用约束很容易定义滚动内容的大小 – 所以你不必做任何手动计算。

只要记住：

1. 滚动视图的内容元素必须具有左/顶/宽/高值。 在标签等物体的情况下，它们具有固有尺寸，所以您只需要定义左侧和顶部。
2. 你的滚动视图的内容元素 也定义了可滚动区域的边界 – contentSize – 但是它们是用底部和右边的限制来实现的。
3. 结合这两个概念，你会发现你需要一个“连续链”，至less有一个元素定义了顶部/左边/底部/右边的范围。

下面是一个简单的例子，它将直接在Playground页面中运行：

 import UIKit import PlaygroundSupport class TestViewController : UIViewController { let labelOne: UILabel = { let label = UILabel() label.text = "Scroll Top" label.backgroundColor = .red label.translatesAutoresizingMaskIntoConstraints = false return label }() let labelTwo: UILabel = { let label = UILabel() label.text = "Scroll Bottom" label.backgroundColor = .green label.translatesAutoresizingMaskIntoConstraints = false return label }() let scrollView: UIScrollView = { let v = UIScrollView() v.translatesAutoresizingMaskIntoConstraints = false v.backgroundColor = .cyan return v }() override func viewDidLoad() { super.viewDidLoad() // add the scroll view to self.view self.view.addSubview(scrollView) // constrain the scroll view to 8-pts on each side scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -8.0).isActive = true scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -8.0).isActive = true // add labelOne to the scroll view scrollView.addSubview(labelOne) // "pin" labelOne to left & top with 16-pts padding // this also defines the left & top of the scroll content labelOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 16.0).isActive = true labelOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 16.0).isActive = true // add labelTwo to the scroll view scrollView.addSubview(labelTwo) // pin labelTwo at 400-pts from the left labelTwo.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 400.0).isActive = true // pin labelTwo at 1000-pts from the top labelTwo.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 1000).isActive = true // "pin" labelTwo to right & bottom with 16-pts padding labelTwo.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -16.0).isActive = true labelTwo.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -16.0).isActive = true } } let vc = TestViewController() vc.view.backgroundColor = .yellow PlaygroundPage.current.liveView = vc 

Answer 2

两件事情。

1.添加标签滚动视图，而不是你的看法

你想让你的标签滚动滚动视图，那么你不应该把它添加到你的视图。 在运行你的代码时，你可以滚动，但固定标签被固定在你的视图上，而不是在你的滚动视图上

2.确保你正确地添加了约束

在故事板上尝试一下，对于某个视图，哪种约束组合是足够的。 标签至less需要4个约束条件。

底线

这里是你的代码的修改版本。 为约束我添加填充左边，填充顶部，宽度和高度，它的工作原理。 我的代码是

 let labelOne: UILabel = { let label = UILabel() label.text = "Scroll Top" label.backgroundColor = .red label.translatesAutoresizingMaskIntoConstraints = false return label }() let labelTwo: UILabel = { let label = UILabel() label.text = "Scroll Bottom" label.backgroundColor = .green label.translatesAutoresizingMaskIntoConstraints = false return label }() override func viewDidLoad() { super.viewDidLoad() let screensize: CGRect = UIScreen.main.bounds let screenWidth = screensize.width let screenHeight = screensize.height var scrollView: UIScrollView! scrollView = UIScrollView(frame: CGRect(x: 0, y: 120, width: screenWidth, height: screenHeight)) scrollView.addSubview(labelTwo) NSLayoutConstraint(item: labelTwo, attribute: .leading, relatedBy: .equal, toItem: scrollView, attribute: .leadingMargin, multiplier: 1, constant: 10).isActive = true NSLayoutConstraint(item: labelTwo, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200).isActive = true NSLayoutConstraint(item: labelTwo, attribute: .top, relatedBy: .equal, toItem: scrollView, attribute: .topMargin, multiplier: 1, constant: 10).isActive = true NSLayoutConstraint(item: labelTwo, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 30).isActive = true scrollView.contentSize = CGSize(width: screenWidth, height: 2000) view.addSubview(scrollView) } 

滚动视图看起来像这样

Answer 3

将scrollview图像设置为壁纸

===============================>

@IBOutlet var scroll_view_img：UIScrollView！

 var itemPhotoList = NSMutableArray() var button = NSMutableArray() @IBOutlet var imageview_big: UIImageView! override func viewDidLoad() { super.viewDidLoad() itemPhotoList = ["grief-and-loss copy.jpg","aaa.jpg","image_4.jpeg"] 

// button = [“btn1”，“btn2”]

  let width:CGFloat = 100 let height:CGFloat = 100 var xposition:CGFloat = 10 var scroll_contont:CGFloat = 0 for i in 0 ..< itemPhotoList.count { var button_img = UIButton() button_img = UIButton(frame: CGRect(x: xposition, y: 50, width: width, height: height)) let img = UIImage(named:itemPhotoList[i] as! String) button_img.setImage(img, for: .normal) scroll_view_img.addSubview(button_img) button_img.addTarget(self, action: #selector(buttonAction), for: .touchUpInside) button_img.tag = i view.addSubview(scroll_view_img) xposition += width+10 scroll_contont += width scroll_view_img.contentSize = CGSize(width: scroll_contont, height: height) } } func buttonAction(sender: UIButton!) { switch sender.tag { case 0: imageview_big.image = UIImage(named: "grief-and-loss copy.jpg") case 1: imageview_big.image = UIImage(named: "aaa.jpg") case 2: imageview_big.image = UIImage(named: "image_4.jpeg") default: break } } }