Thực hành iOS Swift: Cách làm chủ UILabel và UIButton trong ViewController

Trong phát triển ứng dụng iOS, việc tạo và xử lý các thành phần giao diện là một phần không thể thiếu. Các thành phần cơ bản như UILabel (để hiển thị văn bản) và UIButton (để tương tác với người dùng) là những khối xây dựng quan trọng cho mọi ứng dụng.

Swift và Xcode cung cấp hai cách để tạo giao diện:

• Sử dụng Storyboard và Interface Builder
• Tạo thành phần giao diện bằng code

Cả hai cách đều có ưu và nhược điểm riêng. Trong bài viết này, Thầy Duy - Thạc sĩ Công Nghệ Thông Tin, Đại học Bách Khoa Hà Nội sẽ hướng dẫn các bạn cách sử dụng cả hai phương pháp để hiểu rõ cơ chế hoạt động và linh hoạt hơn trong phát triển. Cùng theo dõi nhé!

UILabel là gì?

UILabel là một thành phần UI dùng để hiển thị văn bản tĩnh trên màn hình. Bạn có thể tùy biến font chữ, kích thước, màu sắc, số dòng, và căn chỉnh văn bản.

Các thuộc tính cơ bản của UILabel:

Tạo UILabel bằng Storyboard

Bước 1: Thêm UILabel vào Storyboard

• Mở file Main.storyboard
• Kéo một UILabel từ Library (Cmd + Shift + L) vào màn hình
• Thay đổi thuộc tính tại Inspector (text, font size, alignment…)

Bước 2: Ánh xạ UILabel vào ViewController.swift

Mở file ViewController.swift và thêm IBOutlet:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var myLabel: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()
        myLabel.text = "Chào mừng đến với iOS!"
        myLabel.textColor = .systemBlue
        myLabel.font = UIFont.systemFont(ofSize: 24, weight: .bold)
    }
}

Nhớ kết nối UILabel trong Storyboard với myLabel bằng cách giữ Ctrl và kéo vào file code hoặc dùng Connection Inspector.

Tạo UILabel bằng code

Bạn cũng có thể tạo UILabel mà không cần storyboard:

override func viewDidLoad() {
    super.viewDidLoad()

    let label = UILabel()
    label.text = "Đây là UILabel tạo bằng code"
    label.textColor = .darkGray
    label.font = UIFont.systemFont(ofSize: 20)
    label.textAlignment = .center
    label.numberOfLines = 0
    label.frame = CGRect(x: 20, y: 100, width: view.frame.width - 40, height: 60)

    view.addSubview(label)
}

Việc tạo bằng code giúp bạn kiểm soát động UI, rất hữu ích khi giao diện thay đổi theo dữ liệu.

UIButton là gì?

UIButton là một thành phần tương tác, cho phép người dùng nhấn vào để kích hoạt một hành động như mở màn hình mới, gửi dữ liệu hoặc thay đổi giao diện.

Các kiểu nút UIButton thường dùng:

Tạo UIButton bằng Storyboard

Bước 1: Thêm UIButton vào giao diện

• Kéo một UIButton từ Library vào màn hình
• Đặt tiêu đề (title) tại Attributes Inspector
• Tùy biến màu sắc, font, hình ảnh (nếu cần)

Bước 2: Ánh xạ IBOutlet và xử lý onClick

Trong ViewController.swift, tạo IBOutlet và IBAction như sau:

@IBOutlet weak var myButton: UIButton!

@IBAction func buttonTapped(_ sender: UIButton) {
    myLabel.text = "Bạn đã nhấn nút!"
}

Đảm bảo kết nối nút với action thông qua Connection Inspector hoặc kéo từ nút vào file code.

Tạo UIButton bằng code

override func viewDidLoad() {
    super.viewDidLoad()

    let button = UIButton(type: .system)
    button.setTitle("Nhấn tôi", for: .normal)
    button.setTitleColor(.white, for: .normal)
    button.backgroundColor = .systemGreen
    button.frame = CGRect(x: 50, y: 200, width: 200, height: 50)
    button.layer.cornerRadius = 8
    button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)

    view.addSubview(button)
}

@objc func buttonAction() {
    print("Nút đã được nhấn!")
}

Tạo bằng code thường được dùng trong các ứng dụng dynamic, không phụ thuộc Storyboard.

Kết hợp UILabel và UIButton – Tạo trải nghiệm tương tác

Một ví dụ điển hình là khi người dùng nhấn vào nút, nội dung UILabel sẽ thay đổi:

@IBOutlet weak var messageLabel: UILabel!
@IBAction func updateMessage(_ sender: UIButton) {
    messageLabel.text = "Cảm ơn bạn đã tương tác!"
}

Hoặc nếu bạn không dùng storyboard:

override func viewDidLoad() {
    super.viewDidLoad()

    let label = UILabel()
    label.frame = CGRect(x: 20, y: 100, width: 300, height: 40)
    label.text = "Ban đầu"
    label.tag = 1001
    view.addSubview(label)

    let button = UIButton(type: .system)
    button.frame = CGRect(x: 20, y: 160, width: 150, height: 50)
    button.setTitle("Cập nhật", for: .normal)
    button.addTarget(self, action: #selector(updateLabel), for: .touchUpInside)
    view.addSubview(button)
}

@objc func updateLabel() {
    if let label = view.viewWithTag(1001) as? UILabel {
        label.text = "Đã cập nhật thành công"
    }
}

Trong bài viết này, bạn đã học cách sử dụng UILabel và UIButton – hai thành phần cơ bản trong lập trình giao diện người dùng với iOS Swift. Bạn có thể khởi tạo chúng bằng Storyboard hoặc code, ánh xạ vào ViewController, và xử lý sự kiện như onClick thông qua IBAction hoặc addTarget.

Hướng dẫn cách tạo một project iOS mới

Để bắt đầu, mở Xcode và tạo một project mới:

• Chọn File > New > Project
• Chọn template App (iOS)
• Đặt tên dự án, ví dụ: UILabelUIButtonDemo
• Chọn Swift là ngôn ngữ lập trình, Storyboard là công cụ giao diện

Việc hiểu rõ cách hoạt động của UILabel và UIButton giúp bạn dễ dàng tạo ra các màn hình tương tác trong ứng dụng iOS, đặt nền tảng vững chắc cho những thành phần phức tạp hơn như UITableView, UICollectionView hay Navigation Controller trong tương lai.

Như vậy, qua bài viết này, thầy Duy đã hướng dẫn cho chúng ta cách làm chủ UILabel và UIButton trong ViewController. Để theo dõi thêm các kiến thức về lập trình IOS hay tài liệu học tập, các bạn có thể theo dõi thầy qua các kênh:

• Kênh YouTube: https://www.youtube.com/@LeHongDuyCNTT
• GitHub cá nhân: https://github.com/DuyLeHong

Cuối cùng, đừng quên theo dõi CodeFresher để cập nhật những thông tin về lập trình, khóa học lập trình. Bạn có thể đăng ký khóa học IOS tại link: https://laptrinh-online.vn/course/lap-trinh-ios-swift

Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.

SĐT: 0813188668 , 0332026803 (Zalo / Call)