OSComponents
示例
要运行示例项目,首先克隆仓库,然后从 Example 目录运行 pod install
。
要求
安装
OSComponents 通过 CocoaPods 提供。要安装,只需在 Podfile 中添加以下行:
pod 'OSComponents'
组件
简单单元格组件
使用此组件需要两样主要的东西!
1- 向单元格传递布局配置
传递单元格配置有一个简单的方法,那就是使用一个名为 OSSimpleCellConfiguration 的对象。
struct OSSimpleCellConfiguration {
var primaryImagePlaceholder: UIImage?
var secondaryImagePlaceholder: UIImage?
var primaryTextColor: UIColor?
var secondaryTextColor: UIColor?
var tertiaryTextColor: UIColor?
var textSelectable: Bool?
var buttonColor: UIColor?
var leftButtonColor: UIColor?
var rightButtonColor: UIColor?
var buttonText: String?
var leftButtonIcon: UIImage?
var rightButtonIcon: UIImage?
var buttonsType: OSCellButtonsTypes = OSCellButtonsTypes.single
var selectedButtonColor: UIColor?
var selectedButtonTextColor: UIColor?
var selectedButtonText: String?
var selected: Bool = false
var moreButton: Bool = false
}
OSCellButtonsTypes 类型有
enum OSCellButtonsTypes {
case single
case double
case none
}
2- 向单元格传递数据
要传递数据,你必须创建一个名为 OSSimpleCellData 的对象。
struct OSSimpleCellData {
var primaryImage: String?
var secondaryImage: String?
var primaryText: String = ""
var secondaryText: String?
var tertiaryText: String?
var selected: Bool?
}
现在你可能想知道,我该如何做呢?
我相信最好的方法是通过一个例子来展示!
示例
在这个例子中,我们创建多个 通知单元格 和一个 评论单元格。
首先,我们需要设置单元格配置,为此,我们可以创建一个单独的类来存储配置
class SimpleCellConfiguration {
class func configNotificationCell() -> OSSimpleCellConfiguration {
var cellConfiguration = OSSimpleCellConfiguration()
cellConfiguration.primaryTextColor = UIColor.black
cellConfiguration.secondaryTextColor = UIColor.gray
cellConfiguration.buttonsType = OSCellButtonsTypes.none
return cellConfiguration
}
class func configFollowCell() -> OSSimpleCellConfiguration {
var cellConfiguration = configNotificationCell()
cellConfiguration.buttonColor = UIColor.fromRGBA(r: 15, g: 195, b: 172, a: 1)
cellConfiguration.selectedButtonColor = UIColor.fromRGBA(r: 15, g: 195, b: 172, a: 1)
cellConfiguration.selectedButtonTextColor = UIColor.white
cellConfiguration.buttonText = "seguir"
cellConfiguration.buttonsType = OSCellButtonsTypes.single
cellConfiguration.selectedButtonText = "seguindo"
return cellConfiguration
}
class func configAddCell() -> OSSimpleCellConfiguration {
var cellConfiguration = configNotificationCell()
cellConfiguration.leftButtonIcon = #imageLiteral(resourceName: "close")
cellConfiguration.leftButtonColor = UIColor.gray
cellConfiguration.rightButtonIcon = #imageLiteral(resourceName: "check")
cellConfiguration.rightButtonColor = UIColor.gray
cellConfiguration.buttonsType = OSCellButtonsTypes.double
return cellConfiguration
}
class func configCommentCell() -> OSSimpleCellConfiguration {
var cellConfiguration = OSSimpleCellConfiguration()
cellConfiguration.primaryTextColor = UIColor.black
cellConfiguration.secondaryTextColor = UIColor.gray
cellConfiguration.buttonsType = OSCellButtonsTypes.none
cellConfiguration.moreButton = true
return cellConfiguration
}
}
通过配置方法,我们可以设置单元格布局!现在,我们必须将数据传递给单元格,为此我们可以在 项目模型内部 创建一个方法来自动转换属性。
例如
NotificationModel
struct NotificationModel: Mappable {
var image: String = ""
var title: String = ""
var subtitle: String?
var isFollowing: Bool?
var type: NotificationType = .add
init(image: String, title: String, subtitle: String?, isFollowing: Bool?, type: NotificationType) {
self.image = image
self.subtitle = subtitle
self.title = title
self.isFollowing = isFollowing
self.type = type
}
init?(map: Map) {
}
mutating func mapping(map: Map) {
}
func mapToCell() -> OSSimpleCellData {
var data = OSSimpleCellData()
data.primaryImage = image
data.primaryText = title
data.secondaryText = subtitle
data.selected = isFollowing
return data
}
}
CommentModel
struct CommentModel: Mappable {
var image: String = ""
var comment: String = ""
var username: String = ""
init(image: String, comment: String, username: String) {
self.image = image
self.comment = comment
self.username = username
}
init?(map: Map) {
}
mutating func mapping(map: Map) {
}
func mapToCell() -> OSSimpleCellData {
var data = OSSimpleCellData()
data.primaryImage = image
data.primaryText = username
data.secondaryText = comment
return data
}
}
如你所见,这两个模型都有一个名为 mapToCell() 的方法,该方法将属性转换为 OSSimpleCellData。
准备工作完成后,我们就可以创建 TableView 了
ViewController
在 ViewController 中,我们通常设置 TableView 并注册单元格
func setupTableView() {
tableView.build(delegate: self)
tableView.register(cellType: OSSimpleTableViewCell.self)
}
然后,我们始终有一个数据数组,例如
func getData() -> [NotificationModel] {
let notif = NotificationModel(image: "https://abrilveja.files.wordpress.com/2017/05/obama-berlim-02.jpg",
title: "Presidente Obama", subtitle: "200", isFollowing: true, type: NotificationType.follow)
return [notif, notif, notif] // mock with 3 equal notifications
}
之后,我们在代理方法内配置单元格
func configCell(for indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(for: indexPath, cellType: OSSimpleTableViewCell.self)
guard let notif = getData()[indexPath.row] as? NotificationModel else { return UITableViewCell() }
switch notif.type {
case NotificationType.add:
cell.configWith(cellConfiguration: SimpleCellConfiguration.configAddCell(), cellData: notif.mapToCell(), delegate: self, indexPath: indexPath)
break
case NotificationType.follow:
cell.configWith(cellConfiguration: SimpleCellConfiguration.configFollowCell(), cellData: notif.mapToCell(), delegate: self, indexPath: indexPath)
break
case NotificationType.text:
cell.configWith(cellConfiguration: SimpleCellConfiguration.configNotificationCell(), cellData: notif.mapToCell(), delegate: self, indexPath: indexPath)
break
}
return cell
}
在单元格配置中,我们传递 SimpleCellConfiguration 和 notif.mapToCell() 以及数据。
然后一切准备就绪,TableView 就可以用于测试了!
作者
Outsmart
许可协议
OSComponents遵循MIT许可协议。有关更多信息,请参阅LICENSE文件。