web-dev-qa-db-ja.com

検索バーの背景色を変更できません

検索バーがあります：

let searchBar:UISearchBar = UISearchBar(frame: CGRectMake((searchView.frame.width - UIScreen.mainScreen().bounds.width / 1.6) / 2, 0, UIScreen.mainScreen().bounds.width / 1.6, 24))

テキスト入力部分の背景色を変更したいです。このために私が試した：

searchBar.barTintColor = UIColor(red: 0/255, green: 74/255, blue: 103/255, alpha: 1)

searchBar.backgroundColor = UIColor.redColor()

しかし、これらの両方のバリアントは機能しません。 UISearchBar textInputパーツの背景色を変更するにはどうすればよいですか？

iosswiftuisearchbar
17
Orkhan Alizade

ViewControllerで変更するだけで、他に影響を与えたくない場合は、

for view in searchBar.subviews {
            for subview in view.subviews {
                if subview .isKindOfClass(UITextField) {
                    let textField: UITextField = subview as! UITextField
                    textField.backgroundColor = UIColor.redColor()
                }
            }
        }

ただし、アプリ全体を変更し、iOS 9.0以降をターゲットにする場合は、次のようにAppearanceWhenContainedInInstancesOfClassesを使用する必要があります。

UITextField.appearanceWhenContainedInInstancesOfClasses([UISearchBar.self]).backgroundColor = UIColor.redColor()
14
Imran

ViewDidLoadに以下のコードを追加し、テキストフィールドの背景色を赤に変更します。

for subView in searchBar.subviews
{
    for subView1 in subView.subviews
    {

        if subView1.isKindOfClass(UITextField)
        {
            subView1.backgroundColor = UIColor.redColor()
        }
    }

}

SearchBarのTextFieldの赤色。

enter image description here

10
Kirit Modi

Swift 3+の場合、これを使用：

for subView in searchController.searchBar.subviews {

    for subViewOne in subView.subviews {

        if let textField = subViewOne as? UITextField {

           subViewOne.backgroundColor = UIColor.red

           //use the code below if you want to change the color of placeholder
           let textFieldInsideUISearchBarLabel = textField.value(forKey: "placeholderLabel") as? UILabel
                textFieldInsideUISearchBarLabel?.textColor = UIColor.blue
        }
     }
}
10
Alien

@aliamcamiのように、以前のすべての回答は期待どおりに機能しませんでした。回答が自分にとってうまくいかなかったか、うまくいきましたが、「ダミー」コードが必要です。そこで、私はSwift 4で書かれた別の答えを単純化されたロジックで共有します：

for textField in searchController.searchBar.subviews.first!.subviews where textField is UITextField {
    textField.subviews.first?.backgroundColor = .white
    textField.subviews.first?.layer.cornerRadius = 10.5 //I set 10.5 because is approximately the system value
    textField.subviews.first?.layer.masksToBounds = true
    //Continue changing more properties...
}

textField.subviews.firstは、UIFieldEditorの背後に視覚効果を追加する「_UISearchBarSearchFieldBackgroundView」サブビューです。

編集済み

いくつかの開発と多くのバグの後、私はこのelegantソリューション（Appleは幸せではないだろうと確信しています）承認しますが、わかりません）iOS 1からiOS 12：

if let textField = searchBar.value(forKey: "searchField") as? UITextField {
    textField.backgroundColor = myColor
    //textField.font = myFont
    //textField.textColor = myTextColor
    //textField.tintColor = myTintColor
    // And so on...

    let backgroundView = textField.subviews.first
    if #available(iOS 11.0, *) { // If `searchController` is in `navigationItem`
        backgroundView?.backgroundColor = UIColor.white.withAlphaComponent(0.3) //Or any transparent color that matches with the `navigationBar color`
        backgroundView?.subviews.forEach({ $0.removeFromSuperview() }) // Fixes an UI bug when searchBar appears or hides when scrolling
    }
    backgroundView?.layer.cornerRadius = 10.5
    backgroundView?.layer.masksToBounds = true
    //Continue changing more properties...
}

searchBarがtableHeaderViewにある場合、上記のコードはviewWillAppearで呼び出すことができますが、iOS 11以降でnavigationItemにある場合はviewDidAppearで呼び出されます。

7
Ángel Téllez

ちょうどこのような

let searchBar:UISearchBar = UISearchBar(frame: CGRectMake((searchView.frame.width - UIScreen.mainScreen().bounds.width / 1.6) / 2, 0, UIScreen.mainScreen().bounds.width / 1.6, 24))
let searchTextField = searchBar.valueForKey("_searchField") as? UITextField
searchTextField?.backgroundColor = UIColor.redColor()
7
Kingiol

Apple APIのみを使用してこれを行う方法は、イメージを作成し、setSearchFieldBackgroundImageを使用することです。

self.searchBar.setSearchFieldBackgroundImage(UIImage(named: "SearchFieldBackground"), for: UIControlState.normal)

角丸長方形を作成し、ボタンを動的に表示および非表示にすると、コーナーも適切にアニメーション化されます。

この画像を使用した例： enter image description here

enter image description here

7
SuperDuperTango

私はこの方法でそれを行います（Swift 3+ソリューション）：

let textFieldInsideSearchBar = searchBar.value(forKey: "searchField") as? UITextField
textFieldInsideSearchBar?.backgroundColor = UIColor.red
4
Nosov Pavel

FWIW textFieldという名前の計算された変数を作成して、この問題を解決しています。

extension UISearchBar {
    var textField: UITextField? {
        return subviews.first?.subviews.first(where: { $0.isKind(of: UITextField.self) }) as? UITextField
    }
}
3
Steve

Web上のこの質問に対する非常に一般的な答えは、上記のこのソリューションです。

for subView in searchBar.subviews {
    for subViewInSubView in subView.subviews {   
        if subViewInSubView.isKindOfClass(UITextField) {
            subViewInSubView.backgroundColor = UIColor.purpleColor()
       }
    }
}

しかし、XCode 7とiOS 9を使用していると機能しませんでした。また、ウェブ上では、他の多くの人も機能しないと報告していることに気付きました。 UITextFieldサブビューは、参照されるまで作成されない（または少なくともサブビューとして追加されない）ことを発見しました。参照できる方法の1つはプレースホルダーフィールドです。たとえば、検索する前にこの行を追加できますUITextFieldクラスのサブビュー：

searchBar.placeholder = searchBar.placeholder
2
Ted

解決策は次のとおりです。

func customizeSearchBar(){
    if let textfield = searchController.searchbar.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;
        }
    }
}

ただし、これはiOS 11.0以降でのみ機能することに注意してください。その前に追加することを忘れないでください

if #available(iOS 11.0, *) {}
2
H.Jacob

任意の色を設定します。 Swift

public extension UISearchBar {
  public func setStyleColor(_ color: UIColor) {
    tintColor = color
    guard let tf = (value(forKey: "searchField") as? UITextField) else { return }
    tf.textColor = color
    if let glassIconView = tf.leftView as? UIImageView, let img = glassIconView.image {
      let newImg = img.blendedByColor(color)
      glassIconView.image = newImg
    }
    if let clearButton = tf.value(forKey: "clearButton") as? UIButton {
      clearButton.setImage(clearButton.imageView?.image?.withRenderingMode(.alwaysTemplate), for: .normal)
      clearButton.tintColor = color
    }
  }
}

extension UIImage {

  public func blendedByColor(_ color: UIColor) -> UIImage {
    let scale = UIScreen.main.scale
    if scale > 1 {
      UIGraphicsBeginImageContextWithOptions(size, false, scale)
    } else {
      UIGraphicsBeginImageContext(size)
    }
    color.setFill()
    let bounds = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    UIRectFill(bounds)
    draw(in: bounds, blendMode: .destinationIn, alpha: 1)
    let blendedImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return blendedImage!
  }
}
1
ale_stro

Swift 4を使用して、最も投票された回答に基づいたUISearchBar拡張機能

extension UISearchBar {

    func tfBackgroundColor(color: UIColor){
        for view in self.subviews {
            for subview in view.subviews {
                if subview is UITextField {
                    let textField: UITextField = subview as! UITextField
                    textField.backgroundColor = color
                }
            }
        }
    }
    }
1
JP Aquino

上記の解決策を見つけたとき、searchBarとsearchTextFieldのプロパティを試していました。

以下に、望ましい結果を得るための手順をリストしました。

  1. SearchTextFieldの境界線スタイルを.noneに設定します
  2. SearchTextFieldの背景色を目的の色に設定します
  3. SearchTextFieldのレイヤーのコーナー半径を10に変更します
  4. SearchTextFieldのclipToBoundsプロパティをtrueに設定します

さらに、参照用に以下のコードを提供しました。

 let searchController = UISearchController(searchResultsController: nil)
 navigationItem.searchController = searchController

 searchController.searchBar.barTintColor = viewBackgroundColor
 searchController.searchBar.backgroundColor = viewBackgroundColor

 searchController.searchBar.searchTextField.borderStyle = .none
 searchController.searchBar.searchTextField.backgroundColor = .white
 searchController.searchBar.searchTextField.layer.cornerRadius = 10
 searchController.searchBar.searchTextField.clipsToBounds = true

注：searchTextFieldはベータ版であり、iOS 13で利用可能です

1
Sudarshan Sreeram

これが解決策です

func configureSearchBar() {
    for textField in searchBar.subviews.first!.subviews where textField is UITextField {
        textField.backgroundColor = .cyan
    }
}
0
Andrew Bell

プレイグラウンドで以下のコードを試してください。それでもうまくいかない場合は、質問にさらにコードを追加してください...

let searchView = UIView(frame: CGRect(x: 0.0,y: 0.0, width: 100, height: 50))

let searchBar:UISearchBar = UISearchBar(frame: CGRectMake((searchView.frame.width - UIScreen.mainScreen().bounds.width / 1.6) / 2, 0, UIScreen.mainScreen().bounds.width / 1.6, 24))

for subView in searchBar.subviews {
    for subViewInSubView in subView.subviews {   
        if subViewInSubView.isKindOfClass(UITextField) {
            subViewInSubView.backgroundColor = UIColor.purpleColor()
        }
    }
}
0
Anni S

検索バーのtextFieldの背景色を変更できる唯一の方法を共有するようになりました。これは、まだ回答が表示されていないためです。

  • @Steveからの答えのように、検索バーからtextFieldを取得します。textFieldを取得する限り、ここでは何でも機能します。これは私の問題ではありませんでした。問題は、ここで設定した色が改善されず、extension UISearchBar { var textField: UITextField? { return subviews.first?.subviews.first(where: { $0.isKind(of: UITextField.self) }) as? UITextField } }が機能しなかったことです。

  • NavigationBar let layer = CALayer() layer.backgroundColor = UIColor.white.withAlphaComponent(0.5).cgColor //Set your color here layer.frame = navigationBar.frameのサイズで新しいレイヤーを作成します

  • テキストフィールドnavigationBar.textField?.layer.masksToBounds = true //to make sure you get the rounded corners navigationBar.textField?.layer.cornerRadius = 14 //Round it as you wish navigationBar.textField?.layer.addSublayer(layer)のサブレイヤーとして新しいレイヤーを設定します
  • つまり、任意の色の丸いtextFieldの背景があります。
0
aliamcami