首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在Swift 4中自定义UISearchBar

在Swift 4中自定义UISearchBar
EN

Stack Overflow用户
提问于 2018-01-27 20:40:03
回答 1查看 6.3K关注 0票数 2
  • 我需要删除搜索栏的背景。
  • 输入文本的部分(白色)使其更高。
  • 在白色部分周围放一个绿色的边框。
  • 自定义字体。

我需要这个:

我所取得的成就是:

我的代码:

代码语言:javascript
运行
复制
@IBOutlet weak var searchBar: UISearchBar!

override func viewDidLoad() {
    super.viewDidLoad()

    self.searchBar.layer.borderColor = #colorLiteral(red: 0.2352941176, green: 0.7254901961, blue: 0.3921568627, alpha: 1)
    self.searchBar.layer.borderWidth = 1

    self.searchBar.clipsToBounds = true
    self.searchBar.layer.cornerRadius = 20
}
EN

回答 1

Stack Overflow用户

发布于 2018-01-28 12:14:56

尝试使用以下代码:

代码语言:javascript
运行
复制
class JSSearchView : UIView {

    var searchBar : UISearchBar!

    override func awakeFromNib()
    {
        // the actual search barw
        self.searchBar = UISearchBar(frame: self.frame)

        self.searchBar.clipsToBounds = true

        // the smaller the number in relation to the view, the more subtle
        // the rounding -- https://www.hackingwithswift.com/example-code/calayer/how-to-round-the-corners-of-a-uiview
        self.searchBar.layer.cornerRadius = 5

        self.addSubview(self.searchBar)

        self.searchBar.translatesAutoresizingMaskIntoConstraints = false

        let leadingConstraint = NSLayoutConstraint(item: self.searchBar, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1, constant: 20)
        let trailingConstraint = NSLayoutConstraint(item: self.searchBar, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1, constant: -20)
        let yConstraint = NSLayoutConstraint(item: self.searchBar, attribute: .centerY, relatedBy: .equal, toItem: self, attribute: .centerY, multiplier: 1, constant: 0)

        self.addConstraints([yConstraint, leadingConstraint, trailingConstraint])

        self.searchBar.backgroundColor = UIColor.clear
        self.searchBar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
        self.searchBar.tintColor = UIColor.clear
        self.searchBar.isTranslucent = true

        // https://stackoverflow.com/questions/21191801/how-to-add-a-1-pixel-gray-border-around-a-uisearchbar-textfield/21192270
        for s in self.searchBar.subviews[0].subviews {
            if s is UITextField {
                s.layer.borderWidth = 1.0
                s.layer.cornerRadius = 10
                s.layer.borderColor = UIColor.green.cgColor
            }
        }
    }

    override func draw(_ rect: CGRect) {
        super.draw(rect)

        // the half height green background you wanted...            
        let topRect = CGRect(origin: .zero, size: CGSize(width: self.frame.size.width, height: (self.frame.height / 2)))
        UIColor.green.set()
        UIRectFill(topRect)
    }
}

要使用它,可以将自定义视图放到xib或情节提要文件中,只需将自定义类类型设置为类名(JSSearchView)。

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48480316

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档