我正在以编程方式创建我的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
。使用自动布局和约束,让系统为您进行计算。
其次,确保从上到下有一个完整的“链条”约束。您的顶部元素(标签)需要约束到滚动视图的顶部,并且底部元素(标签)需要约束到滚动视图的底部。所有其他垂直约束应该来自其上方元素的底部。
第三,我强烈建议不要使用任何类型的“约束方便”功能/扩展(例如你正在使用的.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上没有足够的内容可以滚动。这应该做到这一点。如果它仍然不在“X”上滚动,则在iPhone 7(模拟器或设备)上运行它。有很多评论解释约束设置。
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
$0.translatesAutoresizingMaskIntoConstraints = false
// set background colors so we can see the frames of the elements
$0.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),
])
}
}