UISearchBar tăng chiều cao thanh điều hướng trong iOS 11

Tôi UISearchBarlà một phần của thanh điều hướng như:

 let searchBar = UISearchBar()
 //some more configuration to the search bar
 .....
 navigationItem.titleView = searchBar

Sau khi cập nhật lên iOS 11một điều gì đó kỳ lạ đã xảy ra với thanh tìm kiếm trong ứng dụng của tôi. Vào iOS 10và trước đó, tôi có thanh điều hướng của mình trông giống như:

Bây giờ với iOS 11tôi có:

Như bạn có thể thấy, có sự khác biệt trong cách làm tròn của hai thanh tìm kiếm, điều này không làm tôi khó chịu. Vấn đề là thanh tìm kiếm tăng chiều cao của thanh điều hướng. Vì vậy, khi tôi đi đến một bộ điều khiển khác, nó trông cũng kỳ lạ:

Trên thực tế, chiều cao của đường màu đen kỳ lạ đó cộng với chiều cao của thanh điều hướng hiện tại bằng với chiều cao của thanh điều hướng được hiển thị trong hình thứ hai ...

Bất kỳ ý tưởng nào về cách loại bỏ đường màu đen và có chiều cao thanh điều hướng nhất quán trên tất cả các bộ điều khiển chế độ xem?

Tôi nhận được dòng màu đen trong NavigationBar với SearchBar trong iOS 11 trong hai trường hợp:

• khi tôi đẩy một ViewControllers khác từ ViewController bằng UISearchBar

• khi tôi loại bỏ ViewController với UISearchBar với "kéo quyền để loại bỏ"

Giải pháp của tôi là: thêm mã này vào ViewController của tôi với UISearchBar:

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
    [self.navigationController.view setNeedsLayout]; // force update layout
    [self.navigationController.view layoutIfNeeded]; // to fix height of the navigation bar
}

Swift 4 Cập nhật

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.view.setNeedsLayout() // force update layout
    navigationController?.view.layoutIfNeeded() // to fix height of the navigation bar
}

Bạn có thể thêm giới hạn chiều cao 44 vào thanh tìm kiếm cho iOS 11.

// Swift

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

// Mục tiêu-C

if (@available(iOS 11.0, *)) {
    [searchBar.heightAnchor constraintEqualToConstant:44].active = YES;
}

Tôi tin rằng trong iOS 11 UISearchBar hiện có chiều cao bằng 56 và UINavigationBar sử dụng tự động thanh toán để phù hợp với các lượt xem phụ của nó, do đó nó tăng chiều cao. Nếu bạn vẫn muốn có UISearchBar làm titleView như trước iOS 11, tôi đã tìm ra cách tốt nhất để làm điều đó là nhúng UISearchBar vào một chế độ xem tùy chỉnh và đặt chiều cao của chế độ xem này thành 44 và gán nó cho navigationItem.titleView

class SearchBarContainerView: UIView {  

    let searchBar: UISearchBar  

    init(customSearchBar: UISearchBar) {  
        searchBar = customSearchBar  
        super.init(frame: CGRect.zero)  

        addSubview(searchBar)  
    }

    override convenience init(frame: CGRect) {  
        self.init(customSearchBar: UISearchBar())  
        self.frame = frame  
    }  

    required init?(coder aDecoder: NSCoder) {  
        fatalError("init(coder:) has not been implemented")  
    }  

    override func layoutSubviews() {  
        super.layoutSubviews()  
        searchBar.frame = bounds  
    }  
}  

class MyViewController: UIViewController {  

    func setupNavigationBar() {  
        let searchBar = UISearchBar()  
        let searchBarContainer = SearchBarContainerView(customSearchBar: searchBar)  
        searchBarContainer.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: 44)  
        navigationItem.titleView = searchBarContainer  
    }  
} 

thử mã này trên bộ điều khiển chế độ xem "ACKNOWLEDGMENTS" trong viewDidLoad

self.extendedLayoutIncludesOpaqueBars = true

Cảm ơn tất cả! Cuối cùng tôi đã tìm ra giải pháp.

Thêm mã sau vào ViewController với UISearchBar.

1. Bước đầu tiên: viewDidLoad

-(void)viewDidLoad
{
    [super viewDidLoad];
    self.extendedLayoutIncludesOpaqueBars = YES;
    ...
}

override func viewDidLoad() {
    super.viewDidLoad()
    self.extendedLayoutIncludesOpaqueBars = true
}

2. Bước thứ hai:viewWillDisappear

-(void)viewWillDisappear:(BOOL)animated{
    [super viewWillDisappear:animated];
     // force update layout
    [self.navigationController.view setNeedsLayout]; 
    // to fix height of the navigation bar
    [self.navigationController.view layoutIfNeeded];  
}

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        navigationController?.view.setNeedsLayout() // force update layout
        navigationController?.view.layoutIfNeeded() // to fix height of the navigation bar
    }

Trong Objective-C

if (@available(iOS 11.0, *)) {
        [self.searchBar.heightAnchor constraintLessThanOrEqualToConstant: 44].active = YES;
}              

Điều này cũng xảy ra với tôi, tất cả đều chạy tốt trong iOS 12.4 và trở nên kỳ lạ trong 13 điều ở trên. Vấn đề là trong iOS 13 chiều cao thanh điều hướng tăng từ 88 lên 100 sau khi nhảy từ UIViewController triển khai searchBar.

Hãy thử điều này trong UIViewController triển khai searchBar của bạn.

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.view.setNeedsLayout()
    navigationController?.view.layoutIfNeeded()
}

Xem trước sau khi sửa:

Xem trước trước khi sửa:

CHỈNH SỬA: Câu trả lời @zgjie là giải pháp tốt hơn cho vấn đề này: https://stackoverflow.com/a/46356265/1713123

Có vẻ như điều này xảy ra vì trong iOS 11, giá trị chiều cao mặc định của SearchBar đã được thay đổi thành 56, thay vì 44 trên các phiên bản iOS trước.

Hiện tại, tôi đã áp dụng cách giải quyết này, đặt chiều cao searchBar trở lại 44:

let barFrame = searchController.searchBar.frame
searchController.searchBar.frame = CGRect(x: 0, y: 0, width: barFrame.width, height: 44)    

Một giải pháp khác có thể là sử dụng thuộc tính searchController mới trên navigationItem trong iOS 11 :

navigationItem.searchController = searchController

Nhưng bằng cách này, da searchBar xuất hiện bên dưới tiêu đề điều hướng.

Tất cả các giải pháp không hoạt động với tôi vì vậy trước khi tôi đẩy bộ điều khiển chế độ xem, tôi đã làm:

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)

    self.navigationItem.titleView = UIView()
}

Và để hiển thị thanh tìm kiếm khi quay lại:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    self.navigationItem.titleView = UISearchBar()
}

Tôi không thể sử dụng giải pháp giữ navBar ở 44. Vì vậy, tôi đã mất một ngày nhưng cuối cùng, tôi đã tìm ra giải pháp không thay đổi chiều cao của thanh và vị trí nút ở giữa thanh. Vấn đề là các nút được đặt trong chế độ xem ngăn xếp được định cấu hình là chế độ xem ngăn xếp Ngang và do đó không điều chỉnh theo sự thay đổi chiều cao.

Điều này được thực hiện trên init:

UIBarButtonItem *cancelButton;
if (@available(iOS 11.0, *)) {
    // For iOS11 creating custom button to accomadate the change of navbar + search bar being 56 points
    self.navBarCustomButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [self.navBarCustomButton setTitle:@"Cancel"];
    [self.navBarCustomButton addTarget:self action:@selector(cancelButtonTapped) forControlEvents:UIControlEventTouchUpInside];
    cancelButton = [[UIBarButtonItem alloc] initWithCustomView:self.navBarCustomButton];
} else {
    cancelButton = [[UIBarButtonItem alloc] initWithTitle:MagicLocalizedString(@"button.cancel", @"Cancel")
                                                                                         style:UIBarButtonItemStylePlain
                                                                                        target:self
                                                                                        action:@selector(cancelButtonTapped)];
}

trên viewWillApear (hoặc bất kỳ lúc nào sau khi chế độ xem được thêm vào ngăn xếp điều hướng)

   if (@available(iOS 11.0, *)) {
        UIView *buttonsStackView = [navigationController.navigationBar subviewOfClass:[UIStackView class]];
        if (buttonsStackView ) {
            [buttonsStackView.centerYAnchor constraintEqualToAnchor:navigationController.navigationBar.centerYAnchor].active = YES;
            [self.navBarCustomButton.heightAnchor constraintEqualToAnchor:buttonsStackView.heightAnchor];
        }
    }

Và subviewOfClass là một danh mục trên UIView:

- (__kindof UIView *)subviewOfClass:(Class)targetClass {
     // base case
     if ([self isKindOfClass:targetClass]) {
        return self;
     }

     // recursive
    for (UIView *subview in self.subviews) {
        UIView *dfsResult = [subview subviewOfClass:targetClass];

        if (dfsResult) {
           return dfsResult;
       }
   }
   return nil;
}

Tất cả những gì bạn phải làm là phân lớp UISearchBar và ghi đè "nội tạiContentSize":

@implementation CJSearchBar
-(CGSize)intrinsicContentSize{
    CGSize s = [super intrinsicContentSize];
    s.height = 44;
    return s;
}
@end

Không thể bình luận, nhưng muốn chia sẻ một số vấn đề bổ sung mà tôi gặp phải trong khi dành nhiều giờ cố gắng tìm hiểu sâu vấn đề này ngay cả sau khi sử dụng một trong các giải pháp khác.

Có vẻ như cách khắc phục tốt nhất cho tôi là câu trả lời của Andrew :

override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear(animated)
    navigationController?.view.setNeedsLayout() // force update layout
    navigationController?.view.layoutIfNeeded() // to fix height of the navigation bar
}

Tuy nhiên, ít nhất là trong iOS 12.1 , nếu UINavigationBar:

• đã isTranslucentđược đặt thành false, Bộ điều khiển Chế độ xem với thanh tìm kiếm dường như không điều chỉnh lại bố cục của chế độ xem khi loại bỏ tương tác (loại bỏ thông thường thông qua nút quay lại dường như hoạt động).
• đã đặt hình nền bằng cách sử dụng setBackgroundImage(UIImage(), for: .default), hoạt ảnh chuyển tiếp không hoạt động bình thường và sẽ nhảy trở lại vị trí của nó sau khi kết thúc.

Tuy nhiên, những thuộc tính cụ thể này đã được thiết lập để khiến Thanh điều hướng xuất hiện theo một cách nhất định, vì vậy tôi cần thực hiện một số điều chỉnh để khôi phục nó hoặc khắc phục hành vi kỳ lạ. Sẽ cố gắng nhớ cập nhật ở trên nếu tôi gặp phải bất kỳ điều gì khác hoặc tìm thấy các giải pháp khác hoặc sự khác biệt trong các phiên bản hệ điều hành khác.

Trong trường hợp của tôi, chiều cao của UINavigationBar lớn hơn không phải là vấn đề đối với tôi. Tôi chỉ cần thiết kế lại các mục nút thanh bên trái và bên phải. Đó là giải pháp tôi đã đưa ra:

- (void)iOS11FixNavigationItemsVerticalAlignment
{
    [self.navigationController.navigationBar layoutIfNeeded];

    NSString * currSysVer = [[UIDevice currentDevice] systemVersion];
    if ([currSysVer compare:@"11" options:NSNumericSearch] != NSOrderedAscending)
    {
        UIView * navigationBarContentView;
        for (UIView * subview in [self.navigationController.navigationBar subviews])
        {
            if ([subview isKindOfClass:NSClassFromString(@"_UINavigationBarContentView")])
            {
                navigationBarContentView = subview;
                break;
            }
        }

        if (navigationBarContentView)
        {
            for (UIView * subview in [navigationBarContentView subviews])
            {
                if (![subview isKindOfClass:NSClassFromString(@"_UIButtonBarStackView")]) continue;

                NSLayoutConstraint * topSpaceConstraint;
                NSLayoutConstraint * bottomSpaceConstraint;

                CGFloat topConstraintMultiplier = 1.0f;
                CGFloat bottomConstraintMultiplier = 1.0f;

                for (NSLayoutConstraint * constraint in navigationBarContentView.constraints)
                {
                    if (constraint.firstItem == subview && constraint.firstAttribute == NSLayoutAttributeTop)
                    {
                        topSpaceConstraint = constraint;
                        break;
                    }

                    if (constraint.secondItem == subview && constraint.secondAttribute == NSLayoutAttributeTop)
                    {
                        topConstraintMultiplier = -1.0f;
                        topSpaceConstraint = constraint;
                        break;
                    }
                }

                for (NSLayoutConstraint * constraint in navigationBarContentView.constraints)
                {
                    if (constraint.firstItem == subview && constraint.firstAttribute == NSLayoutAttributeBottom)
                    {
                        bottomSpaceConstraint = constraint;
                        break;
                    }

                    if (constraint.secondItem == subview && constraint.secondAttribute == NSLayoutAttributeBottom)
                    {
                        bottomConstraintMultiplier = -1.0f;
                        bottomSpaceConstraint = constraint;
                        break;
                    }
                }

                CGFloat contentViewHeight = navigationBarContentView.frame.size.height;
                CGFloat subviewHeight = subview.frame.size.height;
                topSpaceConstraint.constant = topConstraintMultiplier * (contentViewHeight - subviewHeight) / 2.0f;
                bottomSpaceConstraint.constant = bottomConstraintMultiplier * (contentViewHeight - subviewHeight) / 2.0f;
            }
        }
    }
}

Về cơ bản, chúng tôi tìm kiếm các khung nhìn ngăn xếp có chứa các mục nút thanh và sau đó thay đổi các giá trị ràng buộc trên cùng và dưới cùng của chúng. Vâng, đó là một cuộc tấn công bẩn thỉu và sẽ không khuyên bạn nên sử dụng nó nếu bạn có thể khắc phục sự cố của mình theo bất kỳ cách nào khác.

//
//  Created by Sang Nguyen on 10/23/17.
//  Copyright © 2017 Sang. All rights reserved.
//

import Foundation
import UIKit

class CustomSearchBarView: UISearchBar {
    final let SearchBarHeight: CGFloat = 44
    final let SearchBarPaddingTop: CGFloat = 8
    override open func awakeFromNib() {
        super.awakeFromNib()
        self.setupUI()
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.setupUI()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
       // fatalError("init(coder:) has not been implemented")
    }
    func findTextfield()-> UITextField?{
        for view in self.subviews {
            if view is UITextField {
                return view as? UITextField
            } else {
                for textfield in view.subviews {
                    if textfield is UITextField {
                        return textfield as? UITextField
                    }
                }
            }
        }
        return nil;
    }
    func setupUI(){
        if #available(iOS 11.0, *) {
            self.translatesAutoresizingMaskIntoConstraints = false
            self.heightAnchor.constraint(equalToConstant: SearchBarHeight).isActive = true
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        if #available(iOS 11.0, *) {
            if let textfield = self.findTextfield() {
                textfield.frame = CGRect(x: textfield.frame.origin.x, y: SearchBarPaddingTop, width: textfield.frame.width, height: SearchBarHeight - SearchBarPaddingTop * 2)`enter code here`
                return
            }
        }
    }
}

Tôi thấy giải pháp của Mai Mai là giải pháp duy nhất thực sự có thể sử dụng được.
Tuy nhiên, nó vẫn chưa hoàn hảo:
Khi xoay thiết bị, thanh tìm kiếm không được thay đổi kích thước phù hợp và vẫn ở kích thước nhỏ hơn.

Tôi đã tìm thấy một bản sửa lỗi cho điều đó. Đây là mã của tôi trong Mục tiêu C với các phần liên quan được chú thích:

// improvements in the search bar wrapper
@interface SearchBarWrapper : UIView
@property (nonatomic, strong) UISearchBar *searchBar;
- (instancetype)initWithSearchBar:(UISearchBar *)searchBar;
@end
@implementation SearchBarWrapper
- (instancetype)initWithSearchBar:(UISearchBar *)searchBar {
    // setting width to a large value fixes stretch-on-rotation
    self = [super initWithFrame:CGRectMake(0, 0, 4000, 44)];
    if (self) {
        self.searchBar = searchBar;
        [self addSubview:searchBar];
    }
    return self;
}
- (void)layoutSubviews {
    [super layoutSubviews];
    self.searchBar.frame = self.bounds;
}
// fixes width some cases of resizing while search is active
- (CGSize)sizeThatFits:(CGSize)size {
    return size;
}
@end

// then use it in your VC
@implementation MyViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationItem.titleView = [[SearchBarWrapper alloc] initWithSearchBar:self.searchController.searchBar];
}
@end

Bây giờ vẫn còn một trường hợp mà tôi chưa tìm ra. Để tạo lại, hãy làm như sau:
- bắt đầu ở chế độ dọc
- kích hoạt trường tìm kiếm
- xoay sang ngang
- lỗi: thanh không thay đổi kích thước

Tôi đã sửa lỗi này bằng cách thêm ràng buộc vào viewDidAppear trên bộ điều khiển chế độ xem bản đồ nơi thanh tìm kiếm được nhúng

public override func viewDidAppear(_ animated: Bool) {
    if #available(iOS 11.0, *) {

        resultSearchController?.searchBar.heightAnchor.constraint(equalToConstant: 44).isActive = true
        // searchBar.heightAnchor.constraint(equalToConstant: 44).isActive = true
    }
}

Xin chào những người sử dụng UISearchControllervà sau đó gắn nó UISearchBarvàonavigationItem.titleView . Tôi đã dành 4-5 giờ điên cuồng trong ngày để giải quyết vấn đề này. Sau khi iOS 11 + cách tiếp cận đề nghị, được đặt searchControllervào navigation.searchControllerkhông chỉ phù hợp với trường hợp của tôi. Màn hình có searchController / searchBar này có backButton, một tùy chỉnh.

Tôi đã thử nghiệm điều này trong iOS 10, iOS 11 và 12. Trên các thiết bị khác nhau. Tôi chỉ cần phải. Tôi không thể về nhà mà không giải được con quỷ này. Đây là điều hoàn hảo nhất mà tôi có thể làm cho ngày hôm nay, với thời hạn eo hẹp của tôi.

Vì vậy, tôi chỉ muốn chia sẻ công việc khó khăn này mà tôi đã làm, tùy thuộc vào bạn để đưa mọi thứ vào bất cứ nơi nào bạn muốn (ví dụ: các biến trong viewModel của bạn). Nó đi từ đây:

Trong màn hình đầu tiên của tôi (giả sử màn hình chính, không có bộ điều khiển tìm kiếm này), tôi có cái này trong của tôi viewDidLoad().

self.extendedLayoutIncludesOpaqueBars = true

Trong màn hình thứ hai của tôi, cái có searchController, tôi có cái này trong của tôi viewDidAppear.

ghi đè func viewDidAppear (_ animation: Bool) {super.viewDidAppear (hoạt hình)

    let systemMajorVersion = ProcessInfo.processInfo.operatingSystemVersion.majorVersion
    if systemMajorVersion < 12 {
        // Place the search bar in the navigation item's title view.
        self.navigationItem.titleView = self.searchController.searchBar
    }

    if systemMajorVersion >= 11 {

        self.extendedLayoutIncludesOpaqueBars = true

        UIView.animate(withDuration: 0.3) {
            self.navigationController?.navigationBar.setNeedsLayout()
            self.navigationController?.navigationBar.layoutIfNeeded()
        }

        self.tableView.contentInset = UIEdgeInsets(top: -40, left: 0, bottom: 0, right: 0)

        if self.viewHadAppeared {
            self.tableView.contentInset = .zero
        }
    }

    self.viewHadAppeared = true // this is set to false by default.
}

và đây là khai báo của tôi searchController:

lazy var searchController: UISearchController = {
    let searchController = UISearchController(searchResultsController: nil)
    searchController.hidesNavigationBarDuringPresentation = false
    searchController.dimsBackgroundDuringPresentation = false
    searchController.searchBar.textField?.backgroundColor = .lalaDarkWhiteColor
    searchController.searchBar.textField?.tintColor = .lalaDarkGray
    searchController.searchBar.backgroundColor = .white
    return searchController
}()

Vì vậy, tôi hy vọng điều này sẽ giúp ai đó một ngày nào đó.

Tôi đã thử nhiều cách khác nhau để lấy lại kích thước như 44 ban đầu, nhưng sau đó thanh tìm kiếm luôn trông và hoạt động kỳ lạ - như bị kéo dài ra xa, lệch y và giống nhau.

Tôi đã tìm thấy một giải pháp hay ở đây (thông qua một số bài đăng stackoverflow khác): https://github.com/DreamTravelingLight/searchBarDemo

Chỉ cần lấy bộ điều khiển xem của bạn từ SearchViewController và đưa vào dự án của bạn các lớp SearchViewController và WMSearchbar. Làm việc hiệu quả cho tôi mà không có bất kỳ xấu xí nào nếu (iOS11) khác ... xấu xí.

Trong trường hợp của tôi, tôi phải giảm chiều cao của textField 36pt -> 28pt.

Vì vậy, tôi đã cố gắng thay đổi chiều cao của khung, chiều cao của lớp. Nhưng các cách đã không hoạt động.

Cuối cùng, tôi đã tìm ra giải pháp đó là mặt nạ. Tôi nghĩ, đó không phải là một cách hay nhưng nó có hiệu quả.

    let textField              = searchBar.value(forKey: "searchField") as? UITextField
    textField?.font            = UIFont.systemFont(ofSize: 14.0, weight: .regular)
    textField?.textColor       = #colorLiteral(red: 0.1960784314, green: 0.1960784314, blue: 0.1960784314, alpha: 1)
    textField?.textAlignment   = .left

    if #available(iOS 11, *) {
        let radius: CGFloat           = 5.0
        let magnifyIconWidth: CGFloat = 16.0
        let inset                     = UIEdgeInsets(top: 4.0, left: 0, bottom: 4.0, right: 0)

        let path = CGMutablePath()
        path.addArc(center: CGPoint(x: searchBar.bounds.size.width - radius - inset.right - magnifyIconWidth, y: inset.top + radius), radius: radius, startAngle: .pi * 3.0/2.0, endAngle: .pi*2.0, clockwise: false)                        // Right top
        path.addArc(center: CGPoint(x: searchBar.bounds.size.width - radius - inset.right - magnifyIconWidth, y: searchBar.bounds.size.height - radius - inset.bottom), radius: radius, startAngle: 0, endAngle: .pi/2.0, clockwise: false)  // Right Bottom
        path.addArc(center: CGPoint(x: inset.left + radius, y: searchBar.bounds.size.height - radius - inset.bottom), radius: radius, startAngle: .pi/2.0, endAngle: .pi, clockwise: false)                                                  // Left Bottom
        path.addArc(center: CGPoint(x: inset.left + radius, y: inset.top + radius),  radius: radius, startAngle: .pi, endAngle: .pi * 3.0/2.0, clockwise: false)                                                                             // Left top

        let maskLayer      = CAShapeLayer()
        maskLayer.path     = path
        maskLayer.fillRule = kCAFillRuleEvenOdd

        textField?.layer.mask = maskLayer
    }

Bạn có thể thay đổi nội dung, nếu bạn muốn thay đổi khung của textField.