UISearchBar 一旦被点击就会跳出位置

Question

我正在尝试显示 MySearchBar（UISearchBar 添加了 UILabel 以显示标题）作为 navigationItem 的视图：

// Make search bar autoresize and occupy maximum width
self.navigationItem.titleView = [[UIView alloc] initWithFrame:self.navigationController.navigationBar.bounds];
self.navigationItem.titleView.autoresizingMask = UIViewAutoresizingFlexibleWidth;
[self.navigationItem.titleView addSubview:self.mySearchBar.view];
self.mySearchBar.view.frame = self.navigationItem.titleView.frame;

搜索栏会保持原位，直到被点击。点击后，它向下移动，不再占据整个宽度（缺少大约 16px）。

编辑前（外观应该如何）：

编辑开始（BUG - 点击搜索栏后高度增加到默认的 56 像素并失去宽度）：

编辑结束（仍然错位）

这里是MySearchBar的初始化代码。它由两个主要视图组成，titleView 用标题包装 UILabel 和 searchBarWrapperView 包装 UISearchBar:

-(id) init {
    // Initialize the two wrapping views
    UIView *titleView = [UIView new];
    self.searchBarWrapperView = [UIView new];

    // Resize UILabel to fit its content
    self.titleLabel = [UILabel new];
    self.titleLabel.numberOfLines = 0;
    [self.titleLabel sizeToFit];

    self.searchBar = self.searchController.searchBar;
    self.searchBarTextField = [self.searchBar valueForKey:@"searchField"];// This could be the text field that gets displaced???

    // Add two main subviews (wrappers)
    [self.view addSubview:titleView];
    [self.view addSubview:self.searchBarWrapperView];

    // Add title label and search bar to the subviews
    [titleView addSubview:self.titleLabel];
    [self.searchBarWrapperView addSubview:self.searchBar];

    // Disable auto constraints
    [titleView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.searchBarWrapperView setTranslatesAutoresizingMaskIntoConstraints:NO];
    [self.titleLabel setTranslatesAutoresizingMaskIntoConstraints:NO];

    // Set constraints for title view
    [titleView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
    [titleView.leftAnchor constraintEqualToAnchor:self.view.leftAnchor].active = YES;
    [titleView.rightAnchor constraintEqualToAnchor:self.view.rightAnchor].active = YES;
    [titleView.bottomAnchor constraintEqualToAnchor:self.titleLabel.bottomAnchor].active = YES;

    // Set constraints for title label
    [self.titleLabel.topAnchor constraintEqualToAnchor:titleView.topAnchor].active = YES;
    [self.titleLabel.leftAnchor constraintEqualToAnchor:titleView.leftAnchor].active = YES;
    [self.titleLabel.rightAnchor constraintEqualToAnchor:titleView.rightAnchor].active = YES;

    // Set constraints for search bar wrapper
    [self.searchBarWrapperView.heightAnchor constraintGreaterThanOrEqualToConstant:30].active = YES;// The search bar together with the title label should occupy the whole 44px height of the navigation bar
    [self.searchBarWrapperView.topAnchor constraintEqualToAnchor:titleView.bottomAnchor].active = YES;
    [self.searchBarWrapperView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
    [self.searchBarWrapperView.leftAnchor constraintEqualToAnchor:self.view.leftAnchor].active = YES;
    [self.searchBarWrapperView.rightAnchor constraintEqualToAnchor:self.view.rightAnchor constant:16].active = YES;// Add space that is lost by setSearchFieldBackgroundPositionAdjustment

    // Configure autoresizing mask for UISearchBar
    [self.searchBar setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight];
    [self.searchBar setFrame:self.searchBarWrapperView.frame];

    //Remove left and right blank spaces around UISearchBar
    [self.searchBar setSearchFieldBackgroundPositionAdjustment:UIOffsetMake(-8,0)];

    // Colors for debugging        
    self.view.backgroundColor = [UIColor blueColor];
    titleView.backgroundColor = [UIColor redColor];
    searchBarWrapperView.backgroundColor = [UIColor greenColor];
    self.searchBar.backgroundColor = [UIColor yellowColor];
    self.searchBarTextField.backgroundColor = [UIColor brownColor];

    return self;
}

Answer 1

我使用的解决方案是子类化 UISearchBar 和 UISearchController。这样我就可以设置框架并控制搜索栏事件。

SearchBar.swift:

import Foundation

class SearchBar : UISearchBar {

    var preferredFont:UIFont?
    var preferredTextColor:UIColor?

    init(frame: CGRect, font: UIFont, textColor: UIColor) {
        super.init(frame: frame)

        self.frame = frame
        self.preferredFont = font
        self.preferredTextColor = textColor
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }
}

SearchController.swift:

import Foundation

protocol SearchControllerDelegate {
    func didStartSearching()

    func didTapOnSearchButton()

    func didTapOnCancelButton()

    func didChangeSearchText(searchText: String)
}

class SearchController : UISearchController, UISearchBarDelegate, SearchControllerDelegate {

    var customSearchBar: SearchBar!
    var customDelegate: SearchControllerDelegate!

    init(searchResultsController: UIViewController!, searchBarFrame: CGRect, searchBarFont: UIFont, searchBarTextColor: UIColor, searchBarTintColor: UIColor) {
        super.init(searchResultsController: searchResultsController)
        configureSearchBar(frame: searchBarFrame, font: searchBarFont, textColor: searchBarTextColor, bgColor: searchBarTintColor)
    }

    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: Bundle?) {
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
    }

    func configureSearchBar(frame: CGRect, font: UIFont, textColor: UIColor, bgColor: UIColor) {
        self.customSearchBar = SearchBar(frame: frame, font: font , textColor: textColor)

        self.customSearchBar.placeholder = "Search"
        self.customSearchBar.barTintColor = bgColor
        self.customSearchBar.tintColor = textColor
        self.customSearchBar.showsBookmarkButton = false
        self.customSearchBar.showsCancelButton = false

        self.customSearchBar.delegate = self
        self.customDelegate = self;

        let searchBarTextField:UITextField = self.customSearchBar.value(forKey: "searchField") as! UITextField

        searchBarTextField.font = font
        searchBarTextField.layer.borderWidth = 1
        searchBarTextField.layer.cornerRadius = 3
        searchBarTextField.layer.borderColor = UIColor.lightGray.cgColor
    }

    // UISearchBarDelegate

    func searchBarTextDidBeginEditing(_ searchBar: UISearchBar) {
        customDelegate.didStartSearching()
    }

    func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
        customSearchBar.resignFirstResponder()
        customDelegate.didTapOnSearchButton()
    }

    func searchBarCancelButtonClicked(_ searchBar: UISearchBar) {
        customSearchBar.resignFirstResponder()
        customDelegate.didTapOnCancelButton()
    }

    func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
        customDelegate.didChangeSearchText(searchText: searchText)
    }

    // SearchControllerDelegate

    func didStartSearching() {

    }

    func didTapOnSearchButton() {
        var searchText:String = ""

        if (self.customSearchBar.text != nil) {
            searchText = self.customSearchBar.text!
        }

        self.search(searchQuery: searchText)
    }

    func didTapOnCancelButton() {

    }

    func didChangeSearchText(searchText: String) {
        self.search(searchQuery: searchText)
    }

    // Search
    func search(searchQuery: String) {
        // Start searching
    }
}

UISearchBar 一旦被点击就会跳出位置

UISearchBar jumping out of position once tapped

uisearchbar

uisearchbardelegate

ios

autolayout

uisearchcontroller