How To Draw Rectangle View Use Swift In iOS App

This example will show you how to use a swift CGRect object to draw a rectangle in iOS app, it also show you how to add the rectangle as the subview of app’s main container view. In this example, we will create a new project DrawRectangleView, and this project will be added in the HelloWorldSwift workspace. So one Xcode workspace can contain multiple Xcode projects.

1. Create Xcode Project & Add It To Exist Xcode WorkSpace.

  1. Open Xcode, click File —> New —> Project… menu item to open new Xcode project window. The Project… menu item is under Target… menu item in below picture.
    ios create target in xcode file new target
  2. Select iOS —> Single View App item in the popup window.
    xcode ios single view app template
  3. Input product name DrawRectangleView, Organization Name and Organization Identifier, select Language Swift in the drop down list.
    xcode draw rectangle view project
  4. Click Next button in above window, then select HelloWorldSwift in the Add to workspace drop down list. Then click Create button to create the project.
    add new swift project to exist workspace
  5. After above process, you will find the new Xcode project has been added in the exist Xcode workspace. The project folder name is DrawRectangleView.xcodeproj, there are two directory in this project folder, DrawRectangleView and Products.
    add new xcode project in exist xcode workspace

2. Add Rectangle In iOS App Screen.

  1. Double click the HelloWorldSwift / DrawRectangleView.xcodeproj / DrawRectangleView / ViewController.swift file to edit it.
  2. Add below code in it.
    import UIKit
    
    class ViewController: UIViewController {
    
        /*
         This method will be invoked after view is loaded.
         We will create and add a green rectangle in the app screen in this method.
         */
        override func viewDidLoad() {
            super.viewDidLoad()
            
            // get screen size object.
            let screenSize: CGRect = UIScreen.main.bounds
            
            // get screen width.
            let screenWidth = screenSize.width
            
            // get screen height.
            let screenHeight = screenSize.height
            
            // the rectangle top left point x axis position.
            let xPos = 100
            
            // the rectangle top left point y axis position.
            let yPos = 300
            
            // the rectangle width.
            let rectWidth = Int(screenWidth) - 2 * xPos
            
            // the rectangle height.
            let rectHeight = Int(screenHeight) - 2 * yPos
            
            // Create a CGRect object which is used to render a rectangle.
            let rectFrame: CGRect = CGRect(x:CGFloat(xPos), y:CGFloat(yPos), width:CGFloat(rectWidth), height:CGFloat(rectHeight))
            
            // Create a UIView object which use above CGRect object.
            let greenView = UIView(frame: rectFrame)
            
            // Set UIView background color.
            greenView.backgroundColor = UIColor.green
            
            // Add above UIView object as the main view's subview.
            self.view.addSubview(greenView)
        }
    
    
    }
  3. Now select the project and click the Run button to run the project.
    click the run button and select the project to run it
  4. When the project start, a virtual iPhone will be started, you can see below screen, there will display a green rectangle at the center of the screen.
    draw green rectangle in ios application use swift
READ :   How To Add Subview In iOS Programmatically

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.