【Swift4】UISearchBarの虫眼鏡アイコンのサイズ変更方法メモ。

...φ(^ω^*)

どうも。Reoです。

UISearchBarの虫眼鏡アイコン画像を変更する際にサイズ変更だけがうまくいかなかったのでメモメモ。

 

UISearchBarのアイコンを変更

アイコン変更は、

//適当なsearchBarがあったとする。
let searchBar = UISearchBar(frame: CGRect(x:0,y:0,width:self.view.frame.width,height:50))

//検索アイコン
let searchImg = UIImage(named:"search.png")
searchBar.setImage(searchImg, for: .search, state: .normal)

searchBar.setImage()でforに.searchを選択してあげれば簡単に変更できます。

 

同様にclearボタンは

//バツボタン
let clearImg = UIImage(named:"clear.png")
self.setImage(clearImg, for: .clear, state: .normal)

forの部分を.clearにしてあげればおｋです。

 

んで。

.clearの方は画像サイズそのまんま表示されるので、50*50のアイコンだとこんな感じになります。

こっちは画像サイズを調整してあげればおｋです。

虫眼鏡の方は同様に50*50のアイコンにしても、サイズは変わりません。

 

調べてみると虫眼鏡の方は12*12で表示されてるみたい。（上記画像はサイズ調整済みで20*20）

少し小さいので、大きくしたい！ということで調整してみました。

 

虫眼鏡アイコンのサイズを調整する

どうやらこれはtextFieldのleftViewに配置されているらしいのでそれをまず取得。

//subviewをたどってtextFieldをさがす
for subview in searchBar.subviews {
    for secondSubview in subview.subviews {
        //この階層にtextFieldがあるはず
        if secondSubview.isKind(of: UITextField.self) {
            if let textField = secondSubview as? UITextField{
                //textFieldのカスタマイズはここでする
            }
        }
    }
}

textFieldの背景色だったり文字色だったりはこの中ですればおｋです。

んでこの中でtextFieldのleftViewを取得します。

if let glassIconView = textField.leftView as? UIImageView {
    //調整したい大きさに変更する
    glassIconView.frame.size = CGSize(width:20,height:20)
}

これをサイズ調整すればおｋです。

 

全体はこんな感じ。

//subviewをたどってtextFieldをさがす
for subview in searchBar.subviews {
    for secondSubview in subview.subviews {
        //この階層にtextFieldがあるはず
        if secondSubview.isKind(of: UITextField.self) {
            if let textField = secondSubview as? UITextField{
                //textFieldのカスタマイズはここでする
                if let glassIconView = textField.leftView as? UIImageView {
                    //調整したい大きさに変更する
                    glassIconView.frame.size = CGSize(width:20,height:20)
                }
            }
        }
    }
}

 

ほいではでは。

 

参考リンク

• How to change the color of the UISearchBar Icon? - stackoverflow