IOS 20 发现界面（UITableView）歌单列表（UICollectionView）实现

2024-09-04 12:36
文章标签 实现 界面 发现 列表 ios 20 uitableview 歌单 uicollectionview

本文主要是介绍IOS 20 发现界面（UITableView）歌单列表（UICollectionView）实现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

发现界面完整效果

本文实现歌单列表效果

文章基于 IOS 19 发现界面（UITableView）快捷按钮实现 继续实现发现界面歌单列表效果

歌单列表Cell实现

实现流程：

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

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

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

1）创建和注册Cell

从效果图上面可以看出，歌单列表Cell由一个title + 宫格列表View来实现的，这里宫格列表使用UICollectionView来实现。需要注意的是，UICollectionView本身也是一个可滑动的控件，把UICollectionView内嵌到UITableView中，且需要显示UICollectionView的全部Item；那么就需要设置UICollectionView不允许滑动，且UICollectionView高度 == Item高度*行数。

通过懒加载创建ItemTitleView 和 UICollectionView，自定义ItemTitleView，就是TGRelativeLayout包含title和右边的icon，并封装UICollectionView到ViewFactoryUtil.collectionView()中。

    /// 标题控件lazy var titleView: ItemTitleView = {let r = ItemTitleView()r.titleView.text = R.string.localizable.recommendSheet()return r}()lazy var collectionView: UICollectionView = {let r = ViewFactoryUtil.collectionView()r.delegate = selfr.dataSource = selfr.isScrollEnabled = falsereturn r}()
//
//  ItemTitleView.swift
//  首页-发现界面-歌单组/推荐单曲组 标题view
//
//  Created by jin on 2024/8/29.
//import UIKitimport TangramKitclass ItemTitleView : TGRelativeLayout{init(){super.init(frame: CGRect.zero)initViews()}required init?(coder: NSCoder) {super.init(coder: coder)initViews()}func initViews(){tg_width.equal(.fill)tg_height.equal(.wrap)tg_padding = UIEdgeInsets(top: PADDING_MEDDLE, left: PADDING_OUTER, bottom: PADDING_MEDDLE, right: PADDING_OUTER)addSubview(titleView)addSubview(moreIconView)}lazy var titleView: UILabel = {let r = UILabel()r.tg_width.equal(.wrap)r.tg_height.equal(.wrap)r.tg_centerY.equal(0)r.numberOfLines = 1r.font = UIFont.boldSystemFont(ofSize: TEXT_LARGE2)r.textColor = .colorOnSurfacereturn r}()lazy var moreIconView: UIImageView = {let r = UIImageView()r.tg_width.equal(15)r.tg_height.equal(15)r.image = R.image.superChevronRight()?.withTintColor()r.tintColor = .black80r.tg_right.equal(0)r.tg_centerY.equal(0)//图片完全显示到控件里面r.contentMode = .scaleAspectFitreturn r}()
}

    /// 创建CollectionViewstatic func collectionView() -> UICollectionView {let r = UICollectionView(frame: CGRect.zero, collectionViewLayout: collectionViewFlowLayout())r.backgroundColor = .clear//不显示滚动条r.showsVerticalScrollIndicator = falser.showsHorizontalScrollIndicator = false//collectionView的内容从collectionView顶部距离开始显示，不要自动偏移状态栏尺寸r.contentInsetAdjustmentBehavior = .neverr.tg_width.equal(.fill)r.tg_height.equal(.fill)return r}

重写，添加ItemTitleView 和 UICollectionView到SheetGroupCell

class SheetGroupCell:BaseTableViewCell{static let NAME = "SheetGroupCell"var datum:Array<Sheet> = []override func initViews() {super.initViews()//分割线container.addSubview(ViewFactoryUtil.smallDivider())//标题container.addSubview(titleView)container.addSubview(collectionView)}override func getContainerOrientation() -> TGOrientation {return .vert}
}

绑定宫格列表数据，动态计算Item宽高。

    func bind(_ data:SheetData) {//计算每个cell宽度//屏幕宽度-外边距16*2-(self.spanCount-1)*5cellWidth = (SCREEN_WIDTH-PADDING_OUTER*CGFloat(2) - (spanCount - CGFloat(1))*PADDING_SMALL)/spanCount//cell高度，5:图片和标题边距，40：2行文字高度cellHeight = cellWidth + PADDING_SMALL + 40//计算可以显示几行let rows = ceil(CGFloat(data.datum.count) / spanCount)//CollectionView高度等于，行数*行高，10：垂直方向每个cell间距let viewHeight = rows * (cellHeight + PADDING_MEDDLE)collectionView.tg_height.equal(viewHeight)datum.removeAll()datum = data.datumcollectionView.reloadData()}

注册SheetGroupCell

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

2）获取data列表数据

定义宫格列表数据模型SheetData

//
//  SheetData.swift
//  发现界面歌单数据
//
//  Created by jin on 2024/8/29.
//import Foundationclass SheetData{var datum:[Sheet]!init(_ datum: [Sheet]!) {self.datum = datum}
}

请求接口获取歌单列表数据，更新tableView.reloadData()

class DiscoveryController: BaseLogicController {override func initViews() {super.initViews()setBackgroundColor(.colorBackgroundLight)//初始化TableView结构initTableViewSafeArea()//注册celltableView.register(BannerCell.self, forCellReuseIdentifier: Constant.CELL)tableView.register(ButtonCell.self, forCellReuseIdentifier: ButtonCell.NAME)tableView.register(SheetGroupCell.self, forCellReuseIdentifier: SheetGroupCell.NAME)}override func initDatum() {super.initDatum()loadData()}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?.loadSheetsData()}.disposed(by: rx.disposeBag)}/// 请求歌单数据func loadSheetsData() {DefaultRepository.shared.sheets(size: VALUE12).subscribeSuccess { [weak self] data in//添加歌单数据self?.datum.append(SheetData(data.data!.data!))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 cellcase .sheet://歌单let cell = tableView.dequeueReusableCell(withIdentifier:  SheetGroupCell.NAME, for: indexPath) as! SheetGroupCellcell.bind(data as! SheetData)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}}
}

歌单UICollectionView Cell实现

由于UICollectionView也是一个列表控件，实现UICollectionView的Cell的流程跟 实现UITableView的Cell的流程基本类似。

实现流程：

1.创建Cell，及在使用UICollectionView的View上注册Cell；

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

3.将data的Item数据绑定UICollectionView的每一个Cell；

4.重写UICollectionViewDelegateFlowLayout，计算Cell的尺寸。

1）创建和注册Cell

从效果图上面可以看出，歌单列表Item的Cell由一个垂直TGLinearLayout包含UIImageView + UILabel来实现的。布局比较简单，实现代码如下：

//
//  SheetCell.swift
//  歌单cell
//
//  Created by jin on 2024/8/29.
//import Foundationclass SheetCell : BaseCollectionViewCell{override func initViews() {super.initViews()container.tg_space = PADDING_SMALLcontainer.addSubview(iconView)container.addSubview(titleView)}func bind(_ data:Sheet) {//OC库显示图片
//        if let r = data.icon {
//            let r = ResourceUtil.resourceUri(r)
//            iconView.sd_setImage(with: URL(string: r), placeholderImage: R.image.placeholder())
//        }iconView.show(data.icon)titleView.text = data.title}lazy var iconView: UIImageView = {let r = UIImageView()r.tg_width.equal(.fill)r.tg_height.equal(r.tg_width)r.image = R.image.placeholder()//图片从中心等比向外面填充，控件没有黑边，但图片可能被裁剪r.contentMode = .scaleAspectFill//小圆角r.smallCorner()return r}()/// 标题lazy var titleView: UILabel = {let r = UILabel()r.tg_width.equal(.fill)r.tg_height.equal(.wrap)r.numberOfLines = 2r.font = UIFont.systemFont(ofSize:TEXT_MEDDLE)r.textColor = .colorOnSurfacereturn r}()
}

 2）获取data列表数据

定义宫格列表Item数据模型Sheet

//
//  Sheet.swift
//  歌单对象
//
//  Created by jin on 2024/8/23.
//import Foundation//导入JSON解析框架
import HandyJSONclass Sheet : HandyJSON{/// 歌单标题var title:String!/// 歌单封面var icon:String?/// 点击数var clicksCount:Int=0/// 收藏数var collectsCount:Int=0/// 评论数var commentsCount:Int=0/// 音乐数量var songsCount:Int=0/// 歌单创建者
//    var user:User!
//
//    /// 歌曲列表
//    var songs:Array<Song>?var detail:String?required init() {}
}

从SheetGroupCell bind()中获取歌单宫格列表Item数据，更新collectionView.reloadData()

class SheetGroupCell:BaseTableViewCell{static let NAME = "SheetGroupCell"var datum:Array<Sheet> = []var cellWidth:CGFloat!var cellHeight:CGFloat!var spanCount:CGFloat = 3override func initViews() {super.initViews()//分割线container.addSubview(ViewFactoryUtil.smallDivider())//标题container.addSubview(titleView)container.addSubview(collectionView)collectionView.register(SheetCell.self, forCellWithReuseIdentifier: Constant.CELL)}override func getContainerOrientation() -> TGOrientation {return .vert}func bind(_ data:SheetData) {//计算每个cell宽度//屏幕宽度-外边距16*2-(self.spanCount-1)*5cellWidth = (SCREEN_WIDTH-PADDING_OUTER*CGFloat(2) - (spanCount - CGFloat(1))*PADDING_SMALL)/spanCount//cell高度，5:图片和标题边距，40：2行文字高度cellHeight = cellWidth + PADDING_SMALL + 40//计算可以显示几行let rows = ceil(CGFloat(data.datum.count) / spanCount)//CollectionView高度等于，行数*行高，10：垂直方向每个cell间距let viewHeight = rows * (cellHeight + PADDING_MEDDLE)collectionView.tg_height.equal(viewHeight)datum.removeAll()datum = data.datumcollectionView.reloadData()}
}

3）Item数据绑定Cell

SheetGroupCell 重写父类的扩展 cellForItemAt方法，创建对应的Cell，并将Item数据绑定到Cell。

/// CollectionView数据源和代理
extension SheetGroupCell:UICollectionViewDataSource,UICollectionViewDelegate{/// 有多少个func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {return datum.count}/// 返回cellfunc collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {let data = datum[indexPath.row]let cell = collectionView.dequeueReusableCell(withReuseIdentifier: Constant.CELL, for: indexPath) as! SheetCellcell.bind(data)return cell}func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {if let d = delegate {d.sheetCLick(data: datum[indexPath.row])}}
}

4）计算Cell尺寸

重写UICollectionViewDelegateFlowLayout，返回Cell的尺寸

/// UICollectionViewDelegateFlowLayout
extension SheetGroupCell:UICollectionViewDelegateFlowLayout{/// 返回CollectionView里面的Cell到CollectionView的间距func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {return UIEdgeInsets(top: 0, left: PADDING_OUTER, bottom: PADDING_OUTER, right: PADDING_OUTER)}/// 返回每个Cell的行间距func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {return PADDING_MEDDLE}/// 返回每个Cell的列间距func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {return PADDING_SMALL}/// cell尺寸func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {return CGSize(width: cellWidth, height: cellHeight)}
}

至此完成歌单列表的实现。

这篇关于IOS 20 发现界面（UITableView）歌单列表（UICollectionView）实现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1136040。

相关文章

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
安卓链接正常显示，ios#符被转义%23导致链接访问404

安卓链接正常显示，ios#符被转义%23导致链接访问404

原因分析： url中含有特殊字符 中文未编码 都有可能导致URL转换失败，所以需要对url编码处理  如下： guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时，会被误伤转义为%23，导致链接无法访问
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略

Kubernetes PodSecurityPolicy：PSP能实现的5种主要安全策略 1. 特权模式限制2. 宿主机资源隔离3. 用户和组管理4. 权限提升控制5. SELinux配置 💖The Begin💖点点关注，收藏不迷路💖 Kubernetes的PodSecurityPolicy（PSP）是一个关键的安全特性，它在Pod创建之前实施安全策略，确保P
阅读更多...
系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

系统架构师考试学习笔记第三篇——架构设计高级知识（20）通信系统架构设计理论与实践

本章知识考点：         第20课时主要学习通信系统架构设计的理论和工作中的实践。根据新版考试大纲,本课时知识点会涉及案例分析题(25分),而在历年考试中,案例题对该部分内容的考查并不多,虽在综合知识选择题目中经常考查,但分值也不高。本课时内容侧重于对知识点的记忆和理解,按照以往的出题规律,通信系统架构设计基础知识点多来源于教材内的基础网络设备、网络架构和教材外最新时事热点技术。本课时知识
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2