Bài 21: UIPickerView

UIPickerView

UIPickerView là một UIControl tương tự như UIDatePicker chỉ khác ở nội dung hiển thị. UIDatePicker hiển thị ngày tháng còn UIPickerView hiển thị một danh sách cho người dùng chọn.

Không như UIDatePicker để hiển thị UIPickerView chúng ta đều phải tự thiết lập bằng code. Ở đây mình sẽ hướng dẫn chi tiết cách tạo UIPickerView cũng như làm demo đơn giản hiển thị list danh sách hình các món ăn, khi chọn một món ăn UILabel sẽ hiển thị tên tương ứng.

1. Thiết kế giao diện

Các bạn tạo project và kéo thả UIPickerView và UILabel vào Main.storyboard:

Khởi tạo UIPickerView
Hình 1.1 Khởi tạo UIPickerView

Tiếp theo các bạn kéo thả thư mục hình danh sách các món ăn vào trong project. Link tải thư mục hình món ăn: https://bit.ly/362zaym

Kéo thư mục hình vào project
hình 1.2 Kéo thư mục hình vào project

2. Ánh xạ Outlet, Action và thực hiện code logic

Các bạn ánh xạ Outlet cho UIDatePicker và UILabel:

Ánh xạ Outlet
Hình 2.1 Ánh xạ Outlet

Tiếp theo các bạn thực hiện code để hiển thị UIPickerView cũng như để bắt sự kiện khi UIPickerView scroll tới hình món ăn nào chúng ta sẽ hiển thị tên món ăn đó. Các bạn tham khảo đoạn code sau:

Chạy project các bạn sẽ thấy UIPickerView hiển thị một list hình ảnh các món ăn và khi scroll UIPickerView thì UILabel sẽ hiển thị tên món ăn tương ứng.

kết quả tạo UIPickerView
Hình 2.2 Kết quả tạo UIPickerView

Cảm ơn bạn đã theo dõi bài viết, nếu có thắc mắc gì vui lòng để lại bình luận bên dưới. Link demo: https://bit.ly/2Je1fJt

Bạn có thể tham khảo khoá học lập trình iOS tại laptrinh0kho.com. Các khoá học từ cơ bản đến nâng cao, được thực tập doanh nghiệp. Bạn sẽ được cung cấp kiến thức có hệ thống với đội ngũ giảng viên giàu kinh thực tế và am hiểu sư phạm. Hãy liên hệ ngay để được tư vấn miễn phí theo thông tin bên dưới:

LAPTRINH0KHO.COM

  • 138/36 Nguyễn Xí, P. 26, Q. Bình Thạnh, TP.HCM
  • Hotline: 0347.750.760 (Kết bạn Zalo để tư vấn)
  • Email: laptrinh0kho@gmail.com
  • Website: www.laptrinh0kho.com
  • FanPage : laptrinh0kho.com