iOS - Swift UISearchController仿微信搜索框

创建一个UISearchController

如果传入的searchResultsController为nil,则表示搜索的结果在当前控制器中显示,现在我让它在searchResultVC中显示

// 创建searchResultVC
let searchResultVC = UIViewController()
// 设置背景颜色为红色
searchResultVC.view.backgroundColor = UIColor.red
let searchController = UISearchController(searchResultsController: searchResultVC)
// 设置背景颜色
searchController.view.backgroundColor = UIColor (red: 0.97, green: 0.97, blue: 0.97, alpha: 1.0)
// 默认为YES,设置开始搜索时背景显示与否
// searchController.dimsBackgroundDuringPresentation = false
// 默认为YES,控制搜索时,是否隐藏导航栏
// searchController.hidesNavigationBarDuringPresentation = false

// 需要进行强引用 searchController
self.searchController = searchController

// 将搜索框视图�设置为tableView的tableHeaderView
tableView.tableHeaderView = searchController.searchBar

添加searchBar

设置搜索框

// 搜索框
let bar = searchController.searchBar
// 样式
bar.barStyle = .default
// 设置光标及取消按钮的颜色
bar.tintColor = RGBA(r: 0.12, g: 0.74, b: 0.13, a: 1.00)
// 设置代理
bar.delegate = self

设置光标及取消按钮的颜色

去除背景

// 去除背景及上下两条横线
bar.setBackgroundImage(UIImage(), for: .any, barMetrics: .default)

去除背景及上下两条横线

添加右侧语音按钮

// 右侧语音
bar.showsBookmarkButton = true
bar.setImage(#imageLiteral(resourceName: "VoiceSearchStartBtn"), for: .bookmark, state: .normal)

监听语音按钮的点击

// MARK:- UISearchBarDelegate
extension LXFContactViewController: UISearchBarDelegate {
    func searchBarBookmarkButtonClicked(_ searchBar: UISearchBar) {
        LXFLog("点击了语音按钮")
    }
}

右侧语音

效果

主要代码

上面仅作演示,下面的代码为searchBar的主要设置

let commonBgColor = RGBA(r: 0.94, g: 0.94, b: 0.96, a: 1.00)
searchBar.barTintColor = commonBgColor

// 搜索框
searchBar.barStyle = .default
searchBar.tintColor = RGBA(r: 0.12, g: 0.74, b: 0.13, a: 1.00)
// 去除上下两条横线
searchBar.setBackgroundImage(commonBgColor.trans2Image(), for: .any, barMetrics: .default)
// 右侧语音
searchBar.showsBookmarkButton = true
searchBar.setImage(#imageLiteral(resourceName: "VoiceSearchStartBtn"), for: .bookmark, state: .normal)
extension UIColor {
    func trans2Image() -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: 1.0, height: 1.0)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()
        context?.setFillColor(self.cgColor)
        context?.fill(rect)
        let theImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return theImage ?? UIImage()
    }
}

附上相关项目:Swift 3.0 高仿微信

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React-Native 组件之 Modal

Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果。 属性 ...

2365
来自专栏一“技”之长

iOS开发CoreGraphics核心图形框架之八——层聚合

    正常情况下,在使用CoreGraphics框架中的方法进行图形绘制时,每一闭合的图形都是一个独立的层,如果在绘制时添加了阴影效果,则通过阴影可以很明显的...

762
来自专栏Thinks

带你轻松打开svg滤镜的大门

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。

1042
来自专栏iOS开发随笔

iOS 使用CAGradientLayer绘制渐变色

1487
来自专栏lzj_learn_note

Android ImageSpan与TextView同一行图片居中

在开发中常常会遇到标签(图片)+文字的需求,实现方式一般采用SpannableString的方式来实现。 这时候会遇到图片ImageSpan没有办法居中的问题。...

882
来自专栏韩伟的专栏

Unity2D手册翻译(三)

Sprite Editor 有时候一个Sprite纹理只包含一个图形原素,但是把多个相关的图形一起合并到一个图片中会更方便。例如,这个图片可能包含某一个角色的多...

2794
来自专栏我有一个梦想

Python 项目实践二(生成数据)第一篇

上面那个小游戏教程写不下去了,以后再写吧,今天学点新东西,了解的越多,发现python越强大啊! 数据可视化指的是通过可视化表示来探索数据,它与数据挖掘紧密相关...

2109
来自专栏我是攻城师

关于opencv图片颜色不能正常在matplotlib中显示的问题

opencv默认的彩色图片的加载方式是按照BGR加载的,直接用opencv的函数展示是没有问题的,但是有时候我们想把多张图片放在一起展示,这时候用matplot...

701
来自专栏练小习的专栏

带你轻松打开svg滤镜的大门

上次和大家一起,用最简单直白,轻松粗暴的方式学习了一遍SVG动画,这次我们再一起来搞点不一样的东西,SVG滤镜的实现。 SVG滤镜绝对称得上是他最强大的功能之一...

1888
来自专栏听雨堂

从MapX到MapXtreme2004[11]-坐标概论

        坐标的问题是Mapxtreme中最郁闷的问题,前几天在这上面耗了很多时间,没有搞定,今天又是不得不钻研,还好,小有心得。         1、...

1917

扫码关注云+社区