[ios]ios商品详情页面(连载11)
没有效果图的博客，就没有灵魂。### 商品详情页面
> xcode 12.4
>
> swift 5.3
前面我们实现加载商品列表。开始商品详情页面的简单编写。
> 商品页面顶部，显示多个图片的轮播图片
>
> 中间显示价格，商品名字
>
> 分类，店铺，描述信息。
目前还需要实现的是券信息显示，和复制到粘贴板中，打开淘宝。
### 代码编写
轮播图片
```shell
https://github.com/MQZHot/ZCycleView
```
使用这个工具
```shell
pod 'ZCycleView'
```
如何使用
```swift
//轮播图
private lazy var cycleView: ZCycleView = {
let width = view.bounds.width
let cycleView1 = ZCycleView()
//cycleView1.placeholderImage = #imageLiteral(resourceName: "placeholder")
cycleView1.scrollDirection = .horizontal
cycleView1.delegate = self
cycleView1.reloadItemsCount(images.count)
//缩放比例
cycleView1.itemZoomScale = 1
cycleView1.itemSpacing = 0
cycleView1.initialIndex = 1
cycleView1.isAutomatic = false
// cycleView1.isInfinite = false
cycleView1.itemSize = CGSize(width: width, height: width)
return cycleView1
}()
```
需要实现代{过}{滤}理
```swift
extension GoodsDetailControllerViewController: ZCycleViewProtocol{
func cycleViewRegisterCellClasses() -> {
return ["CustomCollectionViewCell": CustomCollectionViewCell.self]
}
func cycleViewConfigureCell(collectionView: UICollectionView, cellForItemAt indexPath: IndexPath, realIndex: Int) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
//cell.imageView.image = images
cell.setImageUrl(imageUrl: images)
return cell
}
func cycleViewConfigurePageControl(_ cycleView: ZCycleView, pageControl: ZPageControl) {
pageControl.isHidden = false
pageControl.currentPageIndicatorTintColor = .red
pageControl.pageIndicatorTintColor = .green
pageControl.frame = CGRect(x: 0, y: cycleView.bounds.height-25, width: cycleView.bounds.width, height: 25)
}
}
```
---
其他信息的展示，按照snapkit约束，就很容易做到。
都是label的内容填充，这个依葫芦画瓢，配置好字体的大小和颜色。
最后完整的代码
```swift
//
//GoodsDetailControllerViewController.swift
//uitable
//
//Created by Alice on 2021/3/27.
//
import UIKit
import SnapKit
let width = UIScreen.main.bounds.size.width
let height = UIScreen.main.bounds.size.height
//商品详情页面
class GoodsDetailControllerViewController: BaseViewController {
//轮播图片的集合
var images = ()
var goodsData: MapData?
//轮播图
private lazy var cycleView: ZCycleView = {
let width = view.bounds.width
let cycleView1 = ZCycleView()
//cycleView1.placeholderImage = #imageLiteral(resourceName: "placeholder")
cycleView1.scrollDirection = .horizontal
cycleView1.delegate = self
cycleView1.reloadItemsCount(images.count)
//缩放比例
cycleView1.itemZoomScale = 1
cycleView1.itemSpacing = 0
cycleView1.initialIndex = 1
cycleView1.isAutomatic = false
// cycleView1.isInfinite = false
cycleView1.itemSize = CGSize(width: width, height: width)
return cycleView1
}()
//最后价格
private lazy var labPrice: UILabel = {
let lab = UILabel()
lab.font = lab.font.withSize(14)
lab.textColor = ColorUtils.parser("#F35410")
return lab
}()
//原价
private lazy var labOriginalPrice: UILabel = {
let lab = UILabel()
lab.textColor = ColorUtils.parser("#9D9E9F")
lab.font = lab.font.withSize(12)
lab.textAlignment = NSTextAlignment.left
return lab
}()
//商品名字
private lazy var labGoodsName: UILabel = {
let lab = UILabel()
lab.numberOfLines = 3
lab.font = UIFont.boldSystemFont(ofSize: 20)
lab.textColor = ColorUtils.parser("#151617")
return lab
}()
//标签
private lazy var labTag: DDPaddingLabel = {
let lab = DDPaddingLabel()
lab.font = lab.font.withSize(14)
//文字的颜色
lab.textColor = ColorUtils.parser("#818181")
lab.layer.backgroundColor = ColorUtils.parser("#F6F6F6").cgColor
lab.layer.cornerRadius = 10
lab.textAlignment = .center
lab.padding.left = 6
lab.padding.right = 6
return lab
}()
//简单描述
private lazy var labDesc: UILabel = {
let lab = UILabel()
lab.font = lab.font.withSize(12)
lab.textColor = ColorUtils.parser("#818181")
lab.numberOfLines = 2
return lab
}()
private lazy var labStoreName: UILabel = {
let lab = UILabel()
lab.font = lab.font.withSize(12)
lab.textColor = ColorUtils.parser("#818181")
return lab
}()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white
//self.title = "详情"
view.addSubview(cycleView)
view.addSubview(labPrice)
//轮播图的位置与大小
cycleView.snp.makeConstraints {
$0.top.equalToSuperview()
$0.left.equalToSuperview()
$0.right.equalToSuperview()
$0.height.equalTo(cycleView.snp.width)
}
//价格位置
labPrice.snp.makeConstraints { (make) in
make.left.equalToSuperview().offset(12)
make.top.equalTo(cycleView.snp.bottom).offset(10)
}
//优惠之后的
if let item = goodsData {
let coupon = item.couponAmount
let price = (item.zkFinalPrice! as NSString).floatValue
//取2位小数
let finalPrice = String.init(format: "%.2f", (price - Float(coupon)))
let priceContent = "￥\(finalPrice)"
//高矮处理,把$和价格都放进来一起处理
labPrice.attributedText= AppFontUtils.formatThePrice(priceContent: priceContent, tagFontSize: UIFont.systemFont(ofSize: 14), priceFontSize:UIFont.boldSystemFont(ofSize: 20), textColor: ColorUtils.parser("#F35410"))
}
view.addSubview(labGoodsName)
//商品名字
labGoodsName.snp.makeConstraints { (make) in
make.left.equalToSuperview().offset(12)
make.top.equalTo(labPrice.snp.bottom).offset(10)
make.right.equalToSuperview()
}
labGoodsName.text = goodsData?.title
//原价
view.addSubview(labOriginalPrice)
labOriginalPrice.snp.makeConstraints { (make) in
make.left.equalTo(labPrice.snp.right).offset(4)
make.bottom.equalTo(labPrice.snp.bottom).offset(-3)
}
//处理中划线
if let item = goodsData {
let original = "原价:" + item.zkFinalPrice!
//把处理中划线的值赋值
labOriginalPrice.attributedText = AppFontUtils.strikethroughStyle(content: original)
}
view.addSubview(labTag)
//标签
labTag.snp.makeConstraints { (make) in
make.left.equalToSuperview().offset(12)
make.top.equalTo(labGoodsName.snp.bottom).offset(4)
}
labTag.text = goodsData?.levelOneCategoryName
//简单描述
view.addSubview(labDesc)
labDesc.snp.makeConstraints { (make) in
make.left.equalToSuperview().offset(12)
make.top.equalTo(labTag.snp.bottom).offset(4)
make.right.equalToSuperview()
}
if let desc = goodsData?.itemDescription {
labDesc.text = desc
}
//店铺名字
view.addSubview(labStoreName)
labStoreName.snp.makeConstraints { (make) in
make.left.equalToSuperview().offset(12)
make.top.equalTo(labDesc.snp.bottom).offset(4)
}
if let name = goodsData?.nick {
labStoreName.text = "\(name)>"
}
}
}
extension GoodsDetailControllerViewController: ZCycleViewProtocol{
func cycleViewRegisterCellClasses() -> {
return ["CustomCollectionViewCell": CustomCollectionViewCell.self]
}
func cycleViewConfigureCell(collectionView: UICollectionView, cellForItemAt indexPath: IndexPath, realIndex: Int) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CustomCollectionViewCell", for: indexPath) as! CustomCollectionViewCell
//cell.imageView.image = images
cell.setImageUrl(imageUrl: images)
return cell
}
func cycleViewConfigurePageControl(_ cycleView: ZCycleView, pageControl: ZPageControl) {
pageControl.isHidden = false
pageControl.currentPageIndicatorTintColor = .red
pageControl.pageIndicatorTintColor = .green
pageControl.frame = CGRect(x: 0, y: cycleView.bounds.height-25, width: cycleView.bounds.width, height: 25)
}
}
```
---
代码中都带了注释，如果你是跟着我的笔记学习的，应该很容易看懂了。
如果不理解的，也可以和我一起交流。
我是ios入门萌新。
代码：https://github.com/cat13954/IOSUiTableViewSample 看到这位IOS大佬，我啪得一下就点进来支持了，很快啊{:301_978:} lyl610abc 发表于 2021-3-27 13:40
看到这位IOS大佬，我啪得一下就点进来支持了，很快啊
小伙子别乱来，我没闪{:1_907:} 好久没更新了啊
页:
[1]