Circular Ring Layout View - Circle of Fifths

by Annett Schwarze | 2026-05-15

This example demonstrates a sophisticated `UIView` subclass that automatically arranges its child views in circular rings using trigonometric calculations. It is ideal for visualizing music theory concepts.

Based on our Music Theory Learning app, this pattern is used to implement the circle of fifths interface.

In addition to its circular layout, this custom view implements advanced hit testing. Users can select elements not only by tapping but also by swiping their finger over the ring elements. This enables intuitive interaction with the circular interface, enhancing the learning experience.

        
// Simplified Swift version of the concept
override func layoutSubviews() {
    super.layoutSubviews()

    let radius_max = self.bounds.size.width / 2.0
    let ringView_center = CGPoint(x: self.bounds.width * 0.5, y: self.bounds.height * 0.5)

    for (i, subView) in subviews.enumerated() {
        let alpha = CGFloat(i) * (2 * .pi / CGFloat(subviews.count))
        let radius_ring = radius_max * ringPercent / 100.0
        let x = cos(alpha) * radius_ring
        let y = sin(alpha) * radius_ring
        let center = CGPoint(x: ringView_center.x + x, y: ringView_center.y + y)

        var frame = subView.bounds
        frame.origin = CGPoint(x: center.x - frame.width * 0.5, y: center.y - frame.height * 0.5)
        subView.frame = frame
    }
}