问题描述
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),])
}
我试图将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)
//,])
}
我再次切换了此属性,但是似乎没有任何变化:(
更新:@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)
])
但是,当我将此属性从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,])
然后!将sv.isBaselineRelativeArrangement更改为等于true。而且这个属性确实开始在stackView布局中显示变化!
太棒了。但是我可能是错的。