How to create UILabel programmatically using Swift?

Article by: Manish Methani

Last Updated: September 26, 2021 at 8:04am IST
2 min 18 sec

In this article, we are going to discuss the following points

  1. How to create UILabel programmatically using Swift?

  2. Most common properties used to create the UILabel programmatically.

  3. Start writing some code.

  4. Explanation of Swift code written.

UILabel is used to display the static Contents. For Example, "Email", "Password" or anything. It can be a single-line label or even multiline though.

Most common properties used to create the UILabel programmtically

1) .text
2) .font
3) .numberOfLines
4) .lineBreakMode
5) .textColor
6) .backgroundColor
7) .textAlignment

Let's Start Creating UILabel programmtically

Open Xcode Goto File > New >Project >Single View Application > Enter Project Name (eg :- FirstProjectViewController) and Select Language as Swift > Done.

Now you can see a file on the left navigation Menu of Xcode named, ViewController.swift

Lets write some code

import UIKit
 var nameLabel = UILabel()
class ViewController: UIViewController {
    
    override func viewDidLoad()
     {
        super.viewDidLoad()
        
        self.view.backgroundColor = UIColor.init(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0)

        nameLabel = UILabel(frame:CGRect(x:12 , y:0 , width: self.view.frame.size.width - 12*2 , height: 40) )
        self.view.addSubview(nameLabel)
        nameLabel.textColor = UIColor.black
        nameLabel.text = "Thie is Label"
        nameLabel.font = UIFont .systemFont(ofSize: 18.0, weight: 1.0)
        nameLabel.textAlignment = NSTextAlignment.center
        nameLabel.layer.borderColor = UIColor.black.cgColor
        nameLabel.layer.borderWidth = 1.0
        nameLabel.numberOfLines = 0;
        nameLabel.lineBreakMode = NSLineBreakMode.byWordWrapping
     }
 }

The code given below is itself self-explanatory. We initialized a "nameLabel" at the beginning which is then added to self.view as a subView. After that, we assigned it some text and gave textColor with "UIColor" class and font with "UIFont" class.

numberOfLines is used to give how much content you want for the label to adjust. If you give it a 0 value that means there is no Limitation of content if assigned with line-breaking mode. Stick to the basics first here, which is how to initialize the frame for any UIElement, how to use its Properties like .text,.font, layer, etc to create UILabel programmatically.

.layer property

.layer property is used to give borderWidth, borderColor and cornerRadius. To give borderColor along with .layer property you have to give .cgColor at the end as you can see in the given example above.

Output 

Learn Flutter, FlutterFlow,
Firebase & Angular.

Looking to learn how to create the production-ready apps
from scratch? Well, you are at the right place.

₹1299 or $15.56

Learn to create the Dating App using No-Code Tool FlutterFlow

Level: Advanced

Explore Curriculum
₹1299 or $15.56

Flutter Mobile App Development Course

Explore Curriculum
₹1299 or $15.56

The Complete Angular Course

Explore Curriculum
₹1299 or $15.56

Dart Programming for Absolute Beginners

Coming Soon
FREE

Next.js course

Start Watching
FREE

Fundamentals of Computer Programming Languages

Start Watching
FREE

Learn HTML, CSS & Bootstrap

Start Watching

Latest Web Stories

1

Learn how to open WhatsApp using FlutterFlow | Step by Step Guide

Test your skills with these expert-led curated
Mock Tests.

C Programming Test

Test your C Programming skills with this comprehensive mock test on C Programming.

Take Test

Flutter Test

Solve most asked Interview Questions on Flutter and Test your foundational skills in flutter.

Take Test

GATE(CSE) Operating Systems

Solve most asked GATE Questions in Operating Systems and test your Gate Score.

Take Test

HTML,CSS Test

This is a mock test designed to help you assess your knowledge and skills in HTML and CSS.

Take Test

(GATE CSE) Data Structures & Algorithms Test

Solve most asked GATE Questions in Data Structures and Algorithms and test your Gate Score.

Take Test

Download the Codzify
Mobile App


Learn Anytime, Anywhere at your own pace. Scan the QR Code with your Mobile Camera to Download the Codzify Mobile App.

Codzify Mobile App Codzify Mobile App
Codzify Logo

Terms and Conditions    Cookie Policy   Refund Policy   Adsense Disclaimer