以编程方式在 UIScrollView 中使用 UIStackView
Posted
技术标签:
【中文标题】以编程方式在 UIScrollView 中使用 UIStackView【英文标题】：Programmatically use UIStackView in UIScrollView 【发布时间】：2019-06-16 21:12:26 【问题描述】：我正在尝试创建这个用户界面：
使用此代码：
extension String
func style(_ attributes: [NSAttributedString.Key: Any]) -> NSAttributedString
return NSAttributedString(string: self, attributes: attributes)
class ViewController: UIViewController
private weak var newContainer: UIView?
private weak var newScrollContainer: UIScrollView?
private weak var newInputContainer: UIStackView?
private func addNewContainer()
let container = UIView()
container.translatesAutoresizingMaskIntoConstraints = false
newContainer = container
view.addSubview(container)
container.topAnchor.constraint(
equalTo: view.safeAreaLayoutGuide.topAnchor,
constant: 0).isActive = true
container.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10).isActive = true
container.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10).isActive = true
container.heightAnchor.constraint(equalToConstant: 368).isActive = true
private func configureNewContainer()
newContainer?.backgroundColor = UIColor(red: 188/255, green: 188/255, blue: 188/255, alpha: 1)
newContainer?.layer.borderColor = UIColor.black.cgColor
newContainer?.layer.borderWidth = 1
newContainer?.layer.cornerRadius = 6
newContainer?.layer.maskedCorners = [
.layerMaxXMaxYCorner,
.layerMaxXMinYCorner,
.layerMinXMaxYCorner,
.layerMinXMinYCorner]
private func addNewScrollContainer()
guard let container = newContainer else return
let scroll = UIScrollView()
scroll.translatesAutoresizingMaskIntoConstraints = false
self.newScrollContainer = scroll
newContainer?.addSubview(scroll)
scroll.topAnchor.constraint(equalTo: container.topAnchor, constant: 75).isActive = true
scroll.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 28).isActive = true
scroll.trailingAnchor.constraint(
equalTo: container.trailingAnchor,
constant: 18).isActive = true
scroll.bottomAnchor.constraint(equalTo: container.bottomAnchor, constant: 36).isActive = true
private func addStack()
let stack = UIStackView()
stack.translatesAutoresizingMaskIntoConstraints = false
stack.axis = .vertical
stack.spacing = UIStackView.spacingUseSystem
stack.distribution = .fillProportionally
self.newInputContainer = stack
newScrollContainer?.addSubview(stack)
newScrollContainer?.topAnchor.constraint(equalTo: stack.topAnchor, constant: 0).isActive = true
newScrollContainer?.leadingAnchor.constraint(equalTo: stack.leadingAnchor, constant: 0).isActive = true
newScrollContainer?.trailingAnchor.constraint(equalTo: stack.trailingAnchor, constant:0).isActive = true
newScrollContainer?.bottomAnchor.constraint(equalTo: stack.bottomAnchor, constant: 0).isActive = true
private func addStackControls()
guard let container = newInputContainer else return
let red: [NSAttributedString.Key: Any] = [.foregroundColor: UIColor.red]
let dest = UITextField()
dest.attributedPlaceholder = "destination".style(red)
let cost = UITextField()
cost.attributedPlaceholder = "cost".style(red)
let pets = UITextField()
pets.attributedPlaceholder = "pets".style(red)
let people = UITextField()
people.attributedPlaceholder = "people".style(red)
let horizDivider = UIView()
horizDivider.backgroundColor = UIColor.black
horizDivider.heightAnchor.constraint(equalToConstant: 1).isActive = true
let width = container.frame.size.width*0.85
horizDivider.widthAnchor.constraint(equalToConstant: width).isActive = true
let origin = UITextField()
origin.attributedPlaceholder = "origin".style(red)
let departure = UITextField()
departure.attributedPlaceholder = "departure".style(red)
let note = UITextField()
note.attributedPlaceholder = "note".style(red)
let help = UIButton()
help.heightAnchor.constraint(equalToConstant: 26).isActive = true
help.widthAnchor.constraint(equalToConstant: 26).isActive = true
help.layer.cornerRadius = 13
help.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
help.backgroundColor = UIColor.gray
help.layer.borderColor = UIColor.darkGray.cgColor
help.layer.borderWidth = 1
help.setAttributedTitle("?".style([.foregroundColor: UIColor.white]), for: .normal)
let vertDivider = UIView()
vertDivider.backgroundColor = UIColor.gray
vertDivider.widthAnchor.constraint(equalToConstant: 1).isActive = true
vertDivider.heightAnchor.constraint(equalToConstant: 25).isActive = true
let save = UIButton()
save.heightAnchor.constraint(equalToConstant: 35).isActive = true
save.widthAnchor.constraint(equalToConstant: 91).isActive = true
save.layer.cornerRadius = 6
save.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
save.layer.borderWidth = 1
save.layer.borderColor = UIColor.white.cgColor
save.backgroundColor = .clear
let costPetsPeople = UIStackView(arrangedSubviews: [cost, pets, people])
costPetsPeople.spacing = UIStackView.spacingUseSystem
costPetsPeople.distribution = .fillEqually
costPetsPeople.axis = .horizontal
let originDeparture = UIStackView(arrangedSubviews: [origin, departure])
originDeparture.spacing = UIStackView.spacingUseSystem
originDeparture.distribution = .fillEqually
costPetsPeople.axis = .horizontal
let helpDividerSave = UIStackView(arrangedSubviews: [help, vertDivider, save])
helpDividerSave.distribution = .fillProportionally
helpDividerSave.axis = .horizontal
[dest, costPetsPeople, horizDivider, originDeparture, note, helpDividerSave].forEach
newInputContainer?.addArrangedSubview($0)
override func viewDidLoad()
super.viewDidLoad()
addNewContainer()
configureNewContainer()
addNewScrollContainer()
addStack()
addStackControls()
view.backgroundColor = UIColor(red: 206/255, green: 196/255, blue: 163/255, alpha: 1)
但我明白了：
这是视图层次结构：
感谢您的阅读，希望对您有所帮助:)。
【问题讨论】：
您有冲突，请阅读它们以解决问题 @Sh_Khan - 我只有在将东西添加到堆栈视图时才会有冲突，我认为这应该消除对约束的需求。 【参考方案1】：情侣笔记...
使用 guard 解包对象以避免出现类似以下情况：newContainer?.layer.borderWidth = 1
一次从一个元素开始...如果您看不到“目标”文本字段，您可能也看不到任何其他内容。当您添加每个额外的元素时，很容易看到什么时候被扔掉了。
使用“批量”约束添加，并将它们按逻辑分组。只是更容易阅读和跟踪正在发生的事情。
提供对比背景颜色的视图，以便更轻松地查看帧的去向。
这是你修改后的代码...你仍然需要调整一些东西才能得到你想要的东西，但这应该会让你上路（很多 cmets 可以帮助你了解我做了什么）：
extension String
func style(_ attributes: [NSAttributedString.Key: Any]) -> NSAttributedString
return NSAttributedString(string: self, attributes: attributes)
class PanelViewController: UIViewController
private weak var newContainerView: UIView?
private weak var newScrollView: UIScrollView?
private weak var newInputStackView: UIStackView?
private func addNewContainer()
let container = UIView()
container.translatesAutoresizingMaskIntoConstraints = false
newContainerView = container
view.addSubview(container)
NSLayoutConstraint.activate([
container.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0),
container.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 10),
container.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -10),
container.heightAnchor.constraint(equalToConstant: 368),
])
private func configureNewContainer()
guard let container = newContainerView else return
container.backgroundColor = UIColor(red: 188/255, green: 188/255, blue: 188/255, alpha: 1)
container.layer.borderColor = UIColor.black.cgColor
container.layer.borderWidth = 1
container.layer.cornerRadius = 6
container.layer.maskedCorners = [
.layerMaxXMaxYCorner,
.layerMaxXMinYCorner,
.layerMinXMaxYCorner,
.layerMinXMinYCorner]
private func addNewScrollContainer()
guard let container = newContainerView else return
let scroll = UIScrollView()
scroll.translatesAutoresizingMaskIntoConstraints = false
self.newScrollView = scroll
container.addSubview(scroll)
NSLayoutConstraint.activate([
scroll.topAnchor.constraint(equalTo: container.topAnchor, constant: 75),
scroll.leadingAnchor.constraint(equalTo: container.leadingAnchor, constant: 28),
scroll.trailingAnchor.constraint(equalTo: container.trailingAnchor, constant: -18),
scroll.bottomAnchor.constraint(equalTo: container.bottomAnchor, constant: -36),
])
private func addStack()
let stack = UIStackView()
stack.translatesAutoresizingMaskIntoConstraints = false
stack.axis = .vertical
stack.spacing = UIStackView.spacingUseSystem
stack.distribution = .fill
self.newInputStackView = stack
guard let nsc = newScrollView else return
nsc.addSubview(stack)
NSLayoutConstraint.activate([
stack.topAnchor.constraint(equalTo: nsc.topAnchor, constant: 0.0),
stack.leadingAnchor.constraint(equalTo: nsc.leadingAnchor, constant: 0.0),
stack.trailingAnchor.constraint(equalTo: nsc.trailingAnchor, constant: 0.0),
stack.bottomAnchor.constraint(equalTo: nsc.bottomAnchor, constant: 0.0),
])
private func addStackControls()
// unwrap here to avoid the need for "?"
guard let inputStackView = newInputStackView,
let theScrollView = newScrollView
else return
let red: [NSAttributedString.Key: Any] = [.foregroundColor: UIColor.red]
let dest = UITextField()
dest.attributedPlaceholder = "destination".style(red)
let cost = UITextField()
cost.attributedPlaceholder = "cost".style(red)
let pets = UITextField()
pets.attributedPlaceholder = "pets".style(red)
let people = UITextField()
people.attributedPlaceholder = "people".style(red)
let horizDivider = UIView()
horizDivider.backgroundColor = UIColor.black
// to get the horizDivider centered we need to embed it
// in a "containing" view
let horizDividerContainingView = UIView()
horizDividerContainingView.addSubview(horizDivider)
let origin = UITextField()
origin.attributedPlaceholder = "origin".style(red)
let departure = UITextField()
departure.attributedPlaceholder = "departure".style(red)
let note = UITextField()
note.attributedPlaceholder = "note".style(red)
let help = UIButton()
help.layer.cornerRadius = 13
help.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
help.backgroundColor = UIColor.gray
help.layer.borderColor = UIColor.darkGray.cgColor
help.layer.borderWidth = 1
help.setAttributedTitle("?".style([.foregroundColor: UIColor.white]), for: .normal)
let vertDivider = UIView()
vertDivider.backgroundColor = UIColor.gray
let save = UIButton()
save.layer.cornerRadius = 6
save.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
save.layer.borderWidth = 1
save.layer.borderColor = UIColor.white.cgColor
save.backgroundColor = .clear
save.setTitle("save", for: .normal)
// horizontal stack view for cost / pets / people fields
let costPetsPeople = UIStackView(arrangedSubviews: [cost, pets, people])
costPetsPeople.spacing = UIStackView.spacingUseSystem
costPetsPeople.distribution = .fillEqually
costPetsPeople.axis = .horizontal
// horizontal stack view for origin / departure fields
let originDeparture = UIStackView(arrangedSubviews: [origin, departure])
originDeparture.spacing = UIStackView.spacingUseSystem
originDeparture.distribution = .fillEqually
costPetsPeople.axis = .horizontal
// horizontal stack view for help / save buttons fields
let helpDividerSave = UIStackView(arrangedSubviews: [help, vertDivider, save])
helpDividerSave.spacing = UIStackView.spacingUseSystem
helpDividerSave.distribution = .fill
helpDividerSave.axis = .horizontal
// to get the buttons stack view "right-aligned" we need to embed it
// in a "containing" view
let helpDividerSaveContainingView = UIView()
helpDividerSaveContainingView.addSubview(helpDividerSave)
// add elements to the vertical "input" stack view
[dest, costPetsPeople, horizDividerContainingView, originDeparture, note, helpDividerSaveContainingView].forEach
inputStackView.addArrangedSubview($0)
// make sure everything has translatesAutoresizingMaskIntoConstraints = false
[dest, cost, pets, people, horizDivider, horizDividerContainingView,
origin, departure, note, help, vertDivider, save,
costPetsPeople, originDeparture, helpDividerSave, helpDividerSaveContainingView,
].forEach
$0.translatesAutoresizingMaskIntoConstraints = false
// set all the textField backgrounds to white
[dest, cost, pets, people, origin, departure, note].forEach
$0.backgroundColor = .white
// setup all the elements' constraints here
NSLayoutConstraint.activate([
// we want the vertical "input" stack view to take up the full width
// of the scroll view
inputStackView.widthAnchor.constraint(equalTo: theScrollView.widthAnchor, constant: 0.0),
// horizontal divider 1-pt height, 85% width, centered in its containing view
horizDivider.heightAnchor.constraint(equalToConstant: 1),
horizDivider.widthAnchor.constraint(equalTo: horizDividerContainingView.widthAnchor, multiplier: 0.85),
horizDivider.centerXAnchor.constraint(equalTo: horizDividerContainingView.centerXAnchor, constant: 0.0),
// help button 26 x 26 pts
help.heightAnchor.constraint(equalToConstant: 26),
help.widthAnchor.constraint(equalToConstant: 26),
// save button 91-pts wide
save.widthAnchor.constraint(equalToConstant: 91),
// vertical divider 1-pt width
vertDivider.widthAnchor.constraint(equalToConstant: 1),
// buttons stack view constrained "right-aligned" to its containing view
helpDividerSave.topAnchor.constraint(equalTo: helpDividerSaveContainingView.topAnchor, constant: 0.0),
helpDividerSave.trailingAnchor.constraint(equalTo: helpDividerSaveContainingView.trailingAnchor, constant: 0.0),
helpDividerSave.bottomAnchor.constraint(equalTo: helpDividerSaveContainingView.bottomAnchor, constant: 0.0),
])
override func viewDidLoad()
super.viewDidLoad()
addNewContainer()
configureNewContainer()
addNewScrollContainer()
addStack()
addStackControls()
view.backgroundColor = UIColor(red: 206/255, green: 196/255, blue: 163/255, alpha: 1)
结果：
【讨论】：
以上是关于以编程方式在 UIScrollView 中使用 UIStackView的主要内容，如果未能解决你的问题，请参考以下文章
以编程方式在 UIScrollView 中使用 UIStackView
如何以编程方式设置 UIScrollView 以使用 autoLayout 水平滚动
如何以编程方式在 UIScrollview 中创建 UIScrollview