Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Swift 3: Drawing a rectangle

I'm 3 days new to swift, and I'm trying to figure out how to draw a rectangle. I'm too new to the language to know the classes to extend and the methods to override, and I've looked around for sample code, but nothing seems to work (which I'm attributing to my use of swift 3).

What I'm trying now is:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()


        let k = Draw(frame: CGRect(
            origin: CGPoint(x: 50, y: 50),
            size: CGSize(width: 100, height: 100)))

        k.draw(CGRect(
            origin: CGPoint(x: 50, y: 50),
            size: CGSize(width: 100, height: 100)));
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}
class Draw: UIView {

    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect) {
        let h = rect.height
        let w = rect.width
        var color:UIColor = UIColor.yellow()

        var drect = CGRect(x: (w * 0.25),y: (h * 0.25),width: (w * 0.5),height: (h * 0.5))
        var bpath:UIBezierPath = UIBezierPath(rect: drect)

        color.set()
        bpath.stroke()

        print("it ran")

        NSLog("drawRect has updated the view")

    }

}

And that's not doing anything. Help.

like image 719
Jean Valjean Avatar asked Jun 26 '16 20:06

Jean Valjean


People also ask

What method may be overridden in subclasses of UIView to implement custom 2d drawing?

To implement custom drawing code in a view, developers can subclass the UIView and override the Draw(CGRect) method.

How to build a rectangle in SwiftUI?

With SwiftUI, you can create a Rectangle by just calling it’s method. You should be seeing the pattern here where SwiftUI does all the minor work for you. A rectangular shape aligned inside the frame of the view containing it. In this tutorial, you’ll learn what it takes to build a Rectangle in SwiftUI.

How do I convert a square path to a shape in Swift?

For reusability purposes, we can simply convert our Square Path to such a Shape by declaring a struct which adopts the Shape protocol. The single requirement for the Shape protocol is having a path function which draws the actual shape. We can simply use the Path we just created like this: We now use our MySquare Shape inside our SwiftUI view!

How do I create a bblogo view in SwiftUI?

To do this, create a new SwiftUI view called BBLogo. The icon should simply consist of a black background with two B letters on it. We start by inserting a ZStack into or BBLogo view so that all views inside it get stacked on top of each other. For the background we use the rounded rectangle shape we got familiar with earlier.

How do I design complex shapes for my SwiftUI app?

Design complex shapes, for example to draw your app icon or use custom badges for your SwiftUI app Here are some of the designs we’re going to achieve: SwiftUI provides us with some basic shapes we can use for drawing in our app. These are: You can use them by simply initialising them within your SwiftUI view.


2 Answers

Create a class, I put it in a separate Swift 3 file.

//
//  Plot_Demo.swift
//
//  Storyboard is not good in creating self adapting UI
//  Plot_Demo creates the drawing programatically.

import Foundation
import UIKit

public class Plot_Demo: UIView
{
    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required public init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    public override func draw(_ frame: CGRect) {
        let h = frame.height
        let w = frame.width
        let color:UIColor = UIColor.yellow

        let drect = CGRect(x: (w * 0.25), y: (h * 0.25), width: (w * 0.5), height: (h * 0.5))
        let bpath:UIBezierPath = UIBezierPath(rect: drect)

        color.set()
        bpath.stroke()

        print("it ran")
        NSLog("drawRect has updated the view")
    }
}

Example of use in an UIViewController object:

override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate a new Plot_Demo object (inherits and has all properties of UIView)
    let k = Plot_Demo(frame: CGRect(x: 75, y: 75, width: 150, height: 150))

    // Put the rectangle in the canvas in this new object
    k.draw(CGRect(x: 50, y: 50, width: 100, height: 100))

    // view: UIView was created earlier using StoryBoard
    // Display the contents (our rectangle) by attaching it
    self.view.addSubview(k)
}

Run in an iPhone simulator and on an iPhone:

enter image description here

Used XCode Version 8.0 (8A218a), Swift 3, target iOS 10.0

like image 57
coarist Avatar answered Oct 24 '22 18:10

coarist


In order to see the view, you need to create one and give it frame so that it knows how big to make it.

If you put your code in a Playground, and then add this line:

let d = Draw(frame: CGRect(x: 0, y: 0, width: 100, height: 100))

You'll be able to click on the Quick View on the right, and then you'll see the view.

Yellow square in a playground


You can also add the view as a subview of view in your ViewController and then you'll see it on the iPhone:

override func viewDidLoad() {
    super.viewDidLoad()

    let k = Draw(frame: CGRect(
        origin: CGPoint(x: 50, y: 50),
        size: CGSize(width: 100, height: 100)))

    // Add the view to the view hierarchy so that it shows up on screen
    self.view.addSubview(k)
}

Note that you never call draw(_:) directly. It is called for you by Cocoa Touch to display the view.

Yellow square on iPhoneSE

like image 32
vacawama Avatar answered Oct 24 '22 18:10

vacawama