iOS 11 SearchBar trong NavigationBar

Question

Với iOS 11 Apple đã thiết kế lại UISearchBar bằng cách làm cho các góc tròn hơn và chiều cao lớn hơn. Thêm một UISearchBar vào navigationBar khá đơn giản bằng cách chỉ cần đặt nó là titleView của navigationItem sử dụng navigationItem.titleView = searchBar.

Tuy nhiên, trong iOS 11 nó dường như không hoạt động như mong đợi. Hãy nhìn vào màn hình mà chúng ta so sánh các thiết lập tương tự sử dụng iOS 10 và iOS 11

iOS 10

iOS 11

Bạn có thể thấy rõ rằng thanh tìm kiếm tăng kích thước của NavigationBar nhưng các nút trên thanh không được căn chỉnh chính xác. Ngoài ra thanh tìm kiếm không sử dụng không gian còn trống ở bên trái nữa.

Đặt thanh tìm kiếm vào chế độ xem trình bao bọc để nhận nút hủy trên iPad như được mô tả ở đây Cancel button is not shown in UISearchBar cũng không hoạt động nữa vì thanh tìm kiếm sẽ không hiển thị.

Nếu có ai có vấn đề tương tự hoặc đã biết cách sửa chữa/cải thiện điều này, tôi sẽ rất biết ơn.

Điều này được xây dựng bằng cách sử dụng Xcode 9 Beta 4. Có thể các bản phát hành trong tương lai sẽ khắc phục sự cố này.

UPDATE:

Vì đây không được cố định, chúng tôi quyết định sử dụng sau đây giải pháp. Chúng tôi đã thêm một UIBarButtonItem mới vào NavBar và khi nó được nhấn, chúng tôi sẽ trình bày một ViewController mới, nơi chúng tôi chỉ đặt một thanh tìm kiếm và không có gì khác vào thanh điều hướng có vẻ tốt. Sử dụng câu trả lời đã chọn có thể là giải pháp tốt nhất vì Apple với iOS 11 muốn chúng tôi sử dụng thiết kế mới này ngay cả khi nó không cung cấp cho chúng tôi kết quả mà chúng tôi mong muốn ban đầu. Một cách khác để giải quyết vấn đề này có thể là một SearchBar tùy chỉnh nhưng đây là một chủ đề khác.

Answer 1

Có một tài sản searchController mới trên navigationItem trong iOS 11.

https://developer.apple.com/documentation/uikit/uinavigationitem/2897305-searchcontroller

Sử dụng như thế này ...

if #available(iOS 11.0, *) { 
    navigationItem.searchController = searchController 
} else { 
    // Fallback on earlier versions 
    navigationItem.titleView = searchController?.searchBar 
} 

Trong Objective-C nếu tuyên bố có dạng như sau:

if (@available(iOS 11.0, *)) { 

Trên iOS 11, i Nếu bạn không đặt navigationItem.hidesSearchBarWhenScrolling = false, thanh tìm kiếm ban đầu có thể bị ẩn, trừ khi người dùng cuộn xuống để tiết lộ nó. Nếu bạn đặt nó thành false, nó sẽ xuất hiện xếp chồng bên dưới, nơi tiêu đề sẽ đi mà không cần người dùng phải cuộn.

Answer 2

Tôi nghĩ bạn sẽ phải đối phó với việc thiết lập thuộc tính UINavigationItem.searchController mới thành đối tượng UISearchController của bạn. Đó là cách bạn có được hiệu ứng mới như trong Tin nhắn. Có vẻ như hành vi cũ chỉ đơn giản biến mất. Tôi hy vọng tôi là sai, nhưng toàn bộ API đã được sửa chữa lớn cho 11. Tôi biết nó là lỗi nói chung vì vậy chúng ta sẽ thấy với beta mới hơn và GM nếu điều này được cố định. (Viết tại thời điểm Beta 6)

Answer 3

Tôi đã gặp vấn đề tương tự và sau một vài ngày googling vấn đề, tôi tìm thấy trang này - https://translate.google.com/translate?hl=en&sl=zh-CN&u=http://www.jianshu.com/p/262f6e34a7d3&prev=search.

Trang này dẫn đến git repo này - https://github.com/DreamTravelingLight/searchBarDemo - dự án demo này cho thấy cách sử dụng cách cũ với titleView để vẫn có thanh tìm kiếm không có vấn đề về kích thước.

Các dòng chính là những

_searchBar = [self addSearchBarWithFrame:CGRectMake(0, 0, kScreenWidth - 2 * 44 - 2 * 15, 44)]; 
UIView *wrapView = [[UIView alloc] initWithFrame:_searchBar.frame]; 
[wrapView addSubview:_searchBar]; 
self.navigationItem.titleView = wrapView; 

Nếu bạn đã nhúng UISearchBar bên trong một cái nhìn, và thiết lập rằng wrapView như titleView, UISearchBar sẽ có kích thước bạn đặt cho nó, và sẽ phù hợp với thanh nav như dự định.

Cảm ơn, David

Answer 4

Bạn có thể thay đổi chiều cao của UISearchBar trong iOS 11 bằng cách thêm một hạn chế về chiều cao 44:

if #available(iOS 11.0, *) { 
    searchBar.heightAnchor.constraint(equalToConstant: 44.0).isActive = true 
} 

Answer 5

này đã giúp tôi:

if ([self.navigationItem respondsToSelector:@selector(setSearchController:)]) 
    { 
     [self.navigationItem performSelector:@selector(setSearchController:) withObject:self.searchController]; 
    } 
    else 
    { 
     self.tableView.tableHeaderView = self.searchController.searchBar; 
    }