添加UILabel进行查看时,UIScrollView无法正常工作

问题描述 投票:0回答:1

我正在以编程方式创建我的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)
}
ios swift uiscrollview constraints
1个回答
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),

            ])

    }

}
© www.soinside.com 2019 - 2024. All rights reserved.