How can I layout images/views programmatically in a circle AROUND a central image

Question

I am attempting to plot 8 UIViews in a circle around a central image. I am able to plot the images in a circle, but my center point is not located on the central image.

I have successfully plotted 8 UIViews (will be images) programmatically in a circle using a shared center/origin point. From center.x and center.y I am adding the x and y components for each particular image using trig functions.

let radiusX = center.x + (radius * cos(radians)) . let radiusY = center.y + (radius * sin(radians))

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var centerImage: UIImageView!{
        didSet{
            centerImage.clipsToBounds = true
            centerImage.layer.cornerRadius = 
            centerImage.frame.width/2
        }
    }
    @IBOutlet weak var containerView: UIView!


    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, 
        typically from a nib.

    }

    override func viewDidLayoutSubviews() {
        initSmallPhotos()
    }

    func initSmallPhotos() {

        var radians : CGFloat = 0
        let sideOfPic : CGFloat = 65.7
        let radius : CGFloat = containerView.frame.width > 
            containerView.frame.height ? 
            containerView.frame.height / 2 - 
            sideOfPic : containerView.frame.width / 2 - sideOfPic

        let x = containerView.center.x
        let y = containerView.center.y

        let center = CGPoint(x: x, y: y)

        print(center)


        for _ in 0...7 {


            let radiusX = center.x + (radius * cos(radians))
            let radiusY = center.y + (radius * sin(radians))

            let view = UIView()
            view.backgroundColor = UIColor.red
            view.frame.size = CGSize(width: sideOfPic, height: 
                 sideOfPic)
            view.center = CGPoint(x: radiusX, y: radiusY)
            view.clipsToBounds = true
            view.layer.cornerRadius = sideOfPic / 2
            view.layer.masksToBounds = true
            view.layer.borderColor = UIColor.white.cgColor
            view.layer.borderWidth = 2
            view.contentMode = .scaleAspectFit

            containerView.addSubview(view)

            radians += (CGFloat.pi / 4)
            print(radians)

        }
    }

}

The issue is what to use for my center points. I am able to center the 8 images horizontally by using my center.x = containerView.center.x, but when I use center.y = containerView.center.y, the images are set too low. I also tried center.y = containerView.frame.origin.y and that set the 8 images too high on the screen.

trying to use center points from my centerImage gave me really strange behavior, even though the image is constrained to the center of the container view.

Any help would be appreciated.

Answer 1

Use bounds.midX vs center.x AND bounds.midY vs. center.y.. Check the lines where you set x and y. Using center is giving you the position of the containerView inside of its super view not the center of containerView. Hope that makes sense.

import Foundation
import UIKit
import PlaygroundSupport
class ViewController:UIViewController{
    var check = true
    var containerView = UIView(frame: CGRect(x: 30, y: 30, width: 400, height: 300))
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .blue
        view.addSubview(containerView)

        initSmallPhotos()

    }

    func initSmallPhotos() {

        var radians : CGFloat = 0
        let sideOfPic : CGFloat = 65.7
        let radius : CGFloat = containerView.frame.width >
            containerView.frame.height ?
                containerView.frame.height / 2 -
                sideOfPic : containerView.frame.width / 2 - sideOfPic

        let x = containerView.bounds.midX
        let y = containerView.bounds.midY

        let center = CGPoint(x: x, y: y)

        print(center)


        for _ in 0...7 {


            let radiusX = center.x + (radius * cos(radians))
            let radiusY = center.y + (radius * sin(radians))

            let view = UIView()
            view.backgroundColor = UIColor.red
            view.frame.size = CGSize(width: sideOfPic, height:
                sideOfPic)
            view.center = CGPoint(x: radiusX, y: radiusY)
            view.clipsToBounds = true
            view.layer.cornerRadius = sideOfPic / 2
            view.layer.masksToBounds = true
            view.layer.borderColor = UIColor.white.cgColor
            view.layer.borderWidth = 2
            view.contentMode = .scaleAspectFit

            containerView.addSubview(view)

            radians += (CGFloat.pi / 4)
            print(radians)

        }
    }
}


let viewController = ViewController()
PlaygroundPage.current.liveView = viewController
PlaygroundPage.current.needsIndefiniteExecution