時間軸表格 Timeline Cell
一、新增UITableViewCell
宣告資料
var line = UIView() var circle = UILabel() var circlebg = UIView() var price = UILabel() var time = UILabel() var item = UILabel() var markview = UIView() var mark = UILabel()建立UILabel、UIView
override init(style:UITableViewCellStyle, reuseIdentifier:String?) { super.init(style: style, reuseIdentifier: reuseIdentifier) line.backgroundColor = .lightGray line.translatesAutoresizingMaskIntoConstraints = false contentView.addSubview(line) NSLayoutConstraint(item: line, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 5).isActive = true NSLayoutConstraint(item: line, attribute: .top, relatedBy: .equal, toItem: contentView, attribute: .top, multiplier: 1, constant: 0).isActive = true NSLayoutConstraint(item: line, attribute: .bottom, relatedBy: .equal, toItem: contentView, attribute: .bottom, multiplier: 1, constant: 0.5).isActive = true NSLayoutConstraint(item: line, attribute: .leading, relatedBy: .equal, toItem: contentView, attribute: .leading, multiplier: 1, constant: 40).isActive = true circlebg.backgroundColor = .white circlebg.translatesAutoresizingMaskIntoConstraints = false circlebg.layer.cornerRadius = 17.5 circlebg.layer.masksToBounds = true contentView.addSubview(circlebg) NSLayoutConstraint(item: circlebg, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 35).isActive = true NSLayoutConstraint(item: circlebg, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 35).isActive = true NSLayoutConstraint(item: circlebg, attribute: .top, relatedBy: .equal, toItem: contentView, attribute: .top, multiplier: 1, constant: 10).isActive = true NSLayoutConstraint(item: circlebg, attribute: .leading, relatedBy: .equal, toItem: contentView, attribute: .leading, multiplier: 1, constant: 25).isActive = true circle.text = "＄" circle.textColor = .white circle.textAlignment = .center circle.font = .boldSystemFont(ofSize: 12) circle.backgroundColor = UIColor(red: 0.05, green: 0.15, blue: 0.75, alpha: 0.7) circle.translatesAutoresizingMaskIntoConstraints = false circle.layer.cornerRadius = 12.5 circle.layer.masksToBounds = true contentView.addSubview(circle) NSLayoutConstraint(item: circle, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 25).isActive = true NSLayoutConstraint(item: circle, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 25).isActive = true NSLayoutConstraint(item: circle, attribute: .top, relatedBy: .equal, toItem: circlebg, attribute: .top, multiplier: 1, constant: 5).isActive = true NSLayoutConstraint(item: circle, attribute: .leading, relatedBy: .equal, toItem: circlebg, attribute: .leading, multiplier: 1, constant: 5).isActive = true price.textColor = .black price.font = .boldSystemFont(ofSize: 18) price.backgroundColor = .clear price.translatesAutoresizingMaskIntoConstraints = false contentView.addSubview(price) NSLayoutConstraint(item: price, attribute: .top, relatedBy: .equal, toItem: contentView, attribute: .top, multiplier: 1, constant: 16).isActive = true NSLayoutConstraint(item: price, attribute: .leading, relatedBy: .equal, toItem: circle, attribute: .trailing, multiplier: 1, constant: 20).isActive = true time.textColor = .lightGray time.font = .systemFont(ofSize: 12) time.backgroundColor = .clear time.translatesAutoresizingMaskIntoConstraints = false contentView.addSubview(time) NSLayoutConstraint(item: time, attribute: .centerY, relatedBy: .equal, toItem: price, attribute: .centerY, multiplier: 1, constant: 0).isActive = true NSLayoutConstraint(item: time, attribute: .leading, relatedBy: .equal, toItem: price, attribute: .trailing, multiplier: 1, constant: 20).isActive = true item.textColor = .darkGray item.font = .boldSystemFont(ofSize: 18) item.backgroundColor = .clear item.translatesAutoresizingMaskIntoConstraints = false contentView.addSubview(item) NSLayoutConstraint(item: item, attribute: .top, relatedBy: .equal, toItem: price, attribute: .bottom, multiplier: 1, constant: 10).isActive = true NSLayoutConstraint(item: item, attribute: .leading, relatedBy: .equal, toItem: circle, attribute: .trailing, multiplier: 1, constant: 30).isActive = true markview.backgroundColor = UIColor(red: 0.05, green: 0.15, blue: 0.75, alpha: 0.3) markview.layer.cornerRadius = 5 markview.layer.masksToBounds = true markview.translatesAutoresizingMaskIntoConstraints = false contentView.addSubview(markview) NSLayoutConstraint(item: markview, attribute: .top, relatedBy: .equal, toItem: item, attribute: .bottom, multiplier: 1, constant: 10).isActive = true NSLayoutConstraint(item: markview, attribute: .leading, relatedBy: .equal, toItem: circle, attribute: .trailing, multiplier: 1, constant: 40).isActive = true NSLayoutConstraint(item: markview, attribute: .bottom, relatedBy: .equal, toItem: contentView, attribute: .bottom, multiplier: 1, constant: -10).isActive = true NSLayoutConstraint(item: markview, attribute: .trailing, relatedBy: .equal, toItem: contentView, attribute: .trailing, multiplier: 1, constant: 5).isActive = true mark.textColor = .white mark.font = .boldSystemFont(ofSize: 14) mark.numberOfLines = 0 mark.translatesAutoresizingMaskIntoConstraints = false contentView.addSubview(mark) NSLayoutConstraint(item: mark, attribute: .top, relatedBy: .equal, toItem: item, attribute: .bottom, multiplier: 1, constant: 20).isActive = true NSLayoutConstraint(item: mark, attribute: .leading, relatedBy: .equal, toItem: circle, attribute: .trailing, multiplier: 1, constant: 50).isActive = true NSLayoutConstraint(item: mark, attribute: .bottom, relatedBy: .equal, toItem: contentView, attribute: .bottom, multiplier: 1, constant: -20).isActive = true NSLayoutConstraint(item: mark, attribute: .trailing, relatedBy: .equal, toItem: contentView, attribute: .trailing, multiplier: 1, constant: -10).isActive = true } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") }
二、ViewController.swift
import UIKit
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
var tv = UITableView()
let WIDTH = UIScreen.main.bounds.size.width
let HEIGHT = UIScreen.main.bounds.size.height
class data {
var price = ""
var time = ""
var item = ""
var mark = ""
init(price: String, time: String, item: String, mark: String) {
self.price = price
self.time = time
self.item = item
self.mark = mark
}
}
var DATA = [
data(price: "25", time: "2017/ 03/ 02 20:05", item: "無糖綠", mark: ""),
data(price: "220", time: "2017/ 03/ 02 18:44", item: "壽喜燒", mark: ""),
data(price: "440", time: "2017/ 03/ 02 13:14", item: "家樂福", mark: "衛生紙105\n茶裏王120\n餅乾215"),
data(price: "30", time: "2017/ 03/ 02 10:47", item: "甜甜圈", mark: ""),
data(price: "120", time: "2017/ 03/ 01 17:32", item: "炸蝦定食", mark: "跟朋友聚餐"),
data(price: "25", time: "2017/ 03/ 01 17:05", item: "無糖綠", mark: ""),
data(price: "75", time: "2017/ 03/ 01 12:40", item: "雞腿飯", mark: "")
]
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .lightGray
tv = UITableView(frame: CGRect(x: 0,
y: 20,
width: WIDTH,
height: HEIGHT - 20),
style: .plain)
tv.delegate = self
tv.dataSource = self
tv.register(UITableViewCell.self,
forCellReuseIdentifier: "cell")
tv.backgroundColor = .clear
tv.separatorInset = UIEdgeInsetsMake(0, 95, 0, 0)
tv.allowsSelection = false
tv.tableFooterView = UIView(frame: .zero)
tv.estimatedRowHeight = 36.0
tv.rowHeight = UITableViewAutomaticDimension
view.addSubview(tv)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return DATA.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell: uitableviewcell! = tableView.dequeueReusableCell(withIdentifier: "cell") as? uitableviewcell // 轉型為自訂的uitableviewcell
if cell == nil {
cell = uitableviewcell(style: .default, reuseIdentifier: "cell")
}
cell.price.text = "\(DATA[indexPath.row].price) 元"
cell.time.text = DATA[indexPath.row].time
cell.item.text = DATA[indexPath.row].item
cell.mark.text = DATA[indexPath.row].mark
cell.markview.isHidden = (cell.mark.text?.isEmpty)! ? true : false
return cell
}
}
下載完整範例 OneDrive