繁体   English   中英

根据内容调整uiscrollview的大小

[英]Resize uiscrollview based on content

将内容添加到标签时,我在调整大小和使scrollview垂直滚动时遇到一些问题。 我的层次结构如下所示:

我的等级制度

虽然我的观点看起来像这样:

我的观点

因此,当我从API调用中获取文字时,我想在代码开始时在代码中填写内容。 但是出于测试目的,我只是对一些lorem ipsum文本进行了硬编码以使其正常工作。 因此,我的内容将添加到标签中,并且UILabel会重新调整大小,而包含标签的视图也会重新调整大小。 我在调整滚动视图内容的大小时遇到​​问题,因此如果标签中的文本较长,则可以滚动。 这也是我当前的代码:

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,因为这是我能够制作标签并根据文本长度调整大小的唯一方法。

我不确定您为scrollViewcontentView设置了哪些约束,我必须说我很好奇为什么在viewDidLayout直接为其使用set框架:

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正确地布局它,例如,如果它应该覆盖viewController的整个view

     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 

    请注意,在这里,我限制了leftAnchorrightAnchor的的contentViewself.view而非scrollView ,使其固定的宽度。 但是,顶部和底部锚点限制在scrollView上,因此当contentView需要更多空间时,它们会展开并滚动。

  3. 现在,我将所有想要的内容添加到contentView ,并使用autolayout对其进行布局,就像contentView是一个具有无限高度的视图一样scrollView将负责通过滚动显示整个内容。 因此,在我的示例中,如果唯一的内容是一个包含许多行的巨大UILabel

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

尝试检查您的代码并检查约束(我使用Autolayout编写了约束,但我想您应该能够轻松地将它们转换为PureLayout和情节提要)。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM