Bài 6 – iOS Controls (UILabel, UIButton, UISwitch, UISegmentedControl)

Trong bài học trước, bạn đã được hướng dẫn phương pháp thiết kế giao diện và các thao tác cơ bản. Đồng thời, bạn cũng đã được hướng dẫn viết một ứng dụng nho nhỏ Food Tracker, qua đó làm quen với UILabel, UIButton và UITextField. Đây là những iOS Controls cơ bản và rất hay được sử dụng trong thiết kế giao diện. Tuy nhiên để tạo được một giao diện tốt thì không phải chỉ cần 03 controls trên là đủ, mà bạn sẽ cần làm quen thêm một số iOS Controls nữa. Và bài viết này sẽ giới thiệu tới bạn những iOS Controls cơ bản còn lại.

Trước khi tìm hiểu iOS Controls, không biết có bạn nào nhớ công cụ Attributes inspector không? Đây là công cụ cho phép bạn cấu hình thuộc tính cho các iOS Controls. Công cụ này đã được mình giới thiệu lần đầu tiên trong bài 2.

Sở dĩ mình nhắc lại công cụ này vì những thuộc tính của các iOS Controls mà mình sắp giới thiệu sau đây sẽ sử dụng công cụ này để cấu hình. Tuy nhiên nếu được bạn nên cấu hình bằng code để quen dần với việc lập trình. Nếu bạn quên cách code như thế nào thì hãy xem lại bài 04 nhé.

UILabel

UILabel là lớp cung cấp cho bạn một control để hiển thị một chuỗi văn bản tĩnh trên giao diện. Control này chỉ sử dụng để hiển thị văn bản trên giao diện, do đó khi có tương tác (touch) thì cũng không thực hiện xử lý gì cả.

➤ Lưu ý: Nội dung hiển thị trên Label là văn bản tĩnh nên chuỗi định dạng khá đơn giản. Trong trường hợp bạn muốn định dạng nội dung (font, size, align,…) thì bạn có thể cấu hình thuộc tính Text là Attributed thay vì Plain.

Các thuộc tính định dạng cho UILabel khá đơn giản và tương tự UITextField. Do đó mình sẽ không trình bày trong phần này, bạn có thể tham khảo trong phần UITextField.

UILabel cũng đã được mình giới thiệu trong phần thiết kế giao diện. Sử dụng cũng không phức tạp, vì vậy phần này mình cũng chỉ nhắc lại một chút thôi.

UIButton

UIButton là lớp giúp bạn tạo một “nút nhấn” trên màn hình. Control này sẽ tiếp nhận và xử lý khi phát sinh sự kiện touch (người dùng nhấn vào Button). Có 5 loại Button (hình minh hoa), mặc định là “System” Button.
Lớp UIButton cung cấp khá nhiều thuộc tính và phương thức giúp bạn thiết lập tiêu đề, hình ảnh, kiểu dáng của Button.

Một số thuộc tính cơ bản hay sử dụng

Một số phương thức hay sử dụng

UISwitch

UISwitch là lớp giúp bạn tạo một “nút nhấn” thể hiện trạng thái trên màn hình tương tự cái “công tắc”. UISwitch có 2 trạng thái ON và OFF.

• Khi nhận được sự tác động của người dùng để chuyển trạng thái thì sẽ phát sinh sự kiện valueChanged.
• Lớp UISwitch cũng cho phép bạn tuỳ chỉnh màu sắc cho trạng thái ON.
  

Một số thuộc tính cơ bản hay sử dụng

Phương thức hay sử dụng

UISegmentedControl

UISegmentedControl là lớp cung cấp cho bạn một control với nhiều phân đoạn bên trong. Mỗi phân đoạn đóng vai trò như một Button. Mỗi phân đoạn có thể hiển thị tiêu đề hoặc hình ảnh.

➤ Lưu ý:

• Tại một thời điểm chỉ có một phân đoạn được chọn. Khi nhấn vào bất kỳ Button nào thì sự kiện valueChanged sẽ được phát sinh.
• Nếu bạn muốn thiết lập hình ảnh cho phân đoạn thì cần lưu ý như sau:
  • Mặc định hình ảnh sẽ được thể hiện dưới dạng đơn sắc (hình minh hoạ bên dưới).
    
  • Để cấu hình cho segment hiển thị ảnh gốc thay vì đơn sắc thì bạn thiết lập thuộc tính Render As là Original image cho hình ảnh trong tập tin Assets.xcassets.
    

Một số thuộc tính cơ bản hay sử dụng

Một số phương thức hay sử dụng

Tổng kết

Bài viết về iOS Controls đến đây vẫn chưa hết đâu bạn nhé, vẫn còn khá nhiều control nữa. Nhưng vì nội dung của 01 bài viết đã khá dài cho nên mình sẽ chia thành nhiều bài viết cho bạn dễ theo dõi. Bài viết tiếp theo mình sẽ trình bày tiếp về iOS Controls, cụ thể là UIStepper, UITextField, UITextView.