swift - StackViews 中的 StackViews 基于最小项均等填充
问题描述
我正在尝试填充未知但计算出的 stackViews 数量,填充未知但计算出的 UIImageViews 数量,同样,间距相等。
我有一个主要的垂直堆栈视图,其高度和宽度约束为 75。对齐方式:居中;分配:平均填充。
对于每个 subStackView:
newStack.axis = .horizontal
newStack.alignment = .center
newStack.distribution = .fillEqually
newStack.spacing = 1
newStack.sizeToFit()
mainStack.addArrangedSubview(newStack)
然后我有一个不同的循环,它将正确数量的 imageViews 添加到每个 subStackView 中:
let image = UIImageView()
image.contentMode = .scaleAspectFit
image.image = UIImage(systemName: R.Image.System.circle)
subStackView.addArrangedSubview(image)
下面是结果的屏幕截图。看起来所有的 imageView 的大小都相同,但由于某种原因,它们的间距似乎相等,而不是间距为 1。
底部的 3 张图像应该都是五边形,但正如您所见,添加的项目越多,形状就越扭曲。
解决方案
这有点棘手……
我们需要让“点行”(水平堆栈视图)居中,而不是拉伸主堆栈视图的宽度。
我们还需要实际计算点宽而不是使用.fillEqually
,这样我们就不会得到圆点大小。
例如:
- 主栈宽度为 75
- 间距为 1 磅
- 3个水平点
可用宽度是堆栈视图宽度减去“空格”数 x 间距:
75 - 2 = 73
73 / 3 = 24.333333...
在@2x
缩放设备上,3 个视图的实际宽度将是:
24.5 : 24 : 24.5
仅用 3 个“点”就不是很明显,但是当我们找到一个1, 3, 5, 7, 9, 8, 7, 6, 5
模式时它会变得非常明显。
.fillEqually
在左边,计算出的整数点大小在右边:
这是一些示例代码:
class DotsViewController: UIViewController {
let patterns: [[Int]] = [
[3, 3, 3],
[3],
[1, 2, 3],
[1, 3, 5, 4, 3],
[1, 3, 5, 7, 9, 8, 7, 6, 5],
]
let mainStack: UIStackView = {
let v = UIStackView()
v.translatesAutoresizingMaskIntoConstraints = false
v.axis = .vertical
v.alignment = .fill
v.distribution = .equalSpacing
return v
}()
// space between dots
let dotSpacing: CGFloat = 1
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(mainStack)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
// constrain main stack view 20-pts from top / leading / bottom
mainStack.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
mainStack.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
mainStack.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
// width: 75
mainStack.widthAnchor.constraint(equalToConstant: 75.0),
])
patterns.forEach { a in
// create a vertical stack view
// to hold the "rows" of horizontal stack views (containing the dots)
let vBlockStack = UIStackView()
vBlockStack.axis = .vertical
vBlockStack.alignment = .center
vBlockStack.distribution = .fill
vBlockStack.spacing = dotSpacing
// add it to the main stack view
mainStack.addArrangedSubview(vBlockStack)
// calculate dot size
// needs to be a whole number so we don't get
// half-point sizes
let maxDots:CGFloat = CGFloat(a.max()!)
let availableWidth:CGFloat = 75.0 - ((maxDots - 1) * dotSpacing)
let w:CGFloat = floor(availableWidth / maxDots)
a.forEach { numDots in
// create a horizontal stack view
let hDotStack = UIStackView()
hDotStack.axis = .horizontal
hDotStack.alignment = .fill
hDotStack.distribution = .fill
hDotStack.spacing = dotSpacing
// add it to the vertical block stack view
vBlockStack.addArrangedSubview(hDotStack)
for _ in 0..<numDots {
let v = UIImageView()
v.contentMode = .scaleAspectFit
v.image = UIImage(systemName: "circle.fill")
v.tintColor = .red
// add view to dot stack view
hDotStack.addArrangedSubview(v)
// set dots image view size constraints
v.widthAnchor.constraint(equalToConstant: w).isActive = true
v.heightAnchor.constraint(equalTo: v.widthAnchor).isActive = true
}
}
}
}
}
这产生了这个输出:
推荐阅读
- javascript - 禁用自动完成上的自动选择 | jQuery 用户界面
- ruby-on-rails - 当只有导航依赖于控制器时布局的可用方法
- rest - 如何(甚至想要)在需要提供应用程序状态链接的地方使用 HATEOAS?
- android - 任何人都可以查看我的 AndroidSQLite 查询游标吗?
- ruby - 如何在使用carrierwave gem上传文件时修复“未定义的方法”错误
- c - 在C中交换指针数组中的2个元素(到不同长度的字符串)
- sqlite - 如何在(键,值)sqlite数据库表中插入?
- sql - 如何以“dd/mm/yyyy”格式调整日期
- javascript - 如何创建函数示例 $('#fooinput').barfunction()
- javascript - 在 JavaScript 中使用 array.join()