Thanh tìm kiếm dính và hành vi tiêu đề phần tương tự như ứng dụng Danh bạ gốc

Question

Tôi muốn sao chép hành vi dính của thanh tìm kiếm trong ứng dụng Danh bạ iPhone.

Khi người dùng cuộn nhìn xuống, thanh tìm kiếm cũng đi xuống cùng với quan điểm:

Nếu người dùng cuộn lên, cuộn bảng cho phù hợp, với hai hành vi sau:

(1) thanh tìm kiếm vẫn còn được sửa ở đầu, và
(2) tiêu đề phần tiếp theo dừng lại một cách thích hợp bên dưới thanh tìm kiếm:

Khi tiêu đề phần tiếp theo đến, tiêu đề trước biến mất bên dưới thanh tìm kiếm:

Lưu ý: điều khiển chỉ mục phần (az ở bên phải) xuất hiện trên đầu thanh tìm kiếm. Ergo, fiddling với các contentInset sẽ đẩy kiểm soát chỉ số phần xuống cùng với nó.

Tôi đã tạo một tùy chỉnh UIViewController, đã thêm UITableView, đặt contentInset thành chiều cao của thanh tìm kiếm. Tôi đã tạo một UIView, đã thêm thanh tìm kiếm làm chế độ xem con của nó và sau đó thêm UIView vào số UITableView. Tuy nhiên, như đã lưu ý ở trên, khi người dùng đang cuộn, tiêu đề phần vẫn được gắn ở vị trí y bằng 0 và không ở chiều cao tiêu đề. Ngoài ra, vị trí kiểm soát chỉ mục phần tiêu đề bị ảnh hưởng bất lợi.

Tôi đánh giá cao giải pháp cho vấn đề này.

Answer 1

Có khá nhiều công việc để có mọi thứ đúng, nhưng tôi phải chứng minh rằng có thể tái tạo hành vi đó, ít nhất gần như.
Kiểm tra dự án này GitHub Tôi đã tạo: https://github.com/fabiankr/TableViewSearchBar

Trên thực tế, nó thậm chí không phải là phức tạp:
1) Thêm thanh tìm kiếm trực tiếp đến xem bảng và thiết lập của tableView contentInset
2) Trong -scrollViewDidScroll: điều chỉnh khung của thanh tìm kiếm

Có một số cảnh báo bạn phải quan tâm:
1) Khi cuộn chế độ xem bảng lên trên cùng, tiêu đề phần sẽ sớm xuất hiện phía trên thanh tìm kiếm. Để giải quyết nó, hãy đặt thanh tìm kiếm là zPosition khi cuộn đến đầu
2) Bộ điều khiển nội dung của bạn cần phải là phân lớp UIViewController thay vì UITableViewController, vì UISearchDisplayController thêm chế độ xem mờ vào giao diện của bộ điều khiển. Vì bộ điều khiển chế độ xem bảng 'view là chế độ xem bảng, chế độ xem mờ sẽ ở sai vị trí khi chế độ xem bảng được cuộn.

Một điều không thể thực hiện bằng cách sử dụng API công cộng là để kiểm soát chỉ mục phần ở bên phải của bảng chồng lên thanh tìm kiếm. Nó chỉ là một điều nhỏ và thậm chí không có nó, hành vi rất giống với hành vi được tìm thấy trong ứng dụng Danh bạ.

Để đạt được hành vi tương tự, bạn sẽ phải sử dụng API riêng tư. Có một phương pháp trên UITableView được gọi là _setPinsTableHeaderView: cần được sử dụng. Dự án mẫu chứa các triển khai cho cả hai: 1) chỉ API công khai và 2) API riêng tư để kiểm soát chỉ mục phần chồng lên thanh tìm kiếm.
Lời nhắc: Bạn không nên sử dụng API riêng tư khi bạn định gửi ứng dụng lên App Store!

Answer 2

Cách tôi đạt được hành vi này là bằng cách tách biểu mẫu ô nổi của tôi thành UITableView và biến nó thành chế độ xem con của UITableView và làm động ô nổi trong scrollViewDidScroll. Và chỉ cần như vậy UITableView cuộn xuống đủ xa để tiết lộ các tế bào nổi tôi cũng bị mắc kẹt một tế bào vô hình trong tableview được bao phủ bởi các tế bào nổi khi scrollViewDidScroll được gọi là.

- (void)viewDidLoad { 
    // add floating cell to tableview 
    FloatingCell *cell = [[FloatingCell alloc] init]; 
    [self.tableView addSubview:cell]; 
    self.floatingCell = cell; 
} 
// overwrite scrollViewDidScroll 
- (void)scrollViewDidScroll:(UIScrollView *)scrollView { 
    CGRect floatingCellFrame = floatingCell.frame; 
    CGFloat floatingCellHeight = floatingCellFrame.size.height; 

    // when contentOffset is is more then cellHeight scroll floating cell 
    if (scrollView.contentOffset.y > floatingCellHeight) { 
     floatingCellFrame.origin.y = -scrollView.contentOffset.y + floatingCellHeight; 

    // when contentOffset is less then cellHeight stick it to the top of UITableView 
    else if (scrollView.contentOffset.y < floatingCellHeight) 
     floatingCellFrame.origin.y = 0; 

    floatingCell.frame = floatingCellFrame; 
} 

Bạn có thể phải thêm điều kiện trường hợp góc hai khi cuộn để ô nổi không xuất hiện nhảy nhưng điều này sẽ bắt đầu. Chúc may mắn!