居中堆栈视图元素而不填充它们
Center stack view elements and not fill them
我正在使用 UIStackView
作为 UITableView's
BackGroundView
属性 所以当获取填充 tableView 的集合时出错时我可以调用一个显示的函数此堆栈视图包含显示警告消息和重试按钮的视图。
我测试了在空 UIViewController
中执行类似的行为,这样我就可以将 stackView
及其子项居中。当我将堆栈视图固定到 superView 的尾部和前导,将其垂直居中并将其顶部锚点设置为大于或等于 superView 的顶部锚点时,该解决方案起作用,同样它的底部锚点大于或等于 superView 的底部锚点。我还将对齐设置为居中,将分布设置为填充,一切似乎都正常工作。
以下是部分截图:
我在 UITableView 的扩展中使用了这段代码,但只能重现这种行为。此代码有任何错误吗?
func show(error: Bool, withMessage message : String? = nil, andRetryAction retry: (() -> Void)? = nil){
if error{
let iconLabel = UILabel()
iconLabel.GMDIcon = .gmdErrorOutline
iconLabel.textAlignment = .center
iconLabel.numberOfLines = 0
iconLabel.font = iconLabel.font.withSize(50)
iconLabel.textColor = Constants.Colors.ErrorColor
iconLabel.backgroundColor = .blue
let messageLabel = UILabel()
messageLabel.text = message ?? "Ocorreu um erro"
messageLabel.textColor = Constants.Colors.ErrorColor
messageLabel.numberOfLines = 0
messageLabel.textAlignment = .center
messageLabel.font = UIFont(name: "TrebuchetMS", size: 20)
messageLabel.backgroundColor = .green
var views: [UIView] = [iconLabel, messageLabel]
if let retry = retry{
let button = RaisedButton(title: "Tentar novamente")
button.pulseColor = Constants.Colors.PrimaryTextColor
button.backgroundColor = Constants.Colors.PrimaryColor
button.titleColor = .white
button.actionHandle(controlEvents: .touchUpInside, ForAction: retry)
button.contentEdgeInsets = UIEdgeInsetsMake(10,10,10,10)
views.append(button)
}
}else{
self.backgroundView = nil
}
}
let stack = UIStackView()
stack.spacing = 10
stack.axis = .vertical
stack.alignment = .center
stack.distribution = .fill
stack.translatesAutoresizingMaskIntoConstraints = false
for view in views{
view.translatesAutoresizingMaskIntoConstraints = false
stack.addArrangedSubview(view)
}
if self.tableFooterView == nil{
tableFooterView = UIView()
}
self.backgroundView = stack;
if #available(iOS 11, *) {
let guide = self.safeAreaLayoutGuide
stack.topAnchor.constraint(greaterThanOrEqualTo: guide.topAnchor).isActive = true
stack.bottomAnchor.constraint(greaterThanOrEqualTo: guide.bottomAnchor).isActive = true
stack.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
stack.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
stack.centerYAnchor.constraint(equalTo: guide.centerYAnchor).isActive = true
} else {
stack.topAnchor.constraint(greaterThanOrEqualTo: self.topAnchor).isActive = true
stack.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor).isActive = true
stack.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
stack.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
stack.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
}
如果堆栈视图的元素都具有固有大小(即它们各自高度的总和 + 项间间距),则堆栈视图知道它的高度。在这种情况下,因为你有 2 y 位置约束,你暗示高度,所以你的约束是不可满足的。您唯一需要的 y 轴约束是垂直居中。摆脱顶部和底部的约束。然后系统将使用固有大小来计算堆栈视图的高度并将其在背景视图中垂直居中。保持 x 轴约束不变。
我正在使用 UIStackView
作为 UITableView's
BackGroundView
属性 所以当获取填充 tableView 的集合时出错时我可以调用一个显示的函数此堆栈视图包含显示警告消息和重试按钮的视图。
我测试了在空 UIViewController
中执行类似的行为,这样我就可以将 stackView
及其子项居中。当我将堆栈视图固定到 superView 的尾部和前导,将其垂直居中并将其顶部锚点设置为大于或等于 superView 的顶部锚点时,该解决方案起作用,同样它的底部锚点大于或等于 superView 的底部锚点。我还将对齐设置为居中,将分布设置为填充,一切似乎都正常工作。
以下是部分截图:
我在 UITableView 的扩展中使用了这段代码,但只能重现这种行为。此代码有任何错误吗?
func show(error: Bool, withMessage message : String? = nil, andRetryAction retry: (() -> Void)? = nil){
if error{
let iconLabel = UILabel()
iconLabel.GMDIcon = .gmdErrorOutline
iconLabel.textAlignment = .center
iconLabel.numberOfLines = 0
iconLabel.font = iconLabel.font.withSize(50)
iconLabel.textColor = Constants.Colors.ErrorColor
iconLabel.backgroundColor = .blue
let messageLabel = UILabel()
messageLabel.text = message ?? "Ocorreu um erro"
messageLabel.textColor = Constants.Colors.ErrorColor
messageLabel.numberOfLines = 0
messageLabel.textAlignment = .center
messageLabel.font = UIFont(name: "TrebuchetMS", size: 20)
messageLabel.backgroundColor = .green
var views: [UIView] = [iconLabel, messageLabel]
if let retry = retry{
let button = RaisedButton(title: "Tentar novamente")
button.pulseColor = Constants.Colors.PrimaryTextColor
button.backgroundColor = Constants.Colors.PrimaryColor
button.titleColor = .white
button.actionHandle(controlEvents: .touchUpInside, ForAction: retry)
button.contentEdgeInsets = UIEdgeInsetsMake(10,10,10,10)
views.append(button)
}
}else{
self.backgroundView = nil
}
}
let stack = UIStackView()
stack.spacing = 10
stack.axis = .vertical
stack.alignment = .center
stack.distribution = .fill
stack.translatesAutoresizingMaskIntoConstraints = false
for view in views{
view.translatesAutoresizingMaskIntoConstraints = false
stack.addArrangedSubview(view)
}
if self.tableFooterView == nil{
tableFooterView = UIView()
}
self.backgroundView = stack;
if #available(iOS 11, *) {
let guide = self.safeAreaLayoutGuide
stack.topAnchor.constraint(greaterThanOrEqualTo: guide.topAnchor).isActive = true
stack.bottomAnchor.constraint(greaterThanOrEqualTo: guide.bottomAnchor).isActive = true
stack.leadingAnchor.constraint(equalTo: guide.leadingAnchor).isActive = true
stack.trailingAnchor.constraint(equalTo: guide.trailingAnchor).isActive = true
stack.centerYAnchor.constraint(equalTo: guide.centerYAnchor).isActive = true
} else {
stack.topAnchor.constraint(greaterThanOrEqualTo: self.topAnchor).isActive = true
stack.bottomAnchor.constraint(greaterThanOrEqualTo: self.bottomAnchor).isActive = true
stack.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
stack.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
stack.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true
}
如果堆栈视图的元素都具有固有大小(即它们各自高度的总和 + 项间间距),则堆栈视图知道它的高度。在这种情况下,因为你有 2 y 位置约束,你暗示高度,所以你的约束是不可满足的。您唯一需要的 y 轴约束是垂直居中。摆脱顶部和底部的约束。然后系统将使用固有大小来计算堆栈视图的高度并将其在背景视图中垂直居中。保持 x 轴约束不变。