iOS: 热门搜索标签界面(Swift3)
来源:互联网 发布:触宝输入法软件 编辑:程序博客网 时间:2024/05/16 11:35
首先创建一个SearchView类,这个类分为上面的标题文字和下面的按钮.按钮的数量是不确定的,在将按钮添加到SearchView之前先记录下这个按钮的maxX加上横向间距的值和y值,在布局下一个按钮的时候先判断这一行余下的距离是否大于这个按钮的宽度,也就是SearchView视图的宽度减去上一个按钮的maxX加上横向间距的值是否大于这个按钮的宽度.如果大于就是说剩下的距离可以放下这个按钮,那么这个按钮的x值就是上一个按钮的maxX加上横向间距,y值与上一个按钮相同;如果小于就是说剩下的距离放不下这个按钮,那么就将这个按钮放到下一行,这个按钮的x值就是0,y值就是上一个按钮的y值加上纵向间距和按钮的高度.整个SearchView视图的高度是最后一个按钮的maxY.
class SearchView: UIView { //标题 private let titleLabel = UILabel() //上一个按钮的maxX加上间距 private var lastX: CGFloat = 0 //上一个按钮的y值 private var lastY: CGFloat = 35 //按钮的回调block private var btnCallBackBlock: ((_ btn: UIButton) -> ())? //SearchView的总高度 var searchViewHeight: CGFloat = 0 override init(frame: CGRect) { super.init(frame: frame) titleLabel.frame = CGRect(x: 0, y: 0, width: frame.size.width - 30, height: 35) titleLabel.font = UIFont.systemFont(ofSize: 15) titleLabel.textColor = UIColor(red: 140 / 255.0, green: 140 / 255.0, blue: 140 / 255.0, alpha: 1) addSubview(titleLabel) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } convenience init(frame: CGRect, titleLabelText: String, btnTexts: [String], btnCallBackBlock: @escaping ((_ sender: UIButton) -> ())) { self.init(frame: frame) titleLabel.text = titleLabelText //按钮文字的宽度 var btnW: CGFloat = 0 //按钮的高度 let btnH: CGFloat = 30 //文字与按钮两边的距离之和 let addW: CGFloat = 30 //横向间距 let marginX: CGFloat = 10 //纵向间距 let marginY: CGFloat = 10 for i in 0..<btnTexts.count { let btn = UIButton(type: .custom) btn.setTitle(btnTexts[i], for: .normal) btn.setTitleColor(UIColor.black, for: .normal) btn.titleLabel?.font = UIFont.systemFont(ofSize: 14) btn.titleLabel?.sizeToFit() btn.backgroundColor = UIColor.white btn.layer.cornerRadius = 15 btn.layer.masksToBounds = true btn.layer.borderWidth = 0.5 btn.layer.borderColor = UIColor(red: 200 / 255.0, green: 200 / 255.0, blue: 200 / 255.0, alpha: 1).cgColor btn.addTarget(self, action: #selector(btnClick(sender:)), for: .touchUpInside) //按钮的总宽度 btnW = (btn.titleLabel?.bounds.width)! + addW //在给按钮的frame赋值之前先判断本行余下的宽度是否大于将要布局的按钮的宽度,如果大于则x值为上一个按钮的宽度加上横向间距,y值与上一个按钮相同,如果小于则x值为0,y值为上一个按钮的y值加上按钮的高度和纵向间距 if frame.width - lastX > btnW { btn.frame = CGRect(x: lastX, y: lastY, width: btnW, height: btnH) } else { btn.frame = CGRect(x: 0, y: lastY + marginY + btnH, width: btnW, height: btnH) } lastX = btn.frame.maxX + marginX lastY = btn.frame.origin.y searchViewHeight = btn.frame.maxY addSubview(btn) } self.btnCallBackBlock = btnCallBackBlock } @objc private func btnClick(sender: UIButton) { btnCallBackBlock!(sender) }}
点击热门搜索视图的按钮会发生四件事: 1.将按钮文字显示到搜索框 2.将按钮文字写入到偏好设置 3.在历史记录中显示按钮 4.更新清空历史按钮的状态
常量
let UIScreenBounds: CGRect = UIScreen.main.bounds let KNavigationBarBackgroundColor = UIColor(red: 249 / 255.0, green: 250 / 255.0, blue: 253 / 255.0, alpha: 1) let KGlobalBackgroundColor = UIColor(red: 239 / 255.0, green: 239 / 255.0, blue: 239 / 255.0, alpha: 1) let HistorySearch = "HistorySearch"
把ScrollView添加到视图中
private func setup() { navigationController?.navigationBar.barTintColor = KNavigationBarBackgroundColor view.backgroundColor = KGlobalBackgroundColor view.addSubview(scrollView) scrollView.addSubview(cleanHistoryButton) } lazy var scrollView: UIScrollView = { let scrollView = UIScrollView(frame: UIScreen.main.bounds) scrollView.alwaysBounceVertical = true scrollView.backgroundColor = UIColor(red: 239 / 255.0, green: 239 / 255.0, blue: 239 / 255.0, alpha: 1) scrollView.delegate = self return scrollView }()
搜索框
lazy var searchBar: UISearchBar = { let searchBar = UISearchBar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width * 0.9, height: 30)) searchBar.placeholder = "请输入商品名称" searchBar.barTintColor = UIColor.white searchBar.keyboardType = .default searchBar.delegate = self return searchBar }() //SearchBar代理方法 func searchBarSearchButtonClicked(_ searchBar: UISearchBar) { if (searchBar.text?.characters.count)! > 0 { //将搜索框文字写入到偏好设置 writeHistorySearchToUserDefaults(str: searchBar.text!) } } private func setupTilteView() { let bgView = UIView(frame: CGRect(x: 0, y: 0, width: UIScreenBounds.width, height: 30)) bgView.backgroundColor = UIColor.white bgView.layer.masksToBounds = true bgView.layer.cornerRadius = 6 bgView.layer.borderColor = UIColor(red: 100 / 255.0, green: 100 / 255.0, blue: 100 / 255.0, alpha: 1).cgColor bgView.layer.borderWidth = 0.2 UIGraphicsBeginImageContext(bgView.bounds.size) bgView.layer.render(in: UIGraphicsGetCurrentContext()!) let bgImage = UIGraphicsGetImageFromCurrentImageContext() searchBar.setSearchFieldBackgroundImage(bgImage, for: .normal) navigationItem.titleView = searchBar }
热门搜索视图
var hotSearchView: SearchView? private func setupHotSearchView() { //如果偏好设置为空写入一个空数组 var historySearch = UserDefaults.standard.object(forKey: HistorySearch) as? [String] if historySearch == nil { historySearch = [String]() UserDefaults.standard.set(historySearch, forKey: HistorySearch) } //标签的标题 可以从服务器获得 let arr = ["年货大集", "酸奶", "水", "车厘子", "洽洽瓜子", "维他", "香烟", "周黑鸭", "草莓", "星巴克", "卤味"] hotSearchView = SearchView(frame: CGRect(x: 10, y: 40, width: UIScreenBounds.width - 20, height: 100), titleLabelText: "热门搜索", btnTexts: arr, btnCallBackBlock: { [weak self](btn) in let str = btn.title(for: .normal) //将按钮文字显示到搜索框 self?.searchBar.text = str //将按钮文字写入到偏好设置 self?.writeHistorySearchToUserDefaults(str: str!) }) hotSearchView?.bounds.size.height = (hotSearchView?.searchViewHeight)! scrollView.addSubview(hotSearchView!) }
将历史搜索写入到偏好设置
//将历史搜索写入偏好设置 private func writeHistorySearchToUserDefaults(str: String) { //从偏好设置中读取 var historySearch = UserDefaults.standard.object(forKey: HistorySearch) as? [String] //如果已经存在就不重复写入 for text in historySearch! { if text == str { return } } historySearch!.append(str) UserDefaults.standard.set(historySearch, forKey: HistorySearch) setupHistorySearchView() }
历史记录视图
var historySearchView: SearchView? private func setupHistorySearchView() { if historySearchView != nil { historySearchView?.removeFromSuperview() historySearchView = nil } //从偏好设置中读取 let arr = UserDefaults.standard.object(forKey: HistorySearch) as! [String] if arr.count > 0 { historySearchView = SearchView(frame: CGRect(x: 10, y: (hotSearchView?.frame.maxY)! + 20, width: UIScreenBounds.width - 20, height: 0), titleLabelText: "历史记录", btnTexts: arr, btnCallBackBlock: { [weak self](btn) in let str = btn.title(for: .normal) self?.searchBar.text = str }) historySearchView?.frame.size.height = (historySearchView?.searchViewHeight)! scrollView.addSubview(historySearchView!) updateCleanHistoryButton(hidden: false) } }
更新清空历史视图状态
private func updateCleanHistoryButton(hidden: Bool) { if historySearchView != nil { cleanHistoryButton.frame = CGRect(x: 0.1 * UIScreenBounds.width, y: (historySearchView?.frame.maxY)! + 20, width: UIScreenBounds.width * 0.8, height: 40) } cleanHistoryButton.isHidden = hidden }
清空历史按钮
lazy var cleanHistoryButton: UIButton = { let cleanHistoryButton = UIButton(type: .custom) cleanHistoryButton.setTitle("清 空 历 史", for: .normal) cleanHistoryButton.setTitleColor(UIColor(red: 153 / 255.0, green: 153 / 255.0, blue: 153 / 255.0, alpha: 1), for: .normal) cleanHistoryButton.titleLabel?.font = UIFont.systemFont(ofSize: 14) cleanHistoryButton.backgroundColor = UIColor(red: 239 / 255.0, green: 239 / 255.0, blue: 239 / 255.0, alpha: 1) cleanHistoryButton.layer.cornerRadius = 5 cleanHistoryButton.layer.borderColor = UIColor(red: 200 / 255.0, green: 200 / 255.0, blue: 200 / 255.0, alpha: 1).cgColor cleanHistoryButton.layer.borderWidth = 0.5 cleanHistoryButton.isHidden = true cleanHistoryButton.addTarget(self, action: #selector(cleanHistory), for: .touchUpInside) return cleanHistoryButton }() @objc private func cleanHistory() { var historys = UserDefaults.standard.object(forKey: HistorySearch) as? [String] historys?.removeAll() UserDefaults.standard.set(historys, forKey: HistorySearch) setupHistorySearchView() updateCleanHistoryButton(hidden: true) }
阅读全文
0 0
- iOS: 热门搜索标签界面(Swift3)
- Android历史搜索和热门标签
- Android 搜索界面提示语 根据不同字的个数实现不规则的 弹幕效果 流式布局,热门标签
- Android 自定义控件:打造流布局实现热门搜索标签
- Android 自定义控件:打造流布局实现热门搜索标签
- iOS(Swift3.0) 界面自动下移64的解决办法
- IOS Swift3.1 界面中画定位线
- iOS UISearchBar使用全解 搜索条使用大全 swift3
- 标签:ios开发 界面启动
- iOS 主流搜索界面下的Tag标签布局框架,各种样式任君挑选,包您满意(SKTagView)
- 热门搜索完成
- 热门标签功能。
- android搜索热词(热门标签)流式布局的实现
- FlowLayout流式布局实现热门搜索,发帖加标签效果
- android搜索热词(热门标签)流式布局的实现
- IOS UITextField 跳转到搜索界面
- IOS 大众点评 搜索界面实现
- iOS 用UISearchController自定义搜索界面
- zxing实现二维码生成和解析
- pdf转png,解决微信,Android不能直接展示pdf的问题
- Qt+libvlc+rtsp:视频层上绘图探究
- 4 ElasticSearch java api封装工具类
- 909422229_kotlin第二节:练习代码分享
- iOS: 热门搜索标签界面(Swift3)
- 使用ajaxfileupload.js上传文件成功之后,不走success的解决方法
- mybatis学习:十
- stack 生长方向
- Runtime.getRuntime().addShutdownHook(new Thread())
- pdf预览兼容ie,chrome,Firefox,2345,360亲测
- CI Weekly #20 | 从持续集成的角度看 “云” 的价值
- Android
- 选择排序