IOS 19 发现界面（UITableView）快捷按钮实现

发现界面完整效果

本文实现快捷按钮效果

文章基于 IOS 18 发现界面（UITableView）Banner轮播图实现 继续实现发现界面快捷按钮效果

快捷按钮Cell实现

实现流程：

1.创建Cell，及在使用UITableView的Controller控制器上注册Cell；

2.获取data列表数据，并调用UITableView的reloadData()，将数据更新到列表；

3.将data的Item数据绑定UITableView的每一个Cell。

1）创建和注册Cell

从效果图上面可以看出，快捷按钮Cell由一个水平滑动的View，包含多个Button组成，这里使用UIScrollView包裹水平TGLinearLayout包裹多个ButtonView来实现。

通过懒加载创建UIScrollView 和 TGLinearLayout

    lazy var scrollView: UIScrollView = {let r = UIScrollView()r.contentInset = UIEdgeInsets(top: 0, left: 13, bottom: 0, right: 13)r.showsHorizontalScrollIndicator = falser.tg_width.equal(.fill)r.tg_height.equal(100)//真实内容容器r.addSubview(contentContainer)return r}()lazy var contentContainer: TGLinearLayout = {let r = TGLinearLayout(.horz)r.tg_width.equal(.wrap)r.tg_height.equal(100)r.tg_gravity = TGGravity.vert.centerreturn r}()

绑定按钮数据和创建按钮点击事件

    func bind(_ data:ButtonData) {if contentContainer.subviews.count > 0{return}let containerWidth=(UIScreen.main.bounds.width-10*2)/4.5for (index,it) in data.datum.enumerated(){let buttonView = ButtonView()buttonView.tg_width.equal(containerWidth)buttonView.bind(it.title, it.icon)buttonView.tag = 200 + indexif it.title == R.string.localizable.dayRecommend(){//显示日期buttonView.tipView.text = "\(SuperDateUtil.currentDay())"}//设置点击事件buttonView.addTapGestureRecognizer(target: self, action: #selector(buttonViewClick(_:)))contentContainer.addSubview(buttonView)}}@objc func buttonViewClick(_ uuu:UITapGestureRecognizer) {let button = uuu.view as! ButtonViewprint("buttonViewClick \(button.titleView.text) tag \(button.tag)")}

注册ButtonCell  

    override func initViews() {super.initViews()setBackgroundColor(.colorBackgroundLight)//初始化TableView结构initTableViewSafeArea()//注册celltableView.register(BannerCell.self, forCellReuseIdentifier: Constant.CELL)tableView.register(ButtonCell.self, forCellReuseIdentifier: ButtonCell.NAME)}

2）获取data列表数据

定义按钮数据模型ButtonData，按钮数据是本地写死的按钮列表数据。

//
//  ButtonData.swift
//  按钮模型
//
//  Created by jin on 2024/8/28.
//import Foundationclass ButtonData{var title:String!var icon:UIImage!init(_ title: String!, _ icon: UIImage!) {self.title = titleself.icon = icon}init(){}lazy var datum: [ButtonData] = {var r:[ButtonData] = []r.append(ButtonData(R.string.localizable.dayRecommend(),R.image.dayRecommend()))r.append(ButtonData(R.string.localizable.personFm(),R.image.personFm()))r.append(ButtonData(R.string.localizable.sheet(),R.image.sheet()))r.append(ButtonData(R.string.localizable.rank(),R.image.rank()))r.append(ButtonData(R.string.localizable.live(),R.image.buttonLive()))r.append(ButtonData(R.string.localizable.digitalAlbum(),R.image.digitalAlbum()))r.append(ButtonData(R.string.localizable.digitalAlbum(),R.image.digitalAlbum()))return r}()
}

在获取完Banner数据后，获取Button数据，更新tableView.reloadData()

    func loadData() {DefaultRepository.shared.bannerAds().subscribeSuccess { [weak self] data in//清除原来的数据self?.datum.removeAll()//添加轮播图self?.datum.append(BannerData(data:data.data!.data!))//添加快捷按钮self?.datum.append(ButtonData())self?.tableView.reloadData()}.disposed(by: rx.disposeBag)}

3）Item数据绑定Cell

DiscoveryController控制器重写父类的扩展 cellForRowAt方法，创建对应的Cell，并将Item数据绑定到Cell。

extension DiscoveryController{// 返回当前位置cell/// - Parameters:///   - tableView: <#tableView description#>///   - indexPath: <#indexPath description#>/// - Returns: <#description#>override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {let data = datum[indexPath.row]//获取当前Cell的类型let type = typeForItemAtData(data)switch(type){case .button://按钮let cell = tableView.dequeueReusableCell(withIdentifier:  ButtonCell.NAME, for: indexPath) as! ButtonCellcell.bind(data as! ButtonData)return celldefault://banner//取出一个Celllet cell = tableView.dequeueReusableCell(withIdentifier:  Constant.CELL, for: indexPath) as! BannerCell//绑定数据cell.bind(data as! BannerData)cell.bannerClick = {[weak self] data inprint("bannerClick \(data)")}return cell}}
}

Cell类型创建枚举通过Data数据类型判断

    /// 获取列表类型func typeForItemAtData(_ data : Any) -> MyStyle  {if data is ButtonData{return .button} else if data is SheetData{return .sheet} else if data is SongData{return .song} else if data is FooterData{return .footer}return .banner}

枚举类MyStyle

/// 类型枚举，所有类型都定义到这里，方便统一管理，当然也可以按模块，界面拆分
enum MyStyle:Int {case none = -1case bannercase buttoncase sheetcase songcase footercase refresh
}

至此完成快捷按钮的实现。