StackView 对齐问题

Posted 2023-02-27

【中文标题】StackView 对齐问题

【英文标题】：issue with StackView Alignment

【发布时间】：2015-11-22 07:40:44

【问题描述】：

我想用不同的对齐方式对齐 3 个堆栈

1-Image 0-0 两边如下图

2- 用户信息 + 文本 10-10 形成两边

当我将它们堆叠在一起时的问题我只能将它们全部设置为 0 到所有边距，每个堆栈没有堆栈。

在我的项目中，所有内容都停留在图像的左侧，我希望用户+文本堆栈中的空间来自两个边距！ 如何解决这个问题，如下图所示？

【参考方案1】：

因为我真的很喜欢UIStackViews，所以我用你的问题作为实验的理由。您可以将以下内容粘贴到 Xcode 7 Playground 中：

import UIKit
import XCPlayground

let hostView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 480))
hostView.backgroundColor = .whiteColor()
XCPlaygroundPage.currentPage.liveView = hostView

let headerLabel = UILabel()
headerLabel.translatesAutoresizingMaskIntoConstraints = false
headerLabel.numberOfLines = 0
headerLabel.text = "This is an info text shown on top of the image. The info text should inform the reader about the topic."

let topStackView = UIStackView(arrangedSubviews: [headerLabel])

let image = UIImage(named: "header.jpg")
let imageView = UIImageView(image: image)
imageView.backgroundColor = .yellowColor()
imageView.contentMode = .ScaleAspectFit

let bottomLabel = UILabel()
bottomLabel.translatesAutoresizingMaskIntoConstraints = false
bottomLabel.numberOfLines = 0
bottomLabel.text = "This is the story text. It is interessting and shows a lot insight to the topic. The reader should be eager to read it and at the end he/she would be able to share with friends and family."

let bottomStackView = UIStackView(arrangedSubviews: [bottomLabel])

let stackView = UIStackView(arrangedSubviews: [topStackView, imageView, bottomStackView])
stackView.translatesAutoresizingMaskIntoConstraints = false
stackView.axis = .Vertical
stackView.spacing = 10

hostView.addSubview(stackView)

let views = ["stackView": stackView]
var layoutConstraints: [NSLayoutConstraint] = []
layoutConstraints += NSLayoutConstraint.constraintsWithVisualFormat("|[stackView]|", options: [], metrics: nil, views: views)
layoutConstraints += NSLayoutConstraint.constraintsWithVisualFormat("V:|[stackView]", options: [], metrics: nil, views: views)
layoutConstraints.append(headerLabel.leadingAnchor.constraintEqualToAnchor(topStackView.leadingAnchor, constant: 10))
layoutConstraints.append(headerLabel.trailingAnchor.constraintEqualToAnchor(topStackView.trailingAnchor, constant: 10))

let imageSize = image!.size
let imageHeight = hostView.frame.size.width * imageSize.height / imageSize.width
layoutConstraints.append(imageView.heightAnchor.constraintEqualToConstant(imageHeight))

layoutConstraints.append(bottomLabel.leadingAnchor.constraintEqualToAnchor(bottomStackView.leadingAnchor, constant: 10))
layoutConstraints.append(bottomLabel.trailingAnchor.constraintEqualToAnchor(bottomStackView.trailingAnchor, constant: 10))

NSLayoutConstraint.activateConstraints(layoutConstraints)

或者您可以查看我的UIStackViewPlayground 的故事视图页面。

【讨论】：

谢谢，但这对我来说有点提前我主要在故事板中做，你认为可以使用故事板吗？我在属性检查器中使用了对齐，但它不起作用

诀窍是使用三个堆栈视图。打开顶部的标签，打开图像下方的标签和主堆栈视图。然后将尾随和前导约束添加到相对于相应堆栈视图的顶部和底部标签。

所以如果我不把它们堆在一起就不会坏了对吧？

主堆栈视图的排列视图是顶部堆栈视图、图像视图和底部堆栈视图。堆栈视图的强大之处在于能够将堆栈视图放入堆栈视图。您应该观看介绍堆栈视图的 WWDC 演讲。

谢谢兄弟，它单独工作非常好，只有 3 个堆栈我希望它以后不会坏:)