【iOSDC2024 #LT】3. Layout Protocolを使って、ピアノのUIを作ってみた

func sizeThatFits(
    proposal: ProposedViewSize,
    subviews: Self.Subviews,
    cache: inout Self.Cache
) -> CGSize

func placeSubviews(
    in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Self.Subviews,
    cache: inout Self.Cache
)

private let whiteKeyCount = KeyType.allCases.filter(\.isWhiteKey).count * Octave.allCases.count

public func sizeThatFits(
    proposal: ProposedViewSize,
    subviews: Self.Subviews,
    cache: inout Self.Cache
) -> CGSize {
    let whiteKeyWidth = (proposal.height ?? 0) / AspectRatioConstants.whiteKeyAspectRatio.height * AspectRatioConstants.whiteKeyAspectRatio.width
    let width = whiteKeyWidth * CGFloat(whiteKeyCount) + CGFloat(whiteKeyCount - 1) * keyMargin
    return proposal.replacingUnspecifiedDimensions(by:
            .init(
                width: width,
                height: proposal.height ?? 0
            )
    )
}

private let pianoKeys = PianoKey.allCases

ScrollView(.horizontal) {
    PianoLayout(pianoKeys: pianoKeys) {
        ForEach(pianoKeys) { pianoKey in
            if pianoKey.keyType.isWhiteKey {
                PianoKeyView.White(...)
                .id(pianoKey)
            } else {
                PianoKeyView.Black(...)
                .zIndex(1)
            }
        }
    }
}

// Assigns positions to each of the layout’s subviews.
public func placeSubviews(
    in bounds: CGRect,
    proposal: ProposedViewSize,
    subviews: Self.Subviews,
    cache: inout Self.Cache
) {
    guard !subviews.isEmpty else { return }
    let whiteKeyWidth = bounds.height / AspectRatioConstants.whiteKeyAspectRatio.height * AspectRatioConstants.whiteKeyAspectRatio.width
    let blackKeyWidth = whiteKeyWidth / AspectRatioConstants.whiteKeyAspectRatio.width * AspectRatioConstants.blackKeyAspectRatio.width

    // For some reason, the leading part is cut off from the screen by the width of the white keys * 0.5, so adjust it manually.
    var whiteKeyX: CGFloat = bounds.minX + whiteKeyWidth / 2
    subviews.indices.forEach { index in
        let pianoKey = pianoKeys[index]
        if pianoKey.isWhiteKey {
            // Place only if subview is within view range
            guard whiteKeyX + whiteKeyWidth > bounds.minX, whiteKeyX < bounds.maxX else { return }
            // Place subview
            subviews[index].place(
                at: CGPoint(x: whiteKeyX, y: bounds.minY),
                anchor: .top,
                proposal: .init(
                    width: whiteKeyWidth,
                    height: whiteKeyWidth * AspectRatioConstants.whiteKeyAspectRatio.width * AspectRatioConstants.whiteKeyAspectRatio.height
                )
            )
            // Shift the y coordinate by the height of the placed View
            whiteKeyX += whiteKeyWidth
            // Calculate the spacing between the next View and add it to the y coordinate
            let nextIndex = subviews.index(after: index)
            if nextIndex < subviews.endIndex {
                whiteKeyX += keyMargin
            }
        } else {
            let blackKeyOffset = blackKeyWidth * pianoKey.keyType.keyOffsetRatio
            // For some reason, the leading part is cut off from the screen by the width of the white keys * 0.5, so adjust it manually by minus (whiteKeyWidth / 2) .
            let blackKeyX = whiteKeyX - whiteKeyWidth / 2 - (keyMargin / 2) - blackKeyWidth / 2 + blackKeyOffset
            // Place only if subview is within view range
            guard blackKeyX + blackKeyWidth > bounds.minX, blackKeyX < bounds.maxX else { return }
            subviews[index].place(
                // Adjust the black keys by 0.5 more than the amount of the white keys that you adjusted manually.
                at: CGPoint(x: blackKeyX, y: bounds.minY),
                anchor: .topLeading,
                proposal: .init(
                    width: blackKeyWidth,
                    height: nil // Calculate height by aspectRatio
                )
            )
        }
    }
}

let blackKeyX = whiteKeyX - whiteKeyWidth / 2 - (keyMargin / 2)

let blackKeyX = whiteKeyX - whiteKeyWidth / 2 - (keyMargin / 2) - blackKeyWidth / 2 + blackKeyOffset

guard whiteKeyX + whiteKeyWidth > bounds.minX, whiteKeyX < bounds.maxX else { return }