Labels (UILabel)

What is UILabel?

UILabel is a UI component in UIKit that is used to display static or dynamic text in an iOS application. It is commonly used for showing headings, descriptions, or any form of textual content within the app.

---

1. Creating a UILabel

There are two ways to add a UILabel in iOS development:

1. Using Storyboard (Interface Builder)
2. Programmatically in Swift

---

2. Adding UILabel via Storyboard

1. Open Main.storyboard in Xcode.
2. Drag and drop a UILabel from the Object Library onto the view.
3. Customize properties in the Attributes Inspector (e.g., text, font, alignment, color).
4. Create an IBOutlet connection in the ViewController: @IBOutlet weak var myLabel: UILabel!
5. Modify properties in viewDidLoad(): override func viewDidLoad() { super.viewDidLoad() myLabel.text = "Hello, iOS!" myLabel.textColor = UIColor.blue myLabel.font = UIFont.systemFont(ofSize: 20, weight: .bold) myLabel.textAlignment = .center }

---

3. Creating UILabel Programmatically

import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // Create UILabel instance
        let myLabel = UILabel()
        myLabel.text = "Welcome to iOS Development"
        myLabel.textColor = UIColor.black
        myLabel.font = UIFont.systemFont(ofSize: 18, weight: .medium)
        myLabel.textAlignment = .center

        // Enable auto-layout
        myLabel.translatesAutoresizingMaskIntoConstraints = false

        // Add to view
        view.addSubview(myLabel)

        // Set Constraints
        NSLayoutConstraint.activate([
            myLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            myLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            myLabel.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            myLabel.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20)
        ])
    }
}

✅ Explanation:

• We create a UILabel instance.
• Customize text, color, font, and alignment.
• Enable Auto Layout and add constraints for positioning.

---

4. UILabel Customization

4.1 Changing Font & Size

myLabel.font = UIFont(name: "HelveticaNeue-Bold", size: 20)

4.2 Changing Text Color

myLabel.textColor = UIColor.red

4.3 Changing Background Color

myLabel.backgroundColor = UIColor.lightGray

4.4 Text Alignment

myLabel.textAlignment = .center  // .left, .right, .justified

4.5 Enabling Multi-Line Support

By default, UILabel shows only one line of text. Enable multi-line text like this:

myLabel.numberOfLines = 0  // 0 means unlimited lines
myLabel.lineBreakMode = .byWordWrapping

4.6 Adding Shadow to Text

myLabel.shadowColor = UIColor.gray
myLabel.shadowOffset = CGSize(width: 2, height: 2)

---

5. UILabel with Attributed Text

To style part of the text differently, use NSAttributedString:

let attributedText = NSMutableAttributedString(string: "Hello, iOS Developers!")
attributedText.addAttribute(.foregroundColor, value: UIColor.blue, range: NSRange(location: 0, length: 5))
attributedText.addAttribute(.font, value: UIFont.boldSystemFont(ofSize: 20), range: NSRange(location: 7, length: 3))

myLabel.attributedText = attributedText

✅ Explanation:

• First 5 characters are colored blue.
• “iOS” is set to bold.

---

6. UILabel Gesture Support

UILabel does not support user interaction by default. Enable it for tap gestures:

myLabel.isUserInteractionEnabled = true
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(labelTapped))
myLabel.addGestureRecognizer(tapGesture)

@objc func labelTapped() {
    print("UILabel Tapped!")
}

---

7. UILabel Animation (Fade Effect)

UIView.animate(withDuration: 1.0) {
    myLabel.alpha = 0.5  // Adjust transparency
}

---

8. Summary

Feature	Code Example
Set Text	myLabel.text = "Hello"
Set Font & Size	myLabel.font = UIFont.systemFont(ofSize: 18, weight: .bold)
Set Text Color	myLabel.textColor = UIColor.red
Set Background Color	myLabel.backgroundColor = UIColor.lightGray
Set Alignment	myLabel.textAlignment = .center
Enable Multi-Line	myLabel.numberOfLines = 0
Add Shadow	myLabel.shadowColor = UIColor.gray
Set Attributed Text	myLabel.attributedText = attributedString
Enable Tap Gesture	myLabel.isUserInteractionEnabled = true

---

Conclusion

• UILabel is a fundamental UI component in iOS development.
• It supports text styling, alignment, gestures, and animations.
• Use Auto Layout for responsive designs.

Would you like a practical example or demo project? 🚀