添加 UILabels 以查看时，UIScrollView 无法正常工作
UIScrollView not working properly when adding UILabels to view
我正在以编程方式创建我的 UIScrollView。当我将所有标签和按钮添加到 UIScrollView 时，它不会再滚动，如果它越过视图，我将看不到任何东西。我不熟悉以编程方式创建视图和 UIScrollViews。我省略了一些代码，例如 UILabels，因为它是重复的，它们都与 stepTwo UILabel 匹配。
lazy var scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
view.contentSize.height = 1200
return view
}()
let stepTwo: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 2:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "See Your Doctor", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
override func viewDidLoad(){
super.viewDidLoad()
view.addSubview(scrollView)
setupScrollView()
setupScrollViewLabels()
}
func setupScrollView(){
scrollView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 200, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}
func setupScrollViewLabels(){
scrollView.addSubview(stepOne)
scrollView.addSubview(stepOneDetails)
scrollView.addSubview(reportButton)
scrollView.addSubview(stepTwo)
scrollView.addSubview(stepTwoDetails)
stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stepOne.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
stepOne.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
stepOne.anchor(top: scrollView.topAnchor, left: view.leftAnchor, bottom: scrollView.bottomAnchor, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 0)
stepOneDetails.anchor(top: stepOne.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 10, width: 0, height: 0)
reportButton.anchor(top: stepOneDetails.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 30, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 50)
stepTwo.anchor(top: reportButton.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 25, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 0)
stepTwoDetails.anchor(top: stepTwo.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 10, width: 0, height: 0)
}
首先，不要设置滚动视图的 .contentHeight。使用自动布局和约束，让系统为您计算。
其次，确保您拥有从上到下的完整 "chain" 约束。您的顶部元素（标签）需要被限制在滚动视图的顶部，您的底部元素（标签）需要被限制在滚动视图的底部。所有其他垂直约束应来自其上方元素的底部。
第三，我强烈建议 不要 使用任何类型的 "constraint convenience" 函数/扩展（例如 .anchor(top: left: bottom: ....) 你正在使用）。至少在您完全理解约束的工作原理之前，请使用以下格式：
NSLayoutConstraint.activate([
// stepOne to top + 10 padding and leading/trailing + 20 padding
stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10.0),
stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// and so on...
])
只需要多 一点 输入，更易读，您就会了解每个约束应该做什么。
第四，在处理布局时，我还建议在视图、标签等上设置背景颜色。这样可以更轻松地查看框架和间距。
所以 -- 这是一个使用您发布的代码作为基础的示例。我使元素之间的垂直间距大于您在代码中的间距...在 iPhone X 上没有足够的内容可以滚动。应该这样做。 运行 它在 iPhone 7（模拟器或设备）上，如果它仍然不在 "X" 上滚动。有很多解释约束设置的评论。
class AnotherViewController: UIViewController {
lazy var scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
// don't do this... let auto-layout and constraints handle the scrollable area
// view.contentSize.height = 1200
//so we can see it
view.backgroundColor = .yellow
return view
}()
let stepOne: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 1:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "This is Step 1", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
let stepOneDetails: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 1 Details:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "This is Step 1 Details", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
let stepTwo: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 2:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "See Your Doctor a 2nd time", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
let stepTwoDetails: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 2 Details:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "This is Step 2 Details", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
let reportButton: UIButton = {
let b = UIButton()
b.setTitle("Report Button", for: .normal)
b.backgroundColor = .blue
return b
}()
override func viewDidLoad(){
super.viewDidLoad()
view.addSubview(scrollView)
setupScrollView()
setupScrollViewLabels()
}
func setupScrollView(){
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 200.0),
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0.0),
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0.0),
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0.0),
])
}
func setupScrollViewLabels(){
scrollView.addSubview(stepOne)
scrollView.addSubview(stepOneDetails)
scrollView.addSubview(reportButton)
scrollView.addSubview(stepTwo)
scrollView.addSubview(stepTwoDetails)
// we're using auto-layout
reportButton.translatesAutoresizingMaskIntoConstraints = false
// for each of the labels
[stepOne, stepOneDetails, stepTwo, stepTwoDetails].forEach {
// we're using auto-layout
[=11=].translatesAutoresizingMaskIntoConstraints = false
// set background colors so we can see the frames of the elements
[=11=].backgroundColor = .cyan
}
NSLayoutConstraint.activate([
// stepOne to top + 10 padding and leading/trailing + 20 padding
stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10.0),
stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// stepOneDetails to stepOne + 40 padding and leading/trailing + 20 padding
stepOneDetails.topAnchor.constraint(equalTo: stepOne.bottomAnchor, constant: 40.0),
stepOneDetails.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepOneDetails.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// reportButton to stepOneDetails + 60 padding and leading/trailing + 20 padding
reportButton.topAnchor.constraint(equalTo: stepOneDetails.bottomAnchor, constant: 60.0),
reportButton.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
reportButton.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// reportButton height to 50
reportButton.heightAnchor.constraint(equalToConstant: 50.0),
// stepTwo to reportButton + 50 padding and leading/trailing + 20 padding
stepTwo.topAnchor.constraint(equalTo: reportButton.bottomAnchor, constant: 50.0),
stepTwo.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepTwo.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// stepTwoDetails to stepTwo + 40 padding and leading/trailing + 20 padding
stepTwoDetails.topAnchor.constraint(equalTo: stepTwo.bottomAnchor, constant: 40.0),
stepTwoDetails.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepTwoDetails.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// also must define a width-basis for the scrollable area (the .contentSize),
// so use stepOne label, and make it the width of the scrollView minus 40 (20-pts on each side)
stepOne.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -40.0),
// and we have to constrain the last element to the bottom of the scrollView
// with 10 padding (note: it must be negative)
stepTwoDetails.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -10.0),
])
}
}
我正在以编程方式创建我的 UIScrollView。当我将所有标签和按钮添加到 UIScrollView 时，它不会再滚动，如果它越过视图，我将看不到任何东西。我不熟悉以编程方式创建视图和 UIScrollViews。我省略了一些代码，例如 UILabels，因为它是重复的，它们都与 stepTwo UILabel 匹配。
lazy var scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
view.contentSize.height = 1200
return view
}()
let stepTwo: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 2:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "See Your Doctor", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
override func viewDidLoad(){
super.viewDidLoad()
view.addSubview(scrollView)
setupScrollView()
setupScrollViewLabels()
}
func setupScrollView(){
scrollView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 200, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
}
func setupScrollViewLabels(){
scrollView.addSubview(stepOne)
scrollView.addSubview(stepOneDetails)
scrollView.addSubview(reportButton)
scrollView.addSubview(stepTwo)
scrollView.addSubview(stepTwoDetails)
stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
stepOne.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
stepOne.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
stepOne.anchor(top: scrollView.topAnchor, left: view.leftAnchor, bottom: scrollView.bottomAnchor, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 0)
stepOneDetails.anchor(top: stepOne.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 10, width: 0, height: 0)
reportButton.anchor(top: stepOneDetails.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 30, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 50)
stepTwo.anchor(top: reportButton.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 25, paddingLeft: 20, paddingBottom: 0, paddingRight: 20, width: 0, height: 0)
stepTwoDetails.anchor(top: stepTwo.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 10, paddingLeft: 20, paddingBottom: 0, paddingRight: 10, width: 0, height: 0)
}
首先，不要设置滚动视图的 .contentHeight。使用自动布局和约束，让系统为您计算。
其次，确保您拥有从上到下的完整 "chain" 约束。您的顶部元素（标签）需要被限制在滚动视图的顶部，您的底部元素（标签）需要被限制在滚动视图的底部。所有其他垂直约束应来自其上方元素的底部。
第三，我强烈建议 不要 使用任何类型的 "constraint convenience" 函数/扩展（例如 .anchor(top: left: bottom: ....) 你正在使用）。至少在您完全理解约束的工作原理之前，请使用以下格式：
NSLayoutConstraint.activate([
// stepOne to top + 10 padding and leading/trailing + 20 padding
stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10.0),
stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// and so on...
])
只需要多 一点 输入，更易读，您就会了解每个约束应该做什么。
第四，在处理布局时，我还建议在视图、标签等上设置背景颜色。这样可以更轻松地查看框架和间距。
所以 -- 这是一个使用您发布的代码作为基础的示例。我使元素之间的垂直间距大于您在代码中的间距...在 iPhone X 上没有足够的内容可以滚动。应该这样做。 运行 它在 iPhone 7（模拟器或设备）上，如果它仍然不在 "X" 上滚动。有很多解释约束设置的评论。
class AnotherViewController: UIViewController {
lazy var scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
// don't do this... let auto-layout and constraints handle the scrollable area
// view.contentSize.height = 1200
//so we can see it
view.backgroundColor = .yellow
return view
}()
let stepOne: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 1:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "This is Step 1", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
let stepOneDetails: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 1 Details:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "This is Step 1 Details", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
let stepTwo: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 2:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "See Your Doctor a 2nd time", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
let stepTwoDetails: UILabel = {
let label = UILabel()
let attributedTitle = NSMutableAttributedString(string: "Step 2 Details:\n", attributes: [NSAttributedString.Key.font: UIFont.systemFont(ofSize: 45)])
attributedTitle.append(NSAttributedString(string: "This is Step 2 Details", attributes: [NSAttributedString.Key.font: UIFont.boldSystemFont(ofSize: 20)]))
label.attributedText = attributedTitle
label.numberOfLines = 2
return label
}()
let reportButton: UIButton = {
let b = UIButton()
b.setTitle("Report Button", for: .normal)
b.backgroundColor = .blue
return b
}()
override func viewDidLoad(){
super.viewDidLoad()
view.addSubview(scrollView)
setupScrollView()
setupScrollViewLabels()
}
func setupScrollView(){
NSLayoutConstraint.activate([
scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 200.0),
scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0.0),
scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0.0),
scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0.0),
])
}
func setupScrollViewLabels(){
scrollView.addSubview(stepOne)
scrollView.addSubview(stepOneDetails)
scrollView.addSubview(reportButton)
scrollView.addSubview(stepTwo)
scrollView.addSubview(stepTwoDetails)
// we're using auto-layout
reportButton.translatesAutoresizingMaskIntoConstraints = false
// for each of the labels
[stepOne, stepOneDetails, stepTwo, stepTwoDetails].forEach {
// we're using auto-layout
[=11=].translatesAutoresizingMaskIntoConstraints = false
// set background colors so we can see the frames of the elements
[=11=].backgroundColor = .cyan
}
NSLayoutConstraint.activate([
// stepOne to top + 10 padding and leading/trailing + 20 padding
stepOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 10.0),
stepOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepOne.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// stepOneDetails to stepOne + 40 padding and leading/trailing + 20 padding
stepOneDetails.topAnchor.constraint(equalTo: stepOne.bottomAnchor, constant: 40.0),
stepOneDetails.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepOneDetails.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// reportButton to stepOneDetails + 60 padding and leading/trailing + 20 padding
reportButton.topAnchor.constraint(equalTo: stepOneDetails.bottomAnchor, constant: 60.0),
reportButton.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
reportButton.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// reportButton height to 50
reportButton.heightAnchor.constraint(equalToConstant: 50.0),
// stepTwo to reportButton + 50 padding and leading/trailing + 20 padding
stepTwo.topAnchor.constraint(equalTo: reportButton.bottomAnchor, constant: 50.0),
stepTwo.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepTwo.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// stepTwoDetails to stepTwo + 40 padding and leading/trailing + 20 padding
stepTwoDetails.topAnchor.constraint(equalTo: stepTwo.bottomAnchor, constant: 40.0),
stepTwoDetails.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 20.0),
stepTwoDetails.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor, constant: 20.0),
// also must define a width-basis for the scrollable area (the .contentSize),
// so use stepOne label, and make it the width of the scrollView minus 40 (20-pts on each side)
stepOne.widthAnchor.constraint(equalTo: scrollView.widthAnchor, constant: -40.0),
// and we have to constrain the last element to the bottom of the scrollView
// with 10 padding (note: it must be negative)
stepTwoDetails.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -10.0),
])
}
}