Help us understand the problem. What is going on with this article?

Swift4 IB上で色やTextFieldの高さのカスタマイズができるUISearchBarの実装

More than 1 year has passed since last update.

はじめに

こんにちは:leaves:
UISearchBarTextFieldの高さを変更したくなりました。

sample.png

UITextFieldsの色などについては以下の記事があります。分かりやすくて参考になります。
ありがとうございます。

しかし、UISearchBarの中のUITextFieldの高さは上の記事のようにsubViewsframeプロパティでの変更はできなくて少し悩んだので書いてみたいと思います。
至らぬ点など多々あると思いますが、コメントなど頂けたら幸いです。

実装について

UISearchBarのUITextfieldの高さは、Imageの高さと同じになるようで、
setSearchFieldBackgroundImage(_:for:)メソッドが使えるようでした。

ソースコード

カスタムクラスとして実装してみました。クラス名などご自由に変更してください。

CustomSearchBar.swift
import UIKit

@IBDesignable class CustomSearchBar: UISearchBar {

    var textField: UITextField {
        return self.value(forKey: "_searchField") as! UITextField
    }

    @IBInspectable var textFieldColor: UIColor = .lightGray {
        didSet { textFieldUpdate() }
    }

    @IBInspectable var textFieldHeight: CGFloat = 38 {
        didSet { textFieldUpdate() }
    }

    @IBInspectable var textFieldCornerDadius: CGFloat = 18 {
        didSet { textFieldUpdate() }
    }

    fileprivate func textFieldUpdate() {
        let image = UIImage.instantiate(size: CGSize(width: UIScreen.main.bounds.size.width, height: textFieldHeight), fillColor: textFieldColor, cornerRadius: textFieldCornerDadius)
        self.setSearchFieldBackgroundImage(image, for: .normal)
    }
}

extension UIImage {
    static func instantiate(size: CGSize, fillColor: UIColor, cornerRadius: CGFloat) -> UIImage? {
        let rect = CGRect(origin: CGPoint.zero, size: size)
        let path = UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        fillColor.setFill()
        path.fill()
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}

使い方

StoryBoardで変更することができます。

screen.png

※CornerRadiusはTextFieldHeightの半分の値を指定すると、丸フチになるなど独自で設定するといいかと思います。

参考にさせていただいた記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした