Bài 7 – Hướng dẫn sử dụng Picker View (UIDatePicker và UIPickerView)

Trong 03 bài viết trước về iOS Controls, mình đã trình bày tới bạn 12 loại control cơ bản. Đó là những controls phổ biến và dễ sử dụng. Hôm nay mình cũng sẽ trình bày tới bạn một loại controls nữa, đó là Picker View. Loại control này bao gồm UIDatePicker và UIPickerView, đây là controls có cách sử dụng hơi phức tạp và hơi khác so với các control mà mình đã giới thiệu tới bạn. Do đó mình tách ra thành bài viết riêng, tuy là chỉ có 02 control nhưng sẽ khá dài đấy. Mời bạn theo dõi nhé.

UIDatePicker

UIDatePicker là lớp cung cấp cho bạn một control thể hiện thời gian (ngày tháng năm, giờ phút giây, hoặc đồng hồ đếm ngược).
UIDatePicker cung cấp cho bạn 04 cách thức thể hiện thời gian:

• Time: hiển thị giờ phút.
• Date: hiển thị ngày tháng năm.
• Date and Time: hiện thị ngày, tháng, năm, giờ, phút.
• Count Down Timer: hiển thị giờ phút, được sử dụng cho các ứng dụng đếm ngược thời gian.

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

UIPickerView

UIPickerView là lớp cung cấp cho bạn một control thể hiện danh sách các giá trị. Bạn có thể hiểu control này tương tự listbox trong các ngôn ngữ khác. Có hình dạng tương tự UIDatePicker nhưng sử dụng UIPickerView lại hoàn toàn khác với UIDatePicker do mọi thao tác bạn phải tự thiết lập.

Để cho bạn dễ làm quen với UIPickerView, thì phần này mình sẽ cùng nhau xây dựng ví dụ sau.

➤ Ví dụ: Xây dựng danh sách các môn học cho phép người dùng đăng ký. Bao gồm các chức năng sau:

• Thêm, xoá, sửa môn học.
• Tìm kiếm môn học.
• Thiết lập thêm một cột trong danh sách cho phép chọn buổi học.

Trước khi bắt đầu, bạn hãy xem demo của ví dụ này đã nhé. Demo này sẽ giúp bạn dễ hình dung được UIPickerView là gì và chương trình sẽ hoạt động như thế nào.
Để thực hiện ví dụ này, thì bạn hãy thiết kế giao diện như minh hoạ ở trên đã nhé. Sau đó bạn hãy cùng mình thực hiện lần lượt theo các bước sau.

Khai báo

Đầu tiên, bạn cần thực hiện một số bước khai báo như sau:

• Bước 1: Để thiết lập dữ liệu, xây dựng và thao tác với UIPickerView, bạn cần tuân thủ 02 protocol:
  • UIPickerViewDelegate : cung cấp các hàm giúp bạn quản lý và thao tác với UIPickerView.
  • UIPickerViewDataSource : cung cấp các hàm giúp bạn thiết lập số dòng, số cột dữ liệu cho UIPickerView.
• Bước 2: Như mình đã nói ở trên, UIPickerView là một control thể hiện danh sách dữ liệu. Do đó bạn sẽ cần khai báo mảng chứa danh sách dữ liệu nguồn. Như sau:
  

delegate và dataSource

Sau khi thực hiện việc khai báo, bạn sẽ cần phải thiết lập delegate và dataSource cho UIPickerView. Có 02 cách để thực hiện điều này:

• Cách 1: bạn thiết lập delegate và dataSource bằng cách kéo thả trên giao diện. Bạn có thể xem minh hoạ bên dưới để biết cách thực hiện.
  
• Cách 2: bạn thiết lập bằng cách code thông qua thuộc tính delegate và dataSource của UIPickerView. Như sau:
  

➤ Lưu ý: Bạn không cần thực hiện cả hai cách đâu bạn nhé. Mà bạn chỉ cần chọn một trong hai cách ở trên để thực hiện mà thôi.

Khởi tạo UIPickerView

Để thiết lập dữ liệu nguồn và sử dụng UIPickerView thì bạn cần implementation ba phương thức sau của protocol:
Sau bước này bạn đã có thể chạy thử chương trình, lúc này UIPickerView đã có thể hiển thị được dữ liệu. Bạn có thể cuộn lên xuống để chọn dữ liệu, nhưng chưa thể bắt sự kiện trên UIPickerView đâu bạn nhé.

Thiết lập sự kiện cho UIPickerView

Sau khi khởi tạo, bạn đã có thể chạy thử nhưng chưa thể bắt sự kiện của control mỗi khi chọn một giá trị. Để bắt sự kiện mỗi khi giá trị được chọn, bạn cần implementation phương thức sau:
 OK, bây giờ bạn hãy chạy thử chương trình và chọn giá trị xem thế nào nhé.

Thêm, xoá, sửa, tìm kiếm trên UIPickerView

Hành động thêm, xoá, sửa, tìm kiếm trong UIPickerView thực chất là việc bạn thêm,xoá, sửa trên mảng dữ liệu nguồn. Vì vậy để xoá một dòng nào đó trong UIPickerView, bạn hãy xoá phần tử tương ứng trong mảng. Sau đó bạn hãy reload lại UIPickerView để thể hiện lại dữ liệu nguồn trên giao diện. Cách thực hiện như sau:
Trong đoạn code trên, mình đã thực hiện xoá một phần tử trong mảng dữ liệu nguồn. Còn thêm và sửa bạn cũng thực hiện tương tự nhé.

• Để thêm một dòng trên UIPickerView, bạn hãy thêm dữ liệu vào mảng dữ liệu nguồn. Sau đó thực hiện reload lại UIPickerView để hiển thị dữ liệu bạn mới thêm.
• Sửa cũng vậy, bạn sửa trực tiếp giá trị phần tử trong mảng dữ liệu nguồn. Sau đó cũng thực hiện reload lại UIPickerView để dữ liệu mới được cập nhật lên giao diện nhé.
• Tương tự như vậy cho tìm kiếm, để tìm kiếm thì bạn so sánh với mảng dữ liệu nguồn để xác định vị trí của phần tử trong mảng. Sau khi có vị trí rồi thì bạn thực hiện “cuộn” UIPickerView tới dòng tương ứng bằng lệnh sau:
  

Đến đây thì chương trình có thể tạm xem như hoàn tất. Các thao tác trên UIPickerView về cơ bản là như vậy, có thể hơi lạ đối với những bạn làm việc từ Windows Form chuyển sang, nhưng khi quen rồi thì bạn sẽ thấy cũng khá dễ thực hiện. Nhân tiện mình sẽ hướng dẫn bạn thêm một thao tác nữa trong UIPickerView nhé. Đó là tạo UIPickerView nhiều cột (bạn có thể xem lại phần demo ở trên để dễ hình dung).

UIPickerView nhiều cột (component)

Để tạo nhiều cột cho UIPickerView thì bạn hãy nhớ điều này giúp mình: “Mỗi một cột trên UIPickerView sẽ cần có một mảng dữ liệu nguồn để thể hiện lên giao diện. Do đó nếu bạn muốn tạo nhiều cột dữ liệu khác nhau, thì bạn cũng sẽ cần nhiều mảng dữ liệu nguồn tương ứng với số cột đó“.

• Bước 1: Đầu tiên bạn hãy khai báo thêm mảng chứa các giá trị nguồn cho cột mới. Ví dụ:
  
• Bước 2: Chỉnh sửa lại các phương thức trong phần “Khởi tạo UIPickerView”. Các phương thức cần điều chỉnh gồm:
  • Khai báo số lượng cột sẽ hiển thị trên UIPickerView.
    
  • Khai báo số dòng cho từng cột. Số dòng cho mỗi cột sẽ tương ứng với số phần tử trong mỗi mảng dữ liệu nguồn.
    
  • Xác định dữ liệu trả về trên mỗi cột.
    
• Bước 3: Xây dựng lại sự kiện để xác định dữ liệu được chọn trên từng dòng của mỗi cột.
  
• Bước 4: Thiết lập độ rộng của cột (nếu bạn muốn). Mặc định nếu UIPickerView có nhiều cột thì sẽ tự động chia đều kích thước sao cho độ rộng mỗi cột bằng nhau. Nhưng nếu bạn muốn thiết lập độ rộng mỗi cột khác nhau thì cần implementation phương thức sau.
  

Đến đây là hoàn tất các bước để xây dựng một UIPickerView có nhiều cột rồi. Bạn hãy chạy lại thử chương trình xem kết quả thế nào rồi comment cho mình biết với nhé. Ngoài ra bạn có thể tham khảo thêm một số thuộc tính và phương thức của UIPickerView ở bên dưới.

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 này mình đã trình bày nốt 02 control cuối cùng trong chuỗi bài viết về iOS Controls. Trong đó UIPickerView là control hơi khó thao tác hơn so với các control khác, nhưng cũng không phức tạp quá đến nỗi không làm được đúng không nào. Cho tới thời điểm này, mình đã giới thiệu tới bạn tổng cộng 14 loại control. Nếu nắm được hết 14 control này thì cũng tạm đủ để có thể viết các chương trình nho nhỏ rồi đó bạn.