web-dev-qa-db-fra.com

iOS 11 personnaliser la barre de recherche dans la barre de navigation

Je souhaite modifier la couleur du texte et de l'icône dans la barre de recherche iOS 11 lorsqu'elle est intégrée à la barre de navigation. Donc texte de substitution, recherche de texte et icône de recherche.

 enter image description here

if #available(iOS 11.0, *) {
    navigationController?.navigationBar.prefersLargeTitles = false
    let searchController = UISearchController(searchResultsController: nil)
    navigationItem.searchController = searchController
    navigationItem.hidesSearchBarWhenScrolling = false

    searchController.searchBar.placeholder = "Suchen"
    searchController.searchBar.tintColor = .white
}

Comme vous pouvez le voir sur l'image, le texte est gris sur un fond bleu foncé qui a l'air moche. Je veux texte et icône pour être au moins blanc. (changer la couleur de fond bleu ne fonctionne pas très bien, voyez mon autre question )

La seule chose qui fonctionne consiste à changer la couleur du curseur clignotant et du bouton "annuler", ce qui est fait avec la propriété .tintColor.

Les solutions qui semblent fonctionner sous iOS 10 et les versions antérieures ne semblent plus fonctionner sous iOS 11; veuillez donc publier uniquement les solutions que vous savez utiliser sous iOS 11. Merci.

Peut-être que je rate le problème de ce "style automatique" dans iOS 11. Toute aide est la bienvenue.

35
Darko

Je viens de découvrir comment régler également le reste: (avec l'aide de Brandon, merci!)

Le texte "Annuler":

searchController.searchBar.tintColor = .white

L'icône de recherche:

searchController.searchBar.setImage(UIImage(named: "my_search_icon"), for: UISearchBarIcon.search, state: .normal)

L'icône claire:

searchController.searchBar.setImage(UIImage(named: "my_search_icon"), for: UISearchBarIcon.clear, state: .normal)

Le texte de recherche:

UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).defaultTextAttributes = [NSAttributedStringKey.foregroundColor.rawValue: UIColor.white]

Merci pour l'aide @Brandon!

 enter image description here

L'espace réservé:

UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]).attributedPlaceholder = NSAttributedString(string: "placeholder", attributes: [NSAttributedStringKey.foregroundColor: UIColor.white])

 enter image description here

Le fond blanc:

if #available(iOS 11.0, *) {
    let sc = UISearchController(searchResultsController: nil)
    sc.delegate = self
    let scb = sc.searchBar
    scb.tintColor = UIColor.white
    scb.barTintColor = UIColor.white

    if let textfield = scb.value(forKey: "searchField") as? UITextField {
        textfield.textColor = UIColor.blue
        if let backgroundview = textfield.subviews.first {

            // Background color
            backgroundview.backgroundColor = UIColor.white

            // Rounded corner
            backgroundview.layer.cornerRadius = 10;
            backgroundview.clipsToBounds = true;
        }
    }

    if let navigationbar = self.navigationController?.navigationBar {
        navigationbar.barTintColor = UIColor.blue
    }
    navigationItem.searchController = sc
    navigationItem.hidesSearchBarWhenScrolling = false
}

 enter image description here

Tiré de ici .

93
Darko

Définir la couleur du texte de recherche

(UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]) ).defaultTextAttributes = [NSForegroundColorAttributeName: UIColor.white]

Définir la couleur de l'espace réservé pour la recherche 

(UITextField.appearance(whenContainedInInstancesOf: [UISearchBar.self]) ).attributedPlaceholder = [NSForegroundColorAttributeName: UIColor.white]
5
Donny

En plus de la réponse de Darko . Dans mon cas, je dois obtenir une couleur de champ de texte de recherche en blanc pur . J'ai également besoin d'un borderLine et d'un cornerRadius personnalisés . Donc, si je règle simplement la couleur d'arrière-plan sur blanc, définissez un coin personnalisé rayon et frontière personnalisée J'ai quelque chose comme ça . Look at this ugly grey highLight when you tap on textfield

Le problème est que la barre de recherche contient des sous-vues et que je viens de les supprimer ... Voici mon code:

@interface YourViewController () <UISearchBarDelegate, UISearchControllerDelegate>
// your properties
@property (nonatomic,strong) UISearchController *searchController;
@property (nonatomic,strong) UISearchBar *searchBar;
@end

- (void)viewDidLoad {
[super viewDidLoad];

_searchController = [[UISearchController alloc] initWithSearchResultsController:self.resultsTableController];
_searchController.delegate = self;
_searchController.searchBar.delegate = self;
_searchBar = self.searchController.searchBar;

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

    UITextField *searchTextField = [_searchBar valueForKey:@"searchField"];
if (searchTextField != nil) {
        searchTextField.layer.cornerRadius = 4.f;
        searchTextField.layer.borderWidth = 1.f;
        searchTextField.clipsToBounds = YES;

        for (UIView *subView in searchTextField.subviews) {
            [subView removeFromSuperview];
        }
}

// Color for "Cancel" button
    _searchBar.tintColor = [UIColor blackColor];
// Add searchController to navgationBar
    _navigationItem.searchController = _searchController;
// Hide searchBar when scroll
    _navigationItem.hidesSearchBarWhenScrolling = YES;
}
}

Maintenant, j'ai un searchBar avec fond blanc pur, cornerRadius personnalisé, largeur de bordure personnalisée. De plus, j'ai désactivé la surbrillance grise lorsque vous appuyez sur . Editing searchfield Resign first responder

1
Alex Kolovatov

mes deux cents pour Swift 4.x, légèrement nettoyé.

Ajoutez un contrôleur ou un délégué d'application:

appearance.backgroundColor = .green
let myFont = UIFont.italicSystemFont(ofSize: 12)
let attribs = [
    NSAttributedString.Key(rawValue: NSAttributedString.Key.font.rawValue): myFont,
    NSAttributedString.Key(rawValue: NSAttributedString.Key.foregroundColor.rawValue): UIColor.red
]

appearance.defaultTextAttributes =  attribs

dans le contrôleur:

self.searchBar.barTintColor = .blue

Vous obtiendrez un fond bleu, un fond de barre de recherche vert, une police en italique rouge:

 enter image description here

0
ingconti