UISearchBar, iOS 11'de gezinme çubuğu yüksekliğini artırır

Benim var UISearchBargibi gezinme çubuğunun varlık bölümünü:

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

Güncellemeden sonra iOS 11uygulamamdaki arama çubuğuna garip bir şey oldu. Tarih iOS 10ve öncesinde gezinme çubuğum şöyle görünüyordu:

Şimdi iOS 11elimde:

Gördüğünüz gibi iki arama çubuğunun yuvarlanmasında beni rahatsız etmeyen bir fark var. Sorun, arama çubuğunun gezinme çubuğunun yüksekliğini artırmasıdır. Yani başka bir kumandaya gittiğimde bu da tuhaf görünüyor:

Aslında garip siyah çizginin yüksekliği artı mevcut gezinme çubuğunun yüksekliği, ikinci resimde gösterilen gezinme çubuğunun yüksekliğine eşittir ...

Siyah çizgiden nasıl kurtulacağınız ve tüm görüntü denetleyicilerinde tutarlı gezinme çubuğu yüksekliğine sahip olma konusunda herhangi bir fikriniz var mı?

İki durumda iOS 11'de SearchBar ile NavigationBar altında siyah çizgi var:

• ViewController'dan UISearchBar ile başka bir ViewController'ı ittiğimde

• ViewController'ı "kapatmak için sağa sürükleyin" ile UISearchBar ile kapattığımda

Çözümüm şuydu: Bu kodu UISearchBar ile ViewController'ıma eklemek:

-(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 Güncellemesi

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

İOS 11 için arama çubuğuna 44 yükseklik kısıtlaması ekleyebilirsiniz.

// Swift

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

// Amaç-C

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

İOS 11'de UISearchBar'ın yüksekliği 56'ya eşit olduğuna inanıyorum ve UINavigationBar, alt görünümlerine sığdırmak için otomatik düzen kullanır, dolayısıyla yüksekliği artırır. Hala iOS 11 öncesi gibi titleView olarak UISearchBar'a sahip olmak istiyorsanız, bunu yapmanın en iyi yolunun UISearchBar'ı özel bir görünüme gömmek ve bu görünümün yüksekliğini 44'e ayarlamak ve bunu navigationItem.titleView'e atamak olduğunu buldum.

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  
    }  
} 

viewDidLoad'daki "ACKNOWLEDGMENTS" görüntüleme denetleyicisinde bu kodu deneyin

self.extendedLayoutIncludesOpaqueBars = true

Hepinize teşekkür ederim! Sonunda bir çözüm buldum.

UISearchBar ile ViewController'a aşağıdaki kodu ekleme.

1. İlk adım: viewDidLoad

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

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

2. İkinci adım: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
    }

Objective-C'de

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

Bu benim de başıma geliyor, hepsi iOS 12.4'te iyi çalışıyor ve yukarıdaki 13'te tuhaflaşıyor. Sorun, iOS 13 gezinme çubuğu yüksekliğinin searchBar uygulayan UIViewController'dan atlandıktan sonra 88'den 100'e çıkmasıdır.

Bunu searchBar uygulayan UIViewController cihazınızda deneyin.

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

Düzelttikten sonra önizleme:

Düzeltmeden önce önizleyin:

DÜZENLEME: @zgjie yanıtı bu sorun için daha iyi bir çözüm: https://stackoverflow.com/a/46356265/1713123

Görünüşe göre bu, iOS 11'de SearchBar'ın varsayılan yükseklik değerinin önceki iOS sürümlerinde 44 yerine 56 olarak değiştirilmesinden kaynaklanıyor.

Şimdilik, searchBar yüksekliğini 44'e geri ayarlayarak bu geçici çözümü uyguladım:

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

Başka bir çözüm , iOS 11'de navigationItem üzerindeki yeni searchController özelliğini kullanmak olabilir :

navigationItem.searchController = searchController

Ancak bu şekilde searchBar gezinme başlığının altında görünür.

Tüm çözümler benim için işe yaramadı, bu yüzden görüntüleme denetleyicisini çalıştırmadan önce yaptım:

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

    self.navigationItem.titleView = UIView()
}

Ve geri dönerken arama çubuğunu göstermek için:

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

    self.navigationItem.titleView = UISearchBar()
}

NavBar'ı 44'te tutma çözümünü kullanamadım. Bu yüzden bir günümü aldı ama sonunda çubuğun yüksekliğini değiştirmeyen ve düğmeyi çubuğun ortasına yerleştiren bir çözüm buldum. Sorun, düğmelerin Yatay yığın görünümü olarak yapılandırılmış bir yığın görünümüne yerleştirilmesi ve bu nedenle yükseklik değişikliğine ayarlanmamasıdır.

Bu, init üzerinde yapılır:

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)];
}

viewWillApear'da (veya görünüm gezinme yığınına eklendikten sonra herhangi bir zamanda)

   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];
        }
    }

Ve subviewOfClass, UIView'deki bir kategoridir:

- (__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;
}

Tek yapmanız gereken, UISearchBar'ı alt sınıflamak ve "intrinsicContentSize" değerini geçersiz kılmaktır:

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

Yorum yapamıyorum, ancak diğer çözümlerden birini kullandıktan sonra bile bu sorunun altına inmeye çalışırken saatler harcarken karşılaştığım bazı ek sorunları paylaşmak istedim.

Görünüşe göre benim için en iyi çözüm Andrew'un cevabı oldu :

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

Ancak, en azından iOS 12.1'de , eğer UINavigationBar:

• etti isTranslucentayarlıfalse , arama çubuğuna sahip Görünüm Denetleyicisi, etkileşimli olarak kapatıldığında görünümün düzenini geri alamıyor gibi görünüyor (geri düğmesi ile normal kapatma işe yarıyor gibi görünüyor).
• kullanılarak ayarlanmış arka plan görüntüsü var mı setBackgroundImage(UIImage(), for: .default) , geçiş animasyonu düzgün çalışmıyor ve bittikten sonra konumuna geri dönüyor.

Bu belirli özellikler, Gezinme Çubuğunun belirli bir şekilde görünmesini sağlayacak şekilde ayarlandı, bu yüzden onu geri almak için bazı ayarlamalar yapmam veya garip davranışa katlanmam gerekiyor. Başka bir şeyle karşılaşırsam veya diğer işletim sistemi sürümlerinde başka çözümler veya farklılıklar bulursam yukarıdakileri güncellemeyi hatırlamaya çalışacak.

Benim durumumda, daha büyük UINavigationBar yüksekliği benim için sorun değildi. Sadece sol ve sağ çubuk düğme öğelerini yeniden hizalamam gerekiyordu. Bulduğum çözüm bu:

- (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;
            }
        }
    }
}

Temel olarak, çubuk düğme öğeleri içeren yığın görünümleri ararız ve ardından bunların üst ve alt sınırlama değerlerini değiştiririz. Evet, bu bir kir saldırısı ve sorununuzu başka bir şekilde çözebiliyorsanız kullanmanızı önermeyecektir.

//
//  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
            }
        }
    }
}

Mai Mai'nin çözümünü gerçekten kullanılabilir olan tek çözüm olarak buldum.
Ancak yine de mükemmel değil:
Cihazı döndürürken, arama çubuğu düzgün şekilde yeniden boyutlandırılmaz ve daha küçük boyutta kalır.

Bunun için bir düzeltme buldum. İşte Hedef C'deki kodum, ilgili bölümlere açıklama eklenmiş:

// 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

Şimdi hala çözmediğim bir vaka kaldı. Yeniden oluşturmak için aşağıdakileri yapın:
- dikeyde başlayın
- arama alanını etkinleştirin
- manzaraya çevirin
- hata: çubuk yeniden boyutlandırılmıyor

Bunu, arama çubuğunun gömülü olduğu harita görünümü denetleyicisine viewDidAppear kısıtlamasını ekleyerek düzelttim

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
    }
}

Merhaba kullanır insanlara UISearchControllerve sonra da takılarak UISearchBariçin navigationItem.titleView. Bunu çözmek için günün 4-5 saatini çılgınca harcadım. İOS 11+ önerilen yaklaşımı takip ederek searchController,navigation.searchController benim durumum için doğru değil. Bu searchController / searchBar'ın bulunduğu ekran, özel bir backButton'a sahiptir.

Bunu iOS 10, iOS 11 ve 12'de farklı cihazlarda test ettim. Sadece mecburdum. Bu şeytanı çözmeden eve gidemem. Sıkı teslim tarihim göz önüne alındığında, bugün yapabileceğim en mükemmel şey bu.

Bu yüzden, yaptığım bu sıkı çalışmayı paylaşmak istiyorum, her şeyi istediğiniz yere koymak size kalmış (örneğin, viewModel'inizdeki değişkenler). İşte gidiyor:

İlk ekranımda (diyelim ki bu arama denetleyicisine sahip olmayan ana ekran), bu benim viewDidLoad().

self.extendedLayoutIncludesOpaqueBars = true

SearchController'a sahip ikinci ekranımda, bu benim viewDidAppear .

func viewDidAppear'ı geçersiz kıl (_ animated: Bool) {super.viewDidAppear (animasyonlu)

    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.
}

ve işte searchController'ın beyanı:

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
}()

Umarım bu bir gün birine yardımcı olur.

Boyutu orijinal 44'e geri getirmek için çeşitli şeyler denedim, ancak daha sonra arama çubuğu her zaman tuhaf görünüyor ve davranıyor - çok uzatılmış, y-ofset ve benzeri gibi.

Burada güzel bir çözüm buldum (başka bir stackoverflow gönderisiyle): https://github.com/DreamTravelingLight/searchBarDemo

Viewcontroller'ınızı SearchViewController'dan türetmeniz ve projenize SearchViewController ve WMSearchbar sınıflarını dahil etmeniz yeterlidir. (İOS11) başka bir çirkinlik olmadan benim için kutudan çıktı ... çirkinlik.

Benim durumumda, textField'ın yüksekliğini 36pt -> 28pt düşürmem gerekiyor.

Bu yüzden çerçevenin yüksekliğini, katman yüksekliğini değiştirmeye çalıştım. Ancak yollar işe yaramadı.

Sonunda maske olan bir çözüm buldum. Bence bu iyi bir yol değil ama işe yarıyor.

    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
    }

TextField çerçevesini değiştirmek isterseniz iç metinleri değiştirebilirsiniz.