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 = false
        r.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.center
        return r
    }()

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

    func bind(_ data:ButtonData) {
        if contentContainer.subviews.count > 0{
            return
        }
        
        let containerWidth=(UIScreen.main.bounds.width-10*2)/4.5
        for (index,it) in data.datum.enumerated(){
            let buttonView = ButtonView()
            buttonView.tg_width.equal(containerWidth)
            buttonView.bind(it.title, it.icon)
            buttonView.tag = 200 + index
            
            if 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! ButtonView
        
        print("buttonViewClick \(button.titleView.text) tag \(button.tag)")
    }

注册ButtonCell  

    override func initViews() {
        super.initViews()
        setBackgroundColor(.colorBackgroundLight)
        
        //初始化TableView结构
        initTableViewSafeArea()
        
        //注册cell
        tableView.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 Foundation

class ButtonData{
    var title:String!
    var icon:UIImage!
    
    init(_ title: String!, _ icon: UIImage!) {
        self.title = title
        self.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! ButtonCell
            cell.bind(data as! ButtonData)
            return cell
        
        default:
            //banner
            
            //取出一个Cell
            let cell = tableView.dequeueReusableCell(withIdentifier:  Constant.CELL, for: indexPath) as! BannerCell
            
            //绑定数据
            cell.bind(data as! BannerData)
            
            cell.bannerClick = {[weak self] data in
                    print("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 = -1
    case banner
    case button
    case sheet
    case song
    case footer
    case refresh
}

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