Centering a view in another view and customising playground view size

Question

I know questions like this have been posted on StackOverflow, but despite following the guides I haven't been able to manage my question.

I have a red rectangle that I would like to place in the center of a view, but it winds up at the origin, like so:

After following some guides, I have arrived at the following code, but the rectangle doesn't render at all.

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport
import CoreGraphics

class MyViewController : UIViewController {

    var currentDrawType = 0


    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white





        // Buton logic follows

        let button = UIButton(type: .system)
        button.frame = CGRect(x:150, y:500, width:80, height:25)
        button.backgroundColor = .white
        button.setTitle("Test Button", for: .normal)
        button.titleLabel?.textColor = .systemBlue
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)

        super.view.addSubview(button)

        // Other


        drawRectangle()

    }


    @objc func buttonAction(sender: UIButton!) {
        currentDrawType += 1

        if currentDrawType > 5 {
            currentDrawType = 0
        }

        switch currentDrawType {
        case 0:
            drawRectangle()
        default:
            break
        }

        print(currentDrawType)
    }

    func drawRectangle() {

        var imageView = UIImageView()
        imageView.frame.origin = super.view.bounds.origin
        imageView.frame.size = CGSize(width:200, height:200)
        imageView.center = super.view.convert(super.view.center, from: imageView)

        super.view.addSubview(imageView)


        UIGraphicsBeginImageContextWithOptions(imageView.frame.size, false, 0)
        let context = UIGraphicsGetCurrentContext()

        let rectangle = imageView.frame

        context!.setFillColor(UIColor.red.cgColor)
        context!.setStrokeColor(UIColor.black.cgColor)
        context!.setLineWidth(10)
        context!.addRect(rectangle)
        // Draw it now
        context!.drawPath(using: CGPathDrawingMode.fillStroke)


        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        imageView.image = img

    }

}
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Furthermore, I would like to adjust the size of the main view, but I'm not quite sure how to. When I had a slightly different implementation, I did change the size, but the physical viewing window in Xcode where the result displayed did not change and hence elements were not visible.

I would love some help and/or guidance on this.

Answer 1

You have to make rectangle = imageView.bounds and have to calculate the frame of imageView using the code below

import UIKit
import CoreGraphics

class MyViewController : UIViewController {

    var currentDrawType = 0


    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white





        // Buton logic follows

        let button = UIButton(type: .system)
        button.frame = CGRect(x:150, y:500, width:80, height:25)
        button.backgroundColor = .white
        button.setTitle("Test Button", for: .normal)
        button.titleLabel?.textColor = .systemBlue
        button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)

        super.view.addSubview(button)

        // Other


        drawRectangle()

    }


    @objc func buttonAction(sender: UIButton!) {
        currentDrawType += 1

        if currentDrawType > 5 {
            currentDrawType = 0
        }

        switch currentDrawType {
        case 0:
            drawRectangle()
        default:
            break
        }

        print(currentDrawType)
    }

    func drawRectangle() {
        let imageSize = CGSize(width:200, height:200)
        var imageOrigin = self.view.center
        imageOrigin.x -= imageSize.width/2
        imageOrigin.y -= imageSize.height/2
        let imageView = UIImageView(frame: CGRect(origin:imageOrigin , size: imageSize))

        super.view.addSubview(imageView)


        UIGraphicsBeginImageContextWithOptions(imageView.frame.size, false, 0)
        let context = UIGraphicsGetCurrentContext()

        let rectangle = imageView.bounds

        context!.setFillColor(UIColor.red.cgColor)
        context!.setStrokeColor(UIColor.black.cgColor)
        context!.setLineWidth(10)
        context!.addRect(rectangle)
        // Draw it now
        context!.drawPath(using: CGPathDrawingMode.fillStroke)


        let img = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        imageView.image = img

    }

}

Answer 2

In func drawRectangle() you are setting origin with superview origin; which is by default x: 0 , y : 0.

imageView.frame.origin = super.view.bounds.origin // this make you view to top. 

In order to fix this you need to get centre point of the view.

CGPoint.init(x: view.frame.size.width / 2 , y: view.frame.size.height / 2)

More i would suggest you to use Constraint here.

    let xConstraint = NSLayoutConstraint(item: imageView, attribute: .CenterX, relatedBy: .Equal, toItem: self.view , attribute: .CenterX, multiplier: 1, constant: 0)
let yConstraint = NSLayoutConstraint(item: imageView, attribute: .CenterY, relatedBy: .Equal, toItem: self.view, attribute: .CenterY, multiplier: 1, constant: 0)
imageView.addConstraint(xConstraint)
imageView.addConstraint(yConstraint)