领券联盟搜索商品
效果视频
bilibili：https://www.bilibili.com/video/BV1bK4y1d78X/
<iframe src="//player.bilibili.com/player.html?bvid=BV1bK4y1d78X&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
搜索流程
输入框文本不是空，进行搜索
请求搜索
得到结果后，显示到ui table view中
搜索按下后，关闭键盘
点击搜索框后，触摸屏幕，关闭键盘
点击列表，关闭键盘
触摸列表，关闭键盘
整个搜索背景就是这样了。
我们接下来实现整个流程。
搜索接口调试
// get方式，包含了2个必须的关键词，keyword，page，通过字典方式传递
let paras = ["keyword": keyword, "page": 1] as [String : Any]
Alamofire.request(UnionApi.search(),parameters: paras)
.responseObject { (response: DataResponse<SearchBean>) in
//获取数据成功
print("搜索成功了")
let result = response.result.value
// 设置到数组中
if let arr = result?.data?.tbkDgMaterialOptionalResponse?.resultList?.mapData {
//清空全部数据
self.preferentialList.removeAll()
self.preferentialList = arr
//停止下拉刷新
self.uiTable.es.stopPullToRefresh()
//刷新列表
self.uiTable.reloadData()
}
}
商品详情显示
由于返回结果的结构和前面推荐商品雷同，可以直接复用cell的样式。直接套进去就可以了。
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
//返回数组的大小
if preferentialList.isEmpty {
tableView.separatorStyle = .none
tableView.setEmptyDataView(image: UIImage(systemName: "tortoise") ?? UIImage(), title: "")
}else{
tableView.separatorStyle = .singleLine
tableView.removeEmptyDataView()
}
return preferentialList.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//我们的cell处理
let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! PreferentialCellTableViewCell
cell.setValueForCell(item: preferentialList[indexPath.row])
return cell
}
处理键盘
点击搜索的时候，关闭键盘
// 这个页面退出编辑模式，键盘就会关闭
self.view.endEditing(true)
点击或者触摸uitableview，关闭键盘
let tap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(UIInputViewController.dismissKeyboard))
tap.numberOfTouchesRequired = 1
tap.cancelsTouchesInView = false
uiTable.addGestureRecognizer(tap)
@objc func dismissKeyboard() {
//Causes the view (or one of its embedded text fields) to resign the first responder status.
view.endEditing(true)
}
全部代码
//
// FindViewController.swift
// uitable
//
// Created by Alice on 2021/3/8.
//
import UIKit
import SnapKit
import Alamofire
import AlamofireObjectMapper
class FindViewController: BaseViewController, UISearchBarDelegate,
UITableViewDelegate, UITableViewDataSource{
let cellId = "PreferentialCell"
//当前全部数据
private var preferentialList = [MapData]()
private lazy var uiTable: UITableView = {
let tab = UITableView()
//开始隐藏分割线
tab.tableFooterView = UIView()
//cell的高度自动计算
tab.rowHeight = UITableView.automaticDimension
return tab
}()
private lazy var lab: UILabel = {
let label = UILabel()
return label
}()
private lazy var searchBox: UISearchBar = {
let searchView = UISearchBar()
return searchView
}()
override func viewDidLoad() {
super.viewDidLoad()
let tap: UITapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(UIInputViewController.dismissKeyboard))
tap.numberOfTouchesRequired = 1
tap.cancelsTouchesInView = false
uiTable.addGestureRecognizer(tap)
//标题
title = "搜索"
view.addSubview(lab)
//搜索
view.addSubview(searchBox)
lab.text = "find"
lab.snp.makeConstraints { (make) in
make.center.equalToSuperview()
}
searchBox.delegate = self
//约束搜索
searchBox.snp.makeConstraints { (mm) in
mm.left.equalToSuperview()
mm.right.equalToSuperview()
mm.top.equalTo(view.safeAreaLayoutGuide.snp.top)
mm.height.equalTo(60)
}
view.addSubview(uiTable)
self.uiTable.keyboardDismissMode = .onDrag
//UIScrollViewKeyboardDismissModeOnDrag
//设置代{过}{滤}理
uiTable.delegate = self
uiTable.dataSource = self
uiTable.register(PreferentialCellTableViewCell.self, forCellReuseIdentifier: cellId)
uiTable.snp.makeConstraints { (make) in
//安全区内
make.top.equalTo(searchBox.snp.bottom)
make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
//宽度等于屏幕
make.width.equalToSuperview()
}
}
@objc func dismissKeyboard() {
//Causes the view (or one of its embedded text fields) to resign the first responder status.
view.endEditing(true)
}
private func searchByKeyword(keyword: String){
if keyword.isEmpty {
return
}
self.view.endEditing(true)
let paras = ["keyword": keyword, "page": 1] as [String : Any]
Alamofire.request(UnionApi.search(),parameters: paras)
.responseObject { (response: DataResponse<SearchBean>) in
//获取数据成功
print("搜索成功了")
let result = response.result.value
// 设置到数组中
if let arr = result?.data?.tbkDgMaterialOptionalResponse?.resultList?.mapData {
//清空全部数据
self.preferentialList.removeAll()
self.preferentialList = arr
//停止下拉刷新
self.uiTable.es.stopPullToRefresh()
//刷新列表
self.uiTable.reloadData()
}
}
}
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
self.searchBox.resignFirstResponder()
}
}
extension FindViewController{
//文字变更
func searchBar(_ searchBar: UISearchBar, textDidChange searchText: String) {
//搜索文字触发回调
print("[ViewController searchBar] 输入 searchText: \(searchText)")
}
func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {
print("键盘上面点击搜索 \(searchBar.text)")
self.searchByKeyword(keyword: searchBar.text ?? "")
}
}
extension FindViewController{
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
//返回数组的大小
if preferentialList.isEmpty {
tableView.separatorStyle = .none
tableView.setEmptyDataView(image: UIImage(systemName: "tortoise") ?? UIImage(), title: "")
}else{
tableView.separatorStyle = .singleLine
tableView.removeEmptyDataView()
}
return preferentialList.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
//我们的cell处理
let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath) as! PreferentialCellTableViewCell
cell.setValueForCell(item: preferentialList[indexPath.row])
return cell
}
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
//禁止cell点击之后显示灰色
tableView.deselectRow(at: indexPath, animated: false)
//进入详情页面
let goodsVC = GoodsDetailControllerViewController()
if let imgs = preferentialList[indexPath.row].smallImages?.string{
goodsVC.images = imgs
}
goodsVC.goodsData = preferentialList[indexPath.row]
navigationController?.pushViewController(goodsVC, animated: true)
}
}
后续计划
搜索关键词的历史记录显示实现
由于最近比较忙，不知道什么时候更新，哈哈
如果不理解的，也可以和我一起交流。
我是ios入门萌新。
代码：https://github.com/cat13954/IOSUiTableViewSample
bilibili：https://www.bilibili.com/video/BV1bK4y1d78X/
<iframe src="//player.bilibili.com/player.html?bvid=BV1bK4y1d78X&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
发表于 2021-5-9 19:04
|
发表于 2021-5-9 22:13
