UISearchBar(一)修改背景层和输入框层的背景颜色和边框颜色
因为微博客户端首页上面的 search bar 高度很小,自己尝试修改没成功,于是 google 了一下。 《StackOverflow: Can the height of the UISearchbar TextField be modified?》 中提到一种方案: override func viewDidAppear(animated: Bool) { super.viewDidAppear(animated) for subView in searchBar.subviews { print(subView) for subsubView in subView.subviews { print(subsubView) if let textField = subsubView as? UITextField { textField.font = UIFont.systemFontOfSize(20) } } } }
才发现 search bar 的结构很复杂。 我加了两行打印,把子视图简单地打印出来。得到的结果: <UIView: 0x7fb6204a09c0; frame = (390 0; 195 25); autoresize = RM+BM; gestureRecognizers = <NSArray: 0x7fb622479cf0>; layer = <CALayer: 0x7fb6204806e0>> <UIView: 0x7fb622122760; frame = (0 0; 320 44); clipsToBounds = YES; autoresize = W+H; layer = <CALayer: 0x7fb622120180>> <UISearchBarBackground: 0x7fb622123340; frame = (0 0; 320 44); opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0x7fb622123800>> <UISearchBarTextField: 0x7fb622124bf0; frame = (8 8; 304 28); text = ''; clipsToBounds = YES; opaque = NO; layer = <CALayer: 0x7fb622120290>> 不去深究,简而言之,在它的第二层子视图(subview)中至少包含了一个 Search bar 的样式就是它们定义的。所以我们对它们进行修改就能达到目的。 试验假设: @IBOutlet weak var searchBar: UISearchBar!
我通过下面的代码,试着给各种背景、边框设置不同颜色,得到的效果如图。 override func viewWillAppear(animated: Bool) { for subView in searchBar.subviews { for subsubView in subView.subviews { if let bg = subsubView as? UIView { bg.backgroundColor = UIColor.whiteColor() bg.layer.backgroundColor = UIColor.orangeColor().CGColor bg.layer.borderColor = UIColor.redColor().CGColor bg.layer.borderWidth = 1 } if let textField = subsubView as? UITextField { textField.backgroundColor = UIColor.blueColor() textField.layer.borderColor = UIColor.greenColor().CGColor textField.layer.borderWidth = 1 } } } searchBar.barTintColor = UIColor.yellowColor() searchBar.tintColor = UIColor.blackColor() }
如何使 borderwidth 和 backgroundColor 生效有一个问题是:
比如注释掉 override func viewWillAppear(animated: Bool) { for subView in searchBar.subviews { for subsubView in subView.subviews { if let bg = subsubView as? UIView { bg.backgroundColor = UIColor.whiteColor() bg.layer.backgroundColor = UIColor.orangeColor().CGColor bg.layer.borderColor = UIColor.redColor().CGColor //bg.layer.borderWidth = 1 } if let textField = subsubView as? UITextField { textField.backgroundColor = UIColor.blueColor() textField.layer.borderColor = UIColor.greenColor().CGColor //textField.layer.borderWidth = 1 } } } searchBar.barTintColor = UIColor.yellowColor() searchBar.tintColor = UIColor.blackColor() }
背后的 view仔细看 这说明,searchBar 的子视图中,除了一个作为整体背景的 所以我把文本输入框的背景色设置为
另一个问题:当 searchBarStyle 为 UISearchBarStyle.Minimal 时
但是,当我切换成
可以看到, 暂时不知道为什么,我猜是 默认的黑色边框当我把 search bar 背景颜色设置为我想要的浅灰色之后,又一个问题出现了。 居然有默认的边框。而且我取色看了一下,在背景颜色不同时,边框颜色值还不一样……
我尝试设置 所以我猜这可能是,当 search bar 没有边框的时候自动添加的强制性边框,用于和其他元素区别吧。 不过刚才已经找到修改边框颜色的方法了。所以用上面的方法修改即可,记得设置 这里也有一点要注意: 因为上面我们并没有把每个 override func viewWillAppear(animated: Bool) { for subView in searchBar.subviews { print(subView) for subsubView in subView.subviews { print(subsubView) if let bg = subsubView as? UIView { bg.layer.borderColor = UIColor(red: 242/250,green: 242/250,blue: 242/250,alpha: 1).CGColor bg.layer.borderWidth = 1 } if let textField = subsubView as? UITextField { textField.layer.borderWidth = 0 } } } searchBar.barTintColor = UIColor(red: 242/250,alpha: 1) } 最后附一张我的截图 : D
如有错误,望指正。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |