营销型网站审定标准,黔东南住房和城乡建设官网,wordpress获取热门文章,软件技术方案引言
在直播场景中#xff0c;榜单信息、活动公告或者广告推广通常需要以醒目的方式展示#xff0c;但由于屏幕空间有限#xff0c;一次只能显示一条内容。为了让用户能够持续关注这些信息#xff0c;我们可以实现一个自动翻滚的广告条#xff08;或榜单条#xff09;榜单信息、活动公告或者广告推广通常需要以醒目的方式展示但由于屏幕空间有限一次只能显示一条内容。为了让用户能够持续关注这些信息我们可以实现一个自动翻滚的广告条或榜单条让内容定期滚动更新类似于上下轮播的效果。
本篇博客将介绍如何使用 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) inmake.edges.equalToSuperview()}tableView.backgroundColor .cleartableView.isPagingEnabled truetableView.isScrollEnabled falsetableView.delegate selftableView.dataSource selftableView.separatorStyle .nonetableView.register(UITableViewCell.self, forCellReuseIdentifier: cell)}/// 注册cell 泛型/// - Parameterfunc registerCellT: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 dataListresults.append(dataList.first!)}self.dataList resultstableView.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 dequeueReusableCellT: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] _ inguard let self self else { return }DispatchQueue.main.async {self.autoScroll()}}}objc func autoScroll() {currentIndex 1if 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方法currentIndex1滚动到下一行。如果已经是最后一行将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 truerollHotListView.delegate selfrollHotListView.snp.makeConstraints { (make) inmake.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 .nonecell.backgroundColor .clearcell.contentView.backgroundColor .clearreturn cell}结语
通过使用 UITableView Timer 实现自动翻滚的广告条或榜单条我们能够在直播间等场景中简便且高效地展示动态信息。这个方案既满足了平滑滚动的需求又避免了频繁的数据更新带来的性能问题。同时通过简单的定时器控制我们能够灵活地调整滚动的速度和频率保证了良好的用户体验。
