当前位置：首页 > article >正文

iOS 自动翻滚广告条（榜单条）实现方案

article 2025/2/10 8:06:22

引言

在直播场景中，榜单信息、活动公告或者广告推广通常需要以醒目的方式展示，但由于屏幕空间有限，一次只能显示一条内容。为了让用户能够持续关注这些信息，我们可以实现一个自动翻滚的广告条（或榜单条），让内容定期滚动更新，类似于上下轮播的效果。

本篇博客将介绍如何使用 UITableView + Timer 来实现这一功能，使其能够自动滚动、循环播放，并且在数据更新时依然保持流畅的用户体验。

代码实现

我们以直播间的小时榜信息条为例。由于该场景下的数据更新频率较低，并且滚动不需要过快，而是以固定速度自动翻滚，因此采用UITableView + Timer的方案即可满足需求。

在定时器的选择上，我们使用了Repeat，相比于手动管理Timer的启动和销毁，这种方式更加简洁高效，能够稳定地控制翻滚节奏。

基本UI结构

翻滚条的全部UI就是一个UITableView，但记得设置它不可交互放置用户手动滚动。

class MWVerticalAutoRollView: UIView,UITableViewDelegate,UITableViewDataSource {
    
    /// 滚动列表视图
    private let tableView = UITableView(frame: .zero,style: .plain)
    ....
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        addTableView()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    // 添加列表
    private func addTableView() {
        self.addSubview(tableView)
        tableView.snp.makeConstraints { (make) in
            make.edges.equalToSuperview()
        }
        tableView.backgroundColor = .clear
        tableView.isPagingEnabled = true
        tableView.isScrollEnabled = false
        tableView.delegate = self
        tableView.dataSource = self
        tableView.separatorStyle = .none
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
    }
    
    /// 注册cell 泛型
    /// - Parameter
    func registerCell<T:UITableViewCell>(cell:T.Type) {
        tableView.register(cell, forCellReuseIdentifier: NSStringFromClass(cell))
    }

创建UITableView的实例，当做上下翻滚的列表。
设置UITableView的布局，分页，以及禁止滑动事件。
此外创建了一个对外暴漏的方法用来注册自定义UITableViewCell。

数据处理

想要实现无限的翻滚，以及针对只有一条数据的情况我们首先需要给数据进行处理，主要将第一个数据再次添加到最后一个数据，和轮播一样，以实现假的无限翻滚。

    /// 数据模型数组
    private var dataList:[Any] = []

    /// 设置数据
    /// - Parameter dataList: 数据
    func setData(dataList:[Any]) {
        var results:[Any] = []
        if dataList.count == 0 {
            return
        }
        if dataList.count == 1 {
            results.append(dataList.first!)
            results.append(dataList.first!)
            results.append(dataList.first!)
        }
        if dataList.count == 2 {
            results.append(dataList.first!)
            results.append(dataList.last!)
            results.append(dataList.first!)
        }
        if dataList.count >= 3 {
            results = dataList
            results.append(dataList.first!)
        }
        self.dataList = results
        tableView.reloadData()
        startTimer()
    }

在UITableView的代理方法中，显示dataList数据。

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataList.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        if let delegate = delegate {
            let data = dataList[indexPath.row]
            return delegate.mwVerticalAutoRollView(self, cellForRowAt: indexPath, data: data)
        }
        MWAssert(false, "MWVerticalAutoRollView delegate is nil!")
        return tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
    }
    
    func dequeueReusableCell<T:UITableViewCell>(cell:T.Type,indexPath:IndexPath) -> T {
        return tableView.dequeueReusableCell(withIdentifier: NSStringFromClass(cell), for: indexPath) as! T
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 24.0
    }

数据的数量直接使用dataList.count放回。
UITableView的cell，我们通过代理向该组件内部传递，这样我们可以自定义任何样式的滚动item。
固定列表高度为24。

实现定时滚动

使用Repeater每2.5秒执行一次，每次切换到下一个row，当切换到最后一个时，隐藏动画直接切换到第一个以实现无线翻滚。

    private func startTimer() {
        self.timer = Repeater.every(.seconds(2.5)) { [weak self] _ in
            guard let self = self else { return }
            DispatchQueue.main.async {
                self.autoScroll()
            }
        }
    }
    
    @objc func autoScroll() {
        currentIndex += 1
        if currentIndex >= dataList.count {
            currentIndex = 0
            // 无动画跳回开头
            CATransaction.begin()
            CATransaction.setDisableActions(true)
            tableView.scrollToRow(at: IndexPath(row: currentIndex, section: 0), at: .top, animated: false)
            CATransaction.commit()
        } else {
            // 平滑滚动到下一行
            tableView.scrollToRow(at: IndexPath(row: currentIndex, section: 0), at: .top, animated: true)
        }
    }

开始定时器，主线程执行滚动方法。
每次执行autoScroll（）方法，currentIndex+1，滚动到下一行。
如果已经是最后一行，将currentIndex设置为0，隐藏隐式动画，无动画切换到第一行。

使用示例

组件使用起来非常简单，在需要使用的地方直接创建广播滚动组件MWVerticalAutoRollView的实例，并设置对应布局和数据。

    /// 滚动榜单视图
    private let rollHotListView = MWVerticalAutoRollView()
    
    /// 榜单数据列表
    private var rollHotListDataList = [String]()

    /// 添加滚动榜单视图
    private func addRollHotListView() {
        guard let containerView = self.horSliderContentView else {
            return
        }
        containerView.addSubview(rollHotListView)
        rollHotListView.isHidden = true
        rollHotListView.delegate = self
        rollHotListView.snp.makeConstraints { (make) in
            make.leading.equalToSuperview().offset(16.0)
            make.top.equalToSuperview().offset(MW_TOP_SAFE_HEIGHT + 72)
            make.height.equalTo(24.0)
            make.trailing.equalToSuperview().offset(-16.0)
        }
        rollHotListView.registerCell(cell: MWRollHotListCell.self)
    }


        rollHotListView.setData(dataList: dataList)

实现代理方法，在代理方法中为自定义的WMRollHotListcell渲染数据。

    func mwVerticalAutoRollView(_ view: MWVerticalAutoRollView, cellForRowAt indexPath: IndexPath,data:Any) -> UITableViewCell {
        let cell = view.dequeueReusableCell(cell: MWRollHotListCell.self, indexPath: indexPath)
        if let content = data as? MWRollHotListModel {
            cell.rollHotListModel = content
        }
        cell.selectionStyle = .none
        cell.backgroundColor = .clear
        cell.contentView.backgroundColor = .clear
        return cell
    }