ios - 如何计算圆矩阵的正确位置以适合具有比例间隙的给定 View ？

Question

我是 iOS 开发的新手，我正在尝试在 UIView 内显示一个 10x10 的网格，并考虑到它的边界，我希望根据设备的可用宽度/高度来计算圆圈。

到目前为止我没有运气的尝试:

func setUpPoints() {
    let matrixSize = 10
    let diameter = (min(painelView.frame.size.width, painelView.frame.size.height) / CGFloat(matrixSize + 1)).rounded(.down)
    let radius = diameter / 2

    for i in 0...matrixSize {

        for j in 0...matrixSize {
            let x = CGFloat(i) * diameter + radius
            let y = CGFloat(j) * diameter + radius
            let frame = CGRect(x: x, y: y, width: diameter, height: diameter)
            let circle = Circle(frame: frame)
            circle.tag = j * matrixSize + i + 1
            painelView.addSubview(circle)

        }
    }

}

我的目标是按比例分布灰色矩形内的圆圈，使其看起来像 Android 模式锁屏:

有人可以给我一些指示吗？

谢谢。

Answer 1

如果我明白你想做什么，那么下面一行:

let radius = (painelView.frame.size.width + painelView.frame.size.height) / CGFloat(matrixSize * 2)

应该是:

let radius = (min(painelView.frame.size.width, painelView.frame.size.height) / CGFloat(matrixSize + 1)).rounded(.down)

上述更改将允许圆圈的“正方形”适合较小的 View - View 的宽度或高度，允许“正方形”周围的间隙等于每个圆圈直径的一半。

您还需要将两个循环都更改为从 0 开始。

for i in 0..<matrixSize {
    for j in 0..<matrixSize {

顺便说一句 - 您的 radius 变量实际上是 diameter。而 gap 实际上就是 radius。

下面的代码在圆形正方形周围提供了一个边框，并且在圆形之间包含了一些空间。根据需要进行调整。

func setUpPoints() {
    let matrixSize = 10
    let borderRatio = CGFloat(0.5) // half a circle diameter - change as desired
    let gapRatio = CGFloat(0.25) // quarter circle diameter - change as desired
    let squareSize = min(painelView.frame.size.width, painelView.frame.size.height)
    let diameter = (squareSize / (CGFloat(matrixSize) + 2 * borderRatio + CGFloat(matrixSize - 1) * gapRatio)).rounded(.down)
    let centerToCenter = (diameter + diameter * gapRatio).rounded(.down)
    let borderSize = (diameter * borderRatio).rounded()

    for i in 0..<matrixSize {
        for j in 0..<matrixSize {
            let x = CGFloat(i) * centerToCenter + borderSize
            let y = CGFloat(j) * centerToCenter + borderSize
            let frame = CGRect(x: x, y: y, width: diameter, height: diameter)
            let circle = Circle(frame: frame)
            circle.tag = j * matrixSize + i + 1
            painelView.addSubview(circle)
        }
    }
}