用swift写一个悬浮的searchbar

用swift写一个悬浮的searchbar

这次用代码布局实现下面这个悬浮着的搜索框。

先交代一下背景：这是一个tabviewcontroller里的一个tabview，然后它还是一个navigationcontroller的rootcontroller。

---

首先，因为它是navigationcontroller里的，所以要隐藏掉自带的navigationbar，不然会影响美感

// MARK: - 隐藏navigationbar
self.navigationController?.isNavigationBarHidden = true

然后，新建一个用于承载searchbar的view，我称之为barView。整个搜索框的颜值就体现在这个view上，因为自带的searchbar对我来说太难修改它的外观了。

//设置搜索框的位置和尺寸
var barView = UIView()
barView = UIView(frame: CGRect(x:10, y:30, width:self.view.frame.width-20, height:40))
//设置搜索框的圆角、背景颜色、透明度等外貌属性
barView.layer.masksToBounds = true
barView.layer.cornerRadius = 10
barView.layer.backgroundColor = UIColor(red: 49/255, green: 151/255, blue: 230/255,alpha:0.9).cgColor

这时候，放搜索框的位置应该是长这样的：

隐隐约约能看到背后的地图，开始有种悬浮的感觉了。

之后，就要把searchbar放到这个barView里了

var searchBar = UISearchBar()
searchBar = UISearchBar(frame: barView.bounds)
searchBar.placeholder = "请输入校园内地址"
searchBar.delegate = self
barView.addSubview(searchBar)

这时候就会看见长成这样的搜索框了：

有两个问题，1：仔细看的话会发现barView上有两条杠；2：barView本身的蓝色变成了灰色。
其实问题产生的原因是searchbar本身的默认样式里是灰色的背景色，这个灰色背景色覆盖了barView的背景色，而且这个默认样式还使searchbar的输入文字部分的背景色成白色的。如果用storyboard布局的话就可以在storyboard里将default改成minimal，但是现在是代码布局。

//问题一的解决方法（跟去除nc的bar底部的黑线很相似诶）
searchBar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
//问题二的解决方法
searchBar.searchBarStyle = UISearchBarStyle.minimal

这时候，搜索框变成了这样：

大概雏形已经出来了，可是placeholder里的字看不太清楚，所以需要改变一下字体的颜色，因为placeholder本身不能修改字体颜色，所以通过取出searchbar里的textfield来改变searchbar的placeholder的字体颜色：

let textFieldInsideSearchBar = searchBar.value(forKey: "searchField") as? UITextField

textFieldInsideSearchBar?.textColor = UIColor.white

let textFieldInsideSearchBarLabel = textFieldInsideSearchBar?.value(forKey: "placeholderLabel") as?UILabel

textFieldInsideSearchBarLabel?.textColor = UIColor.white

---

将以上代码整合起来，就可以实现图一的样式了！在实现这个样式的过程中，我遇到了：1、searchbar有黑线；2、改变不了searchbar的背景色；3、修改不了placeholder的样式，这几个困扰我比较久的问题，希望这篇文章能帮助到像我一样的swift3小白～