CNTimelineCell

CNTimelineCell 是一个有用的框架，用于使用 UITableView 生成时间线。

示例截图:

要求

iOS 11+
Swift 5.3+

安装

Swift 包管理器

Swift 包管理器是一个用于自动化 Swift 代码分发的工具，并已集成到 swift 编译器中。

一旦你设置好你的 Swift 包，添加 CNTimelineCell 作为依赖项就像把它添加到你的 Package.swift 的 dependencies 值中一样简单。

dependencies: [
    .package(url: "https://github.com/chrisnyw/CNTimelineCell", from: "0.3")
]

如何使用

- 导入 CNTimelineCell

当你需要时导入 CNTimelineCell。

import CNTimelineCell

准备你的 [CNTimelineCellItem], 例如

  let dataItem: [CNTimelineCellItem] = [CNTimelineCellItem(title: "Sample", content: "Sample for LeftTimeline\nlineType = .none", leftType: .none),
                                    CNTimelineCellItem(title: "Start", content: "lineType = .start", image: UIImage(named: "star"), leftType: .start),
                                    CNTimelineCellItem(title: "Spot", content: "lineType = .spot", leftType: .spot),
                                    CNTimelineCellItem(title: "Line", content: "lineType = .line", image: UIImage(named: "moon"), leftType: .line),
                                    CNTimelineCellItem(title: "End", content: "lineType = .end", image: UIImage(named: "school"), leftType: .end),]

如下注册 TableViewCell

    let timelineTableViewCellNib = UINib(nibName: CNTimelineCell.identifier, bundle: CNTimelineCell.bundle)
    self.tableView.register(timelineTableViewCellNib, forCellReuseIdentifier: CNTimelineCell.identifier)

渲染你的 cell

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: CNTimelineCell.identifier, for: indexPath) as! CNTimelineCell
    
    let timelineItem = dataItem[indexPath.row]
    cell.setCell(item: timelineItem)
    // or set pass your custom CNTimelineCellStyle:
    // cell.setCell(item: timelineItem, style: timelineStyle)
    return cell
  }

通过以上配置，你将得到如下结果：

配置

CNTimelineCellItem

var title: String 消息标题
var content: String? 消息内容
var image: UIImage? 图片图标
var leftType: TimelineType 左侧 TimelineType (默认: .none)
var rightType: TimelineType 右侧 TimelineType (默认: .none)

示例 CNTimelineCellItem

  let dataItem: [CNTimelineCellItem] = [CNTimelineCellItem(title: "Good morning", content: "Today is sunny day!", image: UIImage(named: "light")),
                                        CNTimelineCellItem(title: "08:00 am", content: "Tom wakes up", image: UIImage(named: "star"), leftType: .start),
                                        CNTimelineCellItem(title: "08:05 am", content: "Breakfast time", leftType: .spot),
                                        CNTimelineCellItem(title: "08:30 am", content: "Mary wakes up", image: UIImage(named: "star"), leftType: .line, rightType: .start),
                                        CNTimelineCellItem(title: "09:00 am", content: "School time", image: UIImage(named: "school"), leftType: .spot, rightType: .spot),
                                        CNTimelineCellItem(title: "09:00 am - 12:00pm", content: "Many lessons\nMath\nEnglish\netc...", leftType: .line, rightType: .line),
                                        CNTimelineCellItem(title: "12:05 pm", content: "Lunch together", image: UIImage(named: "restaurant"), leftType: .spot, rightType: .spot),
                                        CNTimelineCellItem(title: "01:00 pm", content: "Outdoor activities, play games in sports court.", image: UIImage(named: "sports_basketball"), leftType: .spot, rightType: .spot),

                                        CNTimelineCellItem(title: "until 03:00 pm", content: "Afternoon lesson", leftType: .line, rightType: .line),
                                        CNTimelineCellItem(title: "03:00 pm", content: "Free time", leftType: .spot, rightType: .spot),
                                        CNTimelineCellItem(title: "03:30 pm", content: "Art lesson", leftType: .line, rightType: .spot),
                                        CNTimelineCellItem(title: "03:15 pm", content: "Take a nap", leftType: .end, rightType: .line),
                                        CNTimelineCellItem(title: "04:00 pm", content: "Play in playground", leftType: .none, rightType: .spot),
                                        CNTimelineCellItem(title: "04:15 pm", content: "Wake up from nap", leftType: .start, rightType: .line),
                                        CNTimelineCellItem(title: "05:00 pm", content: "Play TV games", leftType: .spot, rightType: .line),
                                        CNTimelineCellItem(title: "07:00 pm", content: "Dinner", image: UIImage(named: "restaurant"), leftType: .line, rightType: .spot),
                                        CNTimelineCellItem(title: "08:00 pm", content: "Dinner", image: UIImage(named: "restaurant"), leftType: .spot, rightType: .line),
                                        CNTimelineCellItem(title: "10:00 pm", content: "Goto sleep", image: UIImage(named: "bed"), leftType: .line, rightType: .end),
                                        CNTimelineCellItem(title: "10:30 pm", content: "Goto sleep", image: UIImage(named: "single_bed"), leftType: .end, rightType: .none),
                                        CNTimelineCellItem(title: "Awesome", content: "That's all for the day", image: UIImage(named: "auto_awesome")),]

在 cellForRowAtIndexPath 中更新样式和 item

  override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: CNTimelineCell.identifier, for: indexPath) as! CNTimelineCell
    
    let timelineItem = dataItem[indexPath.row]
    
////    // sample for change border color
    if indexPath.row == dataItem.count-1 || indexPath.row == 0 {
      timelineStyle.bubbleStyle.borderColor = .orange
    } else {
      timelineStyle.bubbleStyle.borderColor = .init(red: 0/255, green: 147/255, blue: 51/255, alpha: 1)
    }
//
////    // sample for change backgroundColor of bubbleView
    if indexPath.row == 3 {
      timelineStyle.bubbleStyle.backgroundColor = .lightGray
      timelineStyle.messageSeparator = .orange
    } else {
      timelineStyle.bubbleStyle.backgroundColor = .clear
      timelineStyle.messageSeparator = .lightGray
    }

    cell.setCell(item: timelineItem, style: timelineStyle)
    
    return cell
  }