根据内容调整uiscrollview的大小

时间:2017-09-14 13:31:38

标签: ios swift uiscrollview pure-layout

我在调整大小时遇到​​了一些问题,并且在将内容添加到我的标签时使滚动视图可以垂直滚动。我的层次结构如下所示:

my hierarchy

虽然我的观点如下:

my view

因此,当我从API调用中获取文本时,我想在开始时填写代码中包含内容的标签。但是出于测试目的,我刚刚修改了一些lorem ipsum文本以使其工作。所以我的内容被添加到标签和UILabels调整大小,以及我的视图,包含标签调整大小。我在调整滚动视图内容时遇到问题,因此如果标签中的文字较长,我可以滚动。这是我目前的代码:

import UIKit
import PureLayout

class QuestionAndAnswerViewController: UIViewController {

@IBOutlet var menuButton: UIBarButtonItem!
@IBOutlet var questionView: UIView!
@IBOutlet var questionLabel: UILabel!
@IBOutlet var questionContentLabel: UILabel!
@IBOutlet var answerView: UIView!

@IBOutlet var odgovorLabel: UILabel!
@IBOutlet var answerLabel: UILabel!
@IBOutlet var signLabel: UILabel!

@IBOutlet var lineView: UIView!

@IBOutlet var scrollView: UIScrollView!
@IBOutlet var contentView: UIView!

var yPosition: CGFloat = 0.0
var contentSize: CGFloat = 0.0
var attrText = NSMutableAttributedString()

override func viewDidLoad() {
    super.viewDidLoad()

    scrollView.setNeedsLayout()
    scrollView.layoutIfNeeded()
    scrollView.translatesAutoresizingMaskIntoConstraints = false


    let paragraphStyle = NSMutableParagraphStyle()
    paragraphStyle.lineSpacing = 5
    paragraphStyle.alignment = .justified

    let paragraphStyle2 = NSMutableParagraphStyle()
    paragraphStyle2.lineSpacing = 5
    paragraphStyle2.alignment = .left


    if self.revealViewController() != nil {
        self.revealViewController().frontViewShadowRadius = 5.0
        self.revealViewController().frontViewShadowOpacity = 0.25
        menuButton.target = self.revealViewController()
        menuButton.action = #selector(SWRevealViewController.rightRevealToggle(_:))
        self.view.addGestureRecognizer(self.revealViewController().panGestureRecognizer())
    }

    var text = "To je prvo vprašanje? Kako dolgi je lahko ta tekst da se poravna"
    attrText = NSMutableAttributedString(string: text)
    attrText.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle2, range: NSMakeRange(0, attrText.length))
    questionLabel.attributedText = attrText


    text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis mi nisi. Etiam nec augue id dui blandit ornare. Nulla auctor, purus vel tincidunt ultricies, enim turpis molestie augue, nec mattis libero ante mattis mauris. Suspendisse posuere, velit posuere viverra feugiat, nulla justo bibendum nisi, nec ultricies lorem enim in nisl. Nunc sit amet quam mollis, faucibus felis eu, posuere dui. Sed vel mattis neque. Fusce elementum at nisl ut volutpat. Nam placerat consequat mi in lacinia. Morbi ut est tristique, efficitur est a, faucibus erat. Suspendisse et ligula ac lacus porttitor pretium ut vehicula felis."
    attrText = NSMutableAttributedString(string: text)

    attrText.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, attrText.length))
    questionContentLabel.attributedText = attrText


    text = "Cras auctor ullamcorper ullamcorper. Vestibulum dignissim quis risus eget congue. Sed et diam libero. Phasellus non lectus sem. Cras auctor ullamcorper ullamcorper. Vestibulum dignissim quis risus eget congue. Sed et diam libero. Phasellus non lectus sem. Cras auctor ullamcorper ullamcorper. Vestibulum dignissim quis risus eget congue. Sed et diam libero. Phasellus non lectus sem. Cras auctor ullamcorper ullamcorper. Vestibulum dignissim quis risus eget congue. Sed et diam libero. Phasellus non lectus sem."
    attrText = NSMutableAttributedString(string: text)
    attrText.addAttribute(NSParagraphStyleAttributeName, value: paragraphStyle, range: NSMakeRange(0, attrText.length))
    answerLabel.attributedText = attrText

    setupConstraints()

    contentView.frame = CGRect(x: contentView.frame.origin.x, y: contentView.frame.origin.y, width: contentView.frame.width, height: 2000)
    scrollView.contentSize = CGSize(width: contentView.frame.width, height: 2000)

    print(scrollView.contentSize)
}


func setupConstraints() {


    //Question Contstraints
    questionView.autoPinEdge(.top, to: .top, of: contentView, withOffset: 30)
    questionView.autoPinEdge(.left, to: .left, of: contentView, withOffset: 0)
    questionView.autoPinEdge(.right, to: .right, of: contentView, withOffset: 0)

    questionView.autoPinEdge(.top, to: .top, of: questionLabel, withOffset: -10)
    questionLabel.autoPinEdge(.right, to: .right, of: questionView, withOffset: -20)
    questionLabel.autoPinEdge(.left, to: .left, of: questionView, withOffset: 20)

    lineView.autoPinEdge(.top, to: .bottom, of: questionLabel, withOffset: 20)
    lineView.autoPinEdge(.left, to: .left, of: questionView, withOffset: 20)
    lineView.autoPinEdge(.right, to: .right, of: questionView, withOffset: -20)
    lineView.autoSetDimensions(to: CGSize(width: lineView.frame.width, height: 2))

    questionContentLabel.autoPinEdge(.top, to: .bottom, of: lineView, withOffset: 20)
    questionContentLabel.autoPinEdge(.right, to: .right, of: questionView, withOffset: -20)
    questionContentLabel.autoPinEdge(.left, to: .left, of: questionView, withOffset: 20)
    questionView.autoPinEdge(.bottom, to: .bottom, of: questionContentLabel, withOffset: 20)


    //Anwser Constraints
    answerView.autoPinEdge(.top, to: .bottom, of: questionView, withOffset: 10)
    answerView.autoPinEdge(.left, to: .left, of: contentView, withOffset: 0)
    answerView.autoPinEdge(.right, to: .right, of: contentView, withOffset: 0)


    odgovorLabel.autoPinEdge(.top, to: .top, of: answerView, withOffset: 10)
    odgovorLabel.autoPinEdge(.left, to: .left, of: answerView, withOffset: 20)
    odgovorLabel.autoPinEdge(.right, to: .right, of: answerView, withOffset: -20)

    answerLabel.autoPinEdge(.top, to: .bottom, of: odgovorLabel, withOffset: 20)
    answerLabel.autoPinEdge(.left, to: .left, of: answerView, withOffset: 20)
    answerLabel.autoPinEdge(.right, to: .right, of: answerView, withOffset: -20)

    signLabel.autoPinEdge(.top, to: .bottom, of: answerLabel, withOffset: 20)
    signLabel.autoPinEdge(.left, to: .left, of: answerView, withOffset: 20)
    signLabel.autoPinEdge(.right, to: .right, of: answerView, withOffset: -20)

    contentView.autoPinEdge(.bottom, to: .bottom, of: answerView)

    //answerView.autoPinEdge(.bottom, to: .bottom, of: signLabel, withOffset: 20)

}


override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}

@IBAction func backButtonPressed(_ sender: Any) {
    navigationController?.popViewController(animated: true)
}
}

我也使用PureLayout,因为这是我能够根据文字长度制作标签和查看大小的唯一方法。

1 个答案:

答案 0 :(得分:0)

我不确定您在故事板中为scrollViewcontentView设置了哪些约束,我必须说我对为什么直接使用设置帧感到好奇他们在viewDidLayout

contentView.frame = CGRect(x: contentView.frame.origin.x, y: contentView.frame.origin.y, width: contentView.frame.width, height: 2000)
scrollView.contentSize = CGSize(width: contentView.frame.width, height: 2000)

您希望自动计算,对吧?

当我需要可滚动视图时我会做什么:

  1. 我在层次结构中添加scrollView并使用autolayout正确布局它,例如,如果它应该涵盖view的整个viewController

    scrollView.translatesAutoresizingMaskIntoConstraints = false
    
    scrollView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    scrollView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    scrollView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
    scrollView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
    
  2. 然后我需要向contentView添加scrollView并为其提供适当的布局约束,因此如果我想在上面开始的示例中使用垂直滚动scrollView ,我需要遵循自动布局约束:

    contentView.translatesAutoresizingMaskIntoConstraints = false
    
    contentView.leftAnchor.constraint(equalTo: self.view.leftAnchor).isActive = true
    contentView.rightAnchor.constraint(equalTo: self.view.rightAnchor).isActive = true
    contentView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
    contentView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
    

    请注意,我将leftAnchor的{​​{1}}和rightAnchor限制为contentView而不是self.view,以使其具有固定宽度。但是,top和bottom锚点被约束到scrollView,因此当scrollView需要更多空间时,它们会被展开和滚动。

  3. 现在我添加了contentView我想要的所有内容,并使用自动布局将其布局,好像contentView是一个无限高度的视图 - contentView将通过滚动来完整呈现它。所以在我的例子中,如果唯一的内容是一个有很多行的巨大scrollView

    UILabel
  4. 尝试检查你的代码并检查你的约束(我使用Autolayout写了我的约束,但我想你应该能够很容易地将它们翻译成PureLayout和故事板)。