web-dev-qa-db-ja.com

iOS 11はナビゲーションバーの検索バーをカスタマイズします

IOS 11の検索バーがナビゲーションバーに埋め込まれているときに、テキストとアイコンの色を変更したい。プレースホルダーテキスト、検索テキスト、検索アイコン。

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
}

画像でわかるように、テキストは深い青色の背景に灰色で、見苦しいです。テキストとアイコンを少なくとも白にしたい。 （青い背景色を変更してもあまりうまくいきません。 他の質問 を参照してください）

唯一機能するのは、点滅カーソルと「キャンセル」ボタンの色を変更することです。これは、.tintColorプロパティを使用して行います。

IOS 10以下で動作すると思われるソリューションは、iOS 11では動作しないようです。そのため、iOS 11で動作することがわかっているソリューションのみを投稿してください。ありがとう。

たぶん、iOS 11のこの「自動スタイリング」に関するポイントを見逃しています。

iosswiftuinavigationbaruisearchbar
42
Darko

残りの部分も設定する方法を見つけました：（ブランドンの助けを借りて、ありがとう！）

「キャンセル」テキスト：

searchController.searchBar.tintColor = .white

検索アイコン：

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

明確なアイコン：

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

検索テキスト：

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

ヘルプ@Brandonをありがとう！

enter image description here

プレースホルダー：

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

enter image description here

白い背景：

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

here から取得。

105
Darko

検索テキストの色を設定

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

検索プレースホルダーの色を設定

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

プット

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

そして

AppDelegateのUISearchBar.appearance().tintColor = UIColor.white。

または、両方を[UIViewController viewDidLoad:]に入れます

3
Brandon

Swift 4.xの2セントは、軽くクリーンアップされました。

コントローラーまたはアプリデリゲートを追加します。

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

コントローラー内：

self.searchBar.barTintColor = .blue

青の背景、緑の検索バーの背景、赤の斜体フォントが表示されます。

enter image description here

1
ingconti

ダロコのソリューションを試しましたが、背景を純粋な白色（グレー）に変更すると問題が発生しました。私のsolutionはsetSearchFieldBackgroundImageを使用することでしたまた、UITextFieldを取得するためにApple構造体に依存したくない

  if #available(iOS 11.0, *) {
     let whiteImage = UIImage(color: UIColor.white, size: CGSize(width: searchController.searchBar.layer.frame.width, height: searchController.searchBar.layer.frame.height))
     searchController.searchBar.setSearchFieldBackgroundImage(whiteImage, for: .normal)
     self.navigationItem.searchController = searchController
     self.navigationItem.hidesSearchBarWhenScrolling = true
 }


public extension UIImage {
  public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
    let rect = CGRect(Origin: .zero, size: size)
     UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
     color.setFill()
     UIRectFill(rect)
     let image = UIGraphicsGetImageFromCurrentImageContext()
     UIGraphicsEndImageContext()
     guard let cgImage = image?.cgImage else { return nil }
     self.init(cgImage: cgImage)
} }

UIImage拡張機能を使用しました： Swiftで単色のUIImageを作成

0
Gal Danay

ダルコの答えに加えて。私の場合、真っ白な検索テキストフィールドの色を取得する必要があります。また、カスタムborderLineとcornerRadiusが必要です。したがって、背景色を白に設定し、カスタムコーナー半径とカスタム境界線を設定すると、次のようになります。 Look at this ugly grey highLight when you tap on textfield

問題は、検索バーにいくつかのサブビューがあり、それらを削除したことです。ここに私のコードがあります：

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

これで、純白の背景、カスタムcornerRadius、カスタム境界線幅のsearchBarができました。また、タップしたときに灰色のハイライトを無効にしました。 Editing searchfieldResign first responder

0
Alex Kolovatov