UIStackView对齐过程中实际上在做什么isBaselineRelativeArrangement属性?

问题描述

Apple文档说:

如果是,则从最后一个开始测量视图之间的垂直空间 基于文本的视图的基线,到下面的视图的第一个基线 它。顶视图和底视图的位置也要使其最接近 基线是距堆栈视图边缘的指定距离。 此属性仅由垂直堆栈视图使用。使用对齐 属性以使基线在水平堆栈视图中对齐。

我试图在代码中看到它。我创建了由3个UIView组成的简单stackView。每个UIView中都有一个带有伪文本的UITextView。

    override func viewDidLoad() {
    super.viewDidLoad()
    
    let saveButton = UIView()
    saveButton.backgroundColor = UIColor.green
    saveButton.translatesAutoresizingMaskIntoConstraints = false
    let saveButtonTextView = UITextView(frame: CGRect(0,100,50))
    saveButtonTextView.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
    saveButtonTextView.backgroundColor = UIColor.clear
    saveButton.addSubview(saveButtonTextView)
    
    
    let revertButton = UIView()
    revertButton.backgroundColor = UIColor.yellow
    revertButton.translatesAutoresizingMaskIntoConstraints = false
    let revertButtonTextView = UITextView(frame: CGRect(0,50))
    revertButtonTextView.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
    revertButtonTextView.backgroundColor = UIColor.clear
    revertButton.addSubview(revertButtonTextView)
    
    let cancelButton = UIView()
    cancelButton.backgroundColor = UIColor.red
    cancelButton.translatesAutoresizingMaskIntoConstraints = false
    let cancelButtonRevertView = UITextView(frame: CGRect(0,50))
    cancelButtonRevertView.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"
    cancelButtonRevertView.backgroundColor = UIColor.clear
    cancelButton.addSubview(cancelButtonRevertView)
    
    let views = [saveButton,revertButton,cancelButton]
    
    saveButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
    revertButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
    cancelButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
    
    // give the stack view arranged subviews
    let sv = UIStackView(arrangedSubviews: views)
    // configure the stack view
    sv.axis = .vertical
    sv.alignment = .fill
    sv.distribution = .equalSpacing
    // constrain the stack view
    sv.translatesAutoresizingMaskIntoConstraints = false
    sv.isBaselineRelativeArrangement = true
    self.view.addSubview(sv)
    let marg = self.view.layoutMarginsGuide
    let safe = self.view.safeAreaLayoutGuide
    NSLayoutConstraint.activate([
        sv.topAnchor.constraint(equalTo:safe.topAnchor,constant: 200),sv.leadingAnchor.constraint(equalTo:marg.leadingAnchor,constant: 100),sv.trailingAnchor.constraint(equalTo:marg.trailingAnchor,constant: -100),//sv.bottomAnchor.constraint(equalTo:safe.bottomAnchor,constant: -200),])
}

enter image description here

我试图将isBaselineRelativeArrangement更改为false和true,但似乎没有任何变化。也许我误解了什么?

更新:@matt在下面评论:“您的堆栈视图不够高,无法区分;标签间距为零。” 我试图添加视图,并用UILabel替换UITextView以使行距大于0。 这是代码

  override func viewDidLoad() {
    super.viewDidLoad()
    
    let saveButton = UIView()
    saveButton.backgroundColor = UIColor.green
    saveButton.translatesAutoresizingMaskIntoConstraints = false
    let saveButtonTextView = UITextView(frame: CGRect(0,130))
    saveButtonTextView.text = "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  "
    saveButtonTextView.backgroundColor = UIColor.clear
    saveButton.addSubview(saveButtonTextView)
    
    
    let revertButton = UIView()
    revertButton.backgroundColor = UIColor.yellow
    revertButton.translatesAutoresizingMaskIntoConstraints = false
    let revertButtonTextView = UITextView(frame: CGRect(0,130))
    revertButtonTextView.text = "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. "
    revertButtonTextView.backgroundColor = UIColor.clear
    revertButton.addSubview(revertButtonTextView)
    
    let cancelButton = UIView()
    cancelButton.backgroundColor = UIColor.red
    cancelButton.translatesAutoresizingMaskIntoConstraints = false
    let cancelButtonRevertView = UITextView(frame: CGRect(0,130))
    cancelButtonRevertView.text = "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    cancelButtonRevertView.backgroundColor = UIColor.clear
    cancelButton.addSubview(cancelButtonRevertView)
    
    
    let cancelButton1 = UIView()
    cancelButton1.backgroundColor = UIColor.orange
    cancelButton1.translatesAutoresizingMaskIntoConstraints = false
   let cancelButtonRevertView1 = UILabel(frame: CGRect(0,130))
         
           let textForLabe1 = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,when an unkNown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic types"
           
           let paragraphStyle1 = NSMutableParagraphStyle()
           //line height size
           paragraphStyle1.linespacing = 7
           let attrString1 = NSMutableAttributedString(string: textForLabe1)
           attrString1.addAttribute(NSAttributedString.Key.paragraphStyle,value:paragraphStyle1,range:NSMakeRange(0,attrString1.length))
           attrString1.addAttribute(NSAttributedString.Key.font,value: UIFont.systemFont(ofSize: 12),range: NSMakeRange(0,attrString1.length))
           cancelButtonRevertView1.numberOfLines = 0
           
           cancelButtonRevertView1.attributedText = attrString1
           
    
    cancelButtonRevertView1.backgroundColor = UIColor.clear
    cancelButton1.addSubview(cancelButtonRevertView1)
    
    let cancelButton2 = UIView()
           cancelButton2.backgroundColor = UIColor.cyan
           cancelButton2.translatesAutoresizingMaskIntoConstraints = false
            let cancelButtonRevertView2 = UILabel(frame: CGRect(0,130))
                
                  let textForLabel2 = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,but also the leap into electronic types"
                  
                  let paragraphStyle2 = NSMutableParagraphStyle()
                  //line height size
                  paragraphStyle2.linespacing = 7
                  let attrString2 = NSMutableAttributedString(string: textForLabel2)
                  attrString2.addAttribute(NSAttributedString.Key.paragraphStyle,value:paragraphStyle2,attrString2.length))
                  attrString2.addAttribute(NSAttributedString.Key.font,attrString2.length))
                  cancelButtonRevertView2.numberOfLines = 0
                  
                  cancelButtonRevertView2.attributedText = attrString2
                  
           cancelButtonRevertView2.backgroundColor = UIColor.clear
           cancelButton2.addSubview(cancelButtonRevertView2)
    
    let cancelButton3 = UIView()
    cancelButton3.backgroundColor = UIColor.cyan
    cancelButton3.translatesAutoresizingMaskIntoConstraints = false
    let cancelButtonRevertView3 = UILabel(frame: CGRect(30,130))
  
    let textForLabel = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,but also the leap into electronic types"
    
    let paragraphStyle = NSMutableParagraphStyle()
    //line height size
    paragraphStyle.linespacing = 7
    let attrString = NSMutableAttributedString(string: textForLabel)
    attrString.addAttribute(NSAttributedString.Key.paragraphStyle,value:paragraphStyle,attrString.length))
    attrString.addAttribute(NSAttributedString.Key.font,attrString.length))
    cancelButtonRevertView3.numberOfLines = 0
    
    cancelButtonRevertView3.attributedText = attrString
    
    
    cancelButtonRevertView3.backgroundColor = UIColor.clear
    cancelButton3.addSubview(cancelButtonRevertView3)
    
    let views = [saveButton,cancelButton3,cancelButton,cancelButton1,cancelButton2]
    
    saveButton.heightAnchor.constraint(equalToConstant: 120).isActive = true
    revertButton.heightAnchor.constraint(equalToConstant: 120).isActive = true
    cancelButton.heightAnchor.constraint(equalToConstant: 120).isActive = true
    cancelButton1.heightAnchor.constraint(equalToConstant: 120).isActive = true
    cancelButton2.heightAnchor.constraint(equalToConstant: 120).isActive = true
     cancelButton3.heightAnchor.constraint(equalToConstant: 120).isActive = true
    // give the stack view arranged subviews
    let sv = UIStackView(arrangedSubviews: views)
    // configure the stack view
    sv.axis = .vertical
    //sv.alignment = .fill
    sv.distribution = .equalSpacing
    // constrain the stack view
    sv.translatesAutoresizingMaskIntoConstraints = false
    sv.isBaselineRelativeArrangement = true
    self.view.addSubview(sv)
    let marg = self.view.layoutMarginsGuide
    let safe = self.view.safeAreaLayoutGuide
    NSLayoutConstraint.activate([
        sv.topAnchor.constraint(equalTo:safe.topAnchor,constant: 0),constant: 0)
        //,])
}

enter image description here

我再次切换了此属性,但是似乎没有任何变化:(

更新:@matt在下面评论:您仍然没有做任何实际的间距,因此没有“视图之间的垂直空间”可以讨论。看到了吗?

好吧,我修改代码,以便stackView的子视图之间有垂直空间。

   override func viewDidLoad() {
    [![enter image description here][3]][3] super.viewDidLoad()
    let saveButton = UIView()
    saveButton.backgroundColor = UIColor.green
    saveButton.translatesAutoresizingMaskIntoConstraints = false
    let saveButtonTextView = UITextView(frame: CGRect(0,attrString.length))
    cancelButtonRevertView3.numberOfLines = 0
    
    cancelButtonRevertView3.attributedText = attrString
    
    
    cancelButtonRevertView3.backgroundColor = UIColor.clear
    cancelButton3.addSubview(cancelButtonRevertView3)
    
    let views = [ saveButton,cancelButton2]
    
    saveButton.heightAnchor.constraint(equalToConstant: 120).isActive = true
    cancelButton.heightAnchor.constraint(equalToConstant: 120).isActive = true
    cancelButton1.heightAnchor.constraint(equalToConstant: 120).isActive = true
    cancelButton2.heightAnchor.constraint(equalToConstant: 120).isActive = true
     cancelButton3.heightAnchor.constraint(equalToConstant: 120).isActive = true
    // give the stack view arranged subviews
    let sv = UIStackView(arrangedSubviews: views)
    // configure the stack view
    sv.axis = .vertical
    //sv.alignment = .fill
    sv.distribution = .equalSpacing
    // constrain the stack view
    sv.translatesAutoresizingMaskIntoConstraints = false
    //sv.isBaselineRelativeArrangement = true
    self.view.addSubview(sv)
    let marg = self.view.layoutMarginsGuide
    let safe = self.view.safeAreaLayoutGuide
    NSLayoutConstraint.activate([
        sv.topAnchor.constraint(equalTo:safe.topAnchor,sv.bottomAnchor.constraint(equalTo:safe.bottomAnchor,constant: 0)
    ])

enter image description here

但是,当我将此属性从false切换为true时,仍保持不变。我真的认为我不了解某个关键的想法,但是我不知道这个想法是关于什么的。 ((

解决方法

以下是显示差异的示例:

override func viewDidLoad() {
    super.viewDidLoad()
    let stack = UIStackView()
    stack.axis = .vertical
    stack.alignment = .fill
    stack.distribution = .fill
    stack.isBaselineRelativeArrangement = false
    self.view.addSubview(stack)
    stack.translatesAutoresizingMaskIntoConstraints = false
    stack.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
    stack.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
    stack.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
    stack.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
    
    let s = "thank for looking at the question I changed the code again to meet this requirement and updated the question and posted screenshot of the results,please look at the question thank for looking at the question I changed the code again to meet this requirement and updated the question and posted screenshot of the results,please look at the question"
    let lab1 = UILabel()
    lab1.numberOfLines = 0
    lab1.text = s
    stack.addArrangedSubview(lab1)
    lab1.setContentHuggingPriority(UILayoutPriority(100),for: .vertical)
    
    let lab2 = UILabel()
    lab2.numberOfLines = 0
    lab2.text = "testing\ntesting\ntesting\ntesting\ntesting"
    stack.addArrangedSubview(lab2)
    
    let lab3 = UILabel()
    lab3.numberOfLines = 0
    lab3.text = s
    stack.addArrangedSubview(lab3)
    
    // comment this out for an even more dramatic effect
    stack.setCustomSpacing(30,after: lab2)

}

尝试为stack.isBaselineRelativeArrangement使用不同的值。您会看到第二个和第三个标签之间的间距是不同的。

,

好吧,在这个问题上“打了个头脑”之后,我想我发现了很多变化之一,这些变化显示了UIStackView对齐过程中的isBaselineRelativeArrangement属性。

现在,我尝试不设置对齐方式属性,而是直接设置间距属性。

    let saveButton = UIView()
    saveButton.backgroundColor = UIColor.green
    saveButton.translatesAutoresizingMaskIntoConstraints = false
    let saveButtonTextView = UITextView(frame: CGRect(0,10,100,130))
    saveButtonTextView.text = "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.  "
    saveButtonTextView.backgroundColor = UIColor.clear
    saveButton.addSubview(saveButtonTextView)
    
    
    let revertButton = UIView()
    revertButton.backgroundColor = UIColor.yellow
    revertButton.translatesAutoresizingMaskIntoConstraints = false
    let revertButtonTextView = UITextView(frame: CGRect(15,130))
    revertButtonTextView.text = "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. "
    revertButtonTextView.backgroundColor = UIColor.clear
    revertButton.addSubview(revertButtonTextView)
    
    let cancelButton = UIView()
    cancelButton.backgroundColor = UIColor.red
    cancelButton.translatesAutoresizingMaskIntoConstraints = false
    let cancelButtonRevertView = UITextView(frame: CGRect(0,20,130))
    cancelButtonRevertView.text = "It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    cancelButtonRevertView.backgroundColor = UIColor.clear
    cancelButton.addSubview(cancelButtonRevertView)
    
    
    let cancelButton1 = UIView()
    cancelButton1.backgroundColor = UIColor.orange
    cancelButton1.translatesAutoresizingMaskIntoConstraints = false
    let cancelButtonRevertView1 = UILabel(frame: CGRect(20,130))
    
    let textForLabe1 = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic types"
    
    let paragraphStyle1 = NSMutableParagraphStyle()
    //line height size
    paragraphStyle1.lineSpacing = 7
    let attrString1 = NSMutableAttributedString(string: textForLabe1)
    attrString1.addAttribute(NSAttributedString.Key.paragraphStyle,value:paragraphStyle1,range:NSMakeRange(0,attrString1.length))
    attrString1.addAttribute(NSAttributedString.Key.font,value: UIFont.systemFont(ofSize: 12),range: NSMakeRange(0,attrString1.length))
    cancelButtonRevertView1.numberOfLines = 0
    
    cancelButtonRevertView1.attributedText = attrString1
    
    
    cancelButtonRevertView1.backgroundColor = UIColor.red
    cancelButton1.addSubview(cancelButtonRevertView1)
    
    let cancelButton2 = UIView()
    cancelButton2.backgroundColor = UIColor.cyan
    cancelButton2.translatesAutoresizingMaskIntoConstraints = false
    let cancelButtonRevertView2 = UILabel(frame: CGRect(60,130))
    
    let textForLabel2 = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,but also the leap into electronic types"
    
    let paragraphStyle2 = NSMutableParagraphStyle()
    //line height size
    paragraphStyle2.lineSpacing = 7
    let attrString2 = NSMutableAttributedString(string: textForLabel2)
    attrString2.addAttribute(NSAttributedString.Key.paragraphStyle,value:paragraphStyle2,attrString2.length))
    attrString2.addAttribute(NSAttributedString.Key.font,attrString2.length))
    cancelButtonRevertView2.numberOfLines = 0
    
    cancelButtonRevertView2.attributedText = attrString2
    
    cancelButtonRevertView2.backgroundColor = UIColor.green
    cancelButton2.addSubview(cancelButtonRevertView2)
    
    let cancelButton3 = UIView()
    cancelButton3.backgroundColor = UIColor.cyan
    cancelButton3.translatesAutoresizingMaskIntoConstraints = false
    let cancelButtonRevertView3 = UILabel(frame: CGRect(600,200,130))
    
    let textForLabel = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s,but also the leap into electronic types"
    
    let paragraphStyle = NSMutableParagraphStyle()
    //line height size
    paragraphStyle.lineSpacing = 7
    let attrString = NSMutableAttributedString(string: textForLabel)
    attrString.addAttribute(NSAttributedString.Key.paragraphStyle,value:paragraphStyle,attrString.length))
    attrString.addAttribute(NSAttributedString.Key.font,attrString.length))
    cancelButtonRevertView3.numberOfLines = 0
    
    cancelButtonRevertView3.attributedText = attrString
    
    
    cancelButtonRevertView3.backgroundColor = UIColor.blue
    cancelButton3.addSubview(cancelButtonRevertView3)
    
    let views = [saveButton,cancelButtonRevertView1,cancelButtonRevertView2,cancelButtonRevertView3]
 
    let sv = UIStackView(arrangedSubviews: views)
    sv.axis = .vertical
    sv.spacing = 58.0
    sv.translatesAutoresizingMaskIntoConstraints = false
    sv.isBaselineRelativeArrangement = false
    
    self.view.addSubview(sv)
    let marg = self.view.layoutMarginsGuide
    let safe = self.view.safeAreaLayoutGuide
    NSLayoutConstraint.activate([
        sv.topAnchor.constraint(equalTo:safe.topAnchor,constant: 0),sv.leadingAnchor.constraint(equalTo:marg.leadingAnchor,sv.trailingAnchor.constraint(equalTo:marg.trailingAnchor,sv.bottomAnchor.constraint(equalTo:safe.bottomAnchor,])        

enter image description here

然后!将sv.isBaselineRelativeArrangement更改为等于true。而且这个属性确实开始在stackView布局中显示变化!

enter image description here

太棒了。但是我可能是错的。