背景
我们来加载领券数据，综合复习我们之前学过的东西。
-
网络请求数据
-
json转模型
-
UItableview使用
-
约束布局使用
-
cell的重用和背景处理
-
如何调整好看的UI
我们请的数据来源
https://api.sunofbeach.net/shop/onSell/1
这就是我们今天学习的数据了。
开始编写模型
根据json，我们转模型，这里推荐一个工具
jsonexport
只要把json全部复制过去，就能帮你生成对应的swift模型了，很方便
网络请求
func getData(page: Int) {
//获取数据
Alamofire.request(UnionApi.getPreferentialUrl(page: page))
.responseObject { (response: DataResponse<PreferentialBean>) in
//获取数据成功
let result = response.result.value
print("获取的数据page:\(page)")
print(result?.data?.tbkDgOptimusMaterialResponse?.resultList?.mapData?.count)
//设置到数组中
if page == 1{
if let arr = result?.data?.tbkDgOptimusMaterialResponse?.resultList?.mapData {
self.preferentialList = arr
}
}
//刷新列表
self.uiTable.reloadData()
}
}
编写我们的cell
//
// PreferentialCellTableViewCell.swift
// uitable
//
// Created by Alice on 2021/3/12.
//
import UIKit
class PreferentialCellTableViewCell: UITableViewCell {
private lazy var imgCover: UIImageView = {
let img = UIImageView()
img.layer.cornerRadius = 5
img.layer.masksToBounds = true
img.layer.borderWidth = 1
img.layer.borderColor = UIColor.white.cgColor
return img
}()
//商品名字
private lazy var labGoodsName: UILabel = {
let lab = UILabel()
lab.numberOfLines = 2
lab.font = lab.font.withSize(14)
lab.textColor = ColorUtils.parser("#151617")
return lab
}()
//原价
private lazy var labOriginalPrice: UILabel = {
let lab = UILabel()
lab.textColor = ColorUtils.parser("#9D9E9F")
lab.font = lab.font.withSize(10)
lab.textAlignment = NSTextAlignment.left
return lab
}()
//最后价格
private lazy var labPrice: UILabel = {
let lab = UILabel()
lab.font = lab.font.withSize(15)
lab.textColor = ColorUtils.parser("#F35410")
return lab
}()
//店铺名字
private lazy var labStoreName: UILabel = {
let lab = UILabel()
lab.font = lab.font.withSize(10)
lab.textColor = ColorUtils.parser("#9B9C9D")
return lab
}()
//💰符号
private lazy var labMoneyTag: UILabel = {
let lab = UILabel()
lab.font = lab.font.withSize(10)
lab.text = "￥"
lab.textColor = ColorUtils.parser("#F35410")
return lab
}()
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// Configure the view for the selected state
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
addSubview(imgCover)
addSubview(labGoodsName)
addSubview(labOriginalPrice)
addSubview(labPrice)
addSubview(labStoreName)
addSubview(labMoneyTag)
//布局左边的封面图片
imgCover.snp.makeConstraints { (make) in
make.top.equalToSuperview().offset(10)
make.left.equalToSuperview().offset(12)
make.size.equalTo(90)
make.bottom.equalTo(-10)
}
//名字
labGoodsName.snp.makeConstraints { (make) in
make.left.equalTo(imgCover.snp.right).offset(10)
make.top.equalToSuperview().offset(10)
make.right.equalToSuperview().offset(-10)
//make.bottom.equalTo(-10)
}
//店铺名字
labStoreName.snp.makeConstraints { (make) in
make.left.equalTo(imgCover.snp.right).offset(10)
make.bottom.equalTo(imgCover.snp.bottom)
}
//💰符号
labMoneyTag.snp.makeConstraints { (make) in
make.left.equalTo(imgCover.snp.right).offset(10)
make.bottom.equalTo(labStoreName.snp.top).offset(-4)
}
//优惠之后的价格
labPrice.snp.makeConstraints { (make) in
make.left.equalTo(labMoneyTag.snp.right).offset(0)
make.bottom.equalTo(labStoreName.snp.top).offset(-3)
}
//优惠之前的价格
labOriginalPrice.snp.makeConstraints { (make) in
make.left.equalTo(labPrice.snp.right).offset(4)
make.bottom.equalTo(labStoreName.snp.top).offset(-5)
}
}
func setValueForCell(item: MapData) {
//print("图地址:\(item.pictUrl)")
let url = "https:\(item.pictUrl ?? "")"
//print(url)
let u = URL(string: url)
//商品图片
imgCover.kf.setImage(with: u)
//商品名字,只显示2行
labGoodsName.text = item.title
//开始价格
//处理中划线
let original = "原价:" + item.zkFinalPrice!
let priceString = NSMutableAttributedString.init(string: original)
priceString.addAttribute(NSAttributedString.Key.strikethroughStyle, value: NSNumber.init(value: 1), range: NSRange(location: 0, length: priceString.length))
//把处理中划线的值赋值
labOriginalPrice.attributedText = priceString
//优惠之后的
let coupon = item.couponAmount
let price = (item.zkFinalPrice! as NSString).floatValue
//取2位小数
let finalPrice = String.init(format: "%.2f", (price - Float(coupon)))
labPrice.text = "\(finalPrice)"
//店铺名字
labStoreName.text = "\(item.nick!)>"
}
}
cell中的代码，都做了大量注释，如果你学习了我之前的连载的文章，代码应该能看懂。
我也在不断学习中，代码比较丑，大佬轻喷。
控制器中配置
//
// PreferentialViewController.swift
// uitable
//
// Created by Alice on 2021/3/12.
//
import UIKit
import Alamofire
//领券联盟特惠页面.单纯的一个ui tab
class PreferentialViewController: BaseViewController, 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
}()
override func viewDidLoad() {
super.viewDidLoad()
self.title = "特惠"
view.addSubview(uiTable)
//设置代{过}{滤}理
uiTable.delegate = self
uiTable.dataSource = self
uiTable.register(PreferentialCellTableViewCell.self, forCellReuseIdentifier: cellId)
uiTable.snp.makeConstraints { (make) in
//安全区内
make.top.equalTo(view.safeAreaLayoutGuide.snp.top)
make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom)
//宽度等于屏幕
make.width.equalToSuperview()
}
//加载第一页数据
getData(page: 1)
}
func getData(page: Int) {
//获取数据
Alamofire.request(UnionApi.getPreferentialUrl(page: page))
.responseObject { (response: DataResponse<PreferentialBean>) in
//获取数据成功
let result = response.result.value
print("获取的数据page:\(page)")
print(result?.data?.tbkDgOptimusMaterialResponse?.resultList?.mapData?.count)
//设置到数组中
if page == 1{
if let arr = result?.data?.tbkDgOptimusMaterialResponse?.resultList?.mapData {
self.preferentialList = arr
}
}
//刷新列表
self.uiTable.reloadData()
}
}
}
extension PreferentialViewController{
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
//返回数组的大小
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)
}
}
整个列表就大概完成
一个商品的列表就完成了。
当然，这只是简单的显示，后面还有很多改进空间的。比如数据没有来的时候，显示一个默认的提示页面。
数据加载失败了，显示失败的页面。还有这个只是显示一页的数据，分页的数据还没做。
计划
拉开始位置，支持刷新
拉到尾巴位置支持加载更多
代码地址：
https://github.com/cat13954/IOSUiTableViewSample
[复制链接]
发表于 2021-3-13 12:10
|
发表于 2021-3-13 13:50
