Hướng dẫn tạo Indexed trong TableView

65

Indexed table là công cụ hiển thị bằng những ký tự hoặc con số, cái mà giúp cho user có thể bấm vào và tự động cuộn đến mục tương ứng trong tableView. Thông thường, một danh sách các index nằm bên tay phải cạnh màn hình. Trong bài hướng dẫn này, chúng ta sẽ hiển thị những con số trong trong tableView và dùng các số nhỏ hơn để hiển thị danh sách index.

Trong hướng dẫn này, ở main.storyboard các bạn có thể dùng ViewController hoặc TableViewController, trường hợp nếu dùng ViewController thì chúng ta sẽ kéo thả một UITableView vào và kết nối tới file quản trị của ViewController, sau đó, ViewController này sẽ implement 2 protocol là UITableViewDataSource và UITableViewDelegate.

Trong cả 2 trường hợp trên, chúng ta cần phải đặt Identifier cho cell:

1431681662941

 

Trong bài viết này, chúng ta sẽ sử dụng trường hợp TableViewController.

Trong class này, chúng ta sẽ khởi tạo 2 biến ở vị trí toàn cục như sau:

Tiếp theo, trong hàm viewDidLoad() chúng ta sẽ khai báo như sau:

Với hàm componentSeperatedByString của Array chúng ta có thể nhanh chóng đưa một loạt các số vào trong mảng. Kế tiếp, gọi các hàm datasource và delegate.

Ở đây chúng ta sẽ cho số dòng trong mỗi section là 1:


Số lượng section trong tableView sẽ là số lượng của mảng indexOfNumbers:

Tiếp theo, chúng ta sẽ cấu hình mỗi cell trong tableView như sau:

Để hiển thị được indexed tableView, chúng ta cần implement 2 method:

Thứ nhất là sectionIndexTitlesForTableView để hiển thị title cho index:

và tableView:sectionForSectionIndexTitle:atIndex:

Hàm này sẽ trả về index của section tương ứng với title và section title index hiện tại. Biến temp được tạo để sử dụng hàm indexOfObject của Array. Build và run ứng dụng bạn sẽ thấy kết quả như sau:

1431717806123

 Nguồn IDE Academy via ioscreator.com