Swift UItableView 以编程方式自定义单元格(文档)?
Swift UItableView Custom cell programmatically (documentation)?
我一直在努力寻找一些 documentation/tutorial/examples。关于如何在 swift 中制作高级表格视图。但是除了没完没了的故事板教程,我一无所获。
我在没有故事板和笔尖的情况下这样做。除了 Apple 的 /poorly/ explained 库之外,我还没有找到任何文档。
与其试图准确解释我正在寻找的内容,不如简单地展示下面的设计图片。
现在,我显然不是要你们为我创建这个。我只是希望你能给我发一个 link 给一些 documentation/tutorial。这解释了如何使细胞不同?以及如何以编程方式在单元格中定位元素。
我一直在搜索单元格限制,但找不到任何内容?
我也研究了原型单元,但我能找到的都是故事板相关的。
我希望你们能给我一个类似的例子,一些文档/教程。
还有一件重要的事情。我发现的所有未使用故事板的文档。都用了一个tableViewController。
我正在使用带有 UITableView 的 UIViewController。不是 tableViewController,它的工作方式似乎有很大的不同。
现在我只是想让原型工作。
下面是我的数据:
var objects = NSMutableArray()
var dataArray = [ ["stockName":"CTC Media Inc.","action":"sell","stockPrice":12.44],
["stockName":"Transglobal Energy","action":"buy","stockPrice":39.40],
["stockName":"NU Skin Enterprises","action":"buy","stockPrice":4.18]
]
虽然我只能从中获取并显示一条数据。
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
//return self.stocks.count
return dataArray.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
let object = dataArray[indexPath.row] as NSDictionary
cell.textLabel?.text = object["stockName"] as? String
return cell
}
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
println("You selected cell #\(indexPath.row)!")
}
但我仍然对如何定位这些数据或向其中添加更多数据一无所知。比如右边的 UIView 带有特定的背景色。在该 UIView 中居中 UILabel,在左侧添加一个 UIView,带有填充,单元格之间的自定义间距。等等等等
任何帮助,link文档,建议将不胜感激!
编辑:
我尝试在单元格内添加约束。 "cell.view.addConstraints("
但是它当然会抛出一个错误 "UITableViewCell does not have a member named view"。
那么单元格内部如何做约束,我还是一头雾水:(
编辑 2 - 进度:
我设法使用以下代码显示了一个 UIView:
testView.setTranslatesAutoresizingMaskIntoConstraints(false)
testView.backgroundColor = UIColor.redColor()
cell.addSubview(testView)
var viewsDictionary = [ "testView":testView]
cell.addConstraints(
NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-50-[testView]|", options: nil, metrics: nil, views: viewsDictionary))
cell.addConstraints(
NSLayoutConstraint.constraintsWithVisualFormat(
"V:|[testView]|", options: nil, metrics: nil, views: viewsDictionary))
但是,由于某些原因,它只出现在最后一个单元格中,而不是所有单元格中?
我只是玩了一点。尽管所有 colors/fonts 都不太正确,但这将为您提供良好的起点。希望对你有帮助。
class Stock {
var name: String?
var action: String?
var price: String?
init(stockData: [String: AnyObject]) {
if let n = stockData["stockName"] as? String {
name = n
}
if let a = stockData["action"] as? String {
action = a
}
if let p = stockData["stockPrice"] as? Float {
price = NSString(format: "%.2f", p)
}
}
var backgroundColor: UIColor {
if action == "sell" {
return UIColor.greenColor()
}
return UIColor.blueColor()
}
var typeColor: UIColor {
if action == "sell" {
return UIColor.blackColor()
}
return UIColor.purpleColor()
}
var priceLabelColor: UIColor {
if action == "sell" {
return UIColor.redColor()
}
return UIColor.greenColor()
}
}
class StockCell: UITableViewCell {
let padding: CGFloat = 5
var background: UIView!
var typeLabel: UILabel!
var nameLabel: UILabel!
var priceLabel: UILabel!
var stock: Stock? {
didSet {
if let s = stock {
background.backgroundColor = s.backgroundColor
priceLabel.text = s.price
priceLabel.backgroundColor = s.priceLabelColor
typeLabel.text = s.action
typeLabel.backgroundColor = s.typeColor
nameLabel.text = s.name
setNeedsLayout()
}
}
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
backgroundColor = UIColor.clearColor()
selectionStyle = .None
background = UIView(frame: CGRectZero)
background.alpha = 0.6
contentView.addSubview(background)
nameLabel = UILabel(frame: CGRectZero)
nameLabel.textAlignment = .Left
nameLabel.textColor = UIColor.blackColor()
contentView.addSubview(nameLabel)
typeLabel = UILabel(frame: CGRectZero)
typeLabel.textAlignment = .Center
typeLabel.textColor = UIColor.whiteColor()
contentView.addSubview(typeLabel)
priceLabel = UILabel(frame: CGRectZero)
priceLabel.textAlignment = .Center
priceLabel.textColor = UIColor.whiteColor()
contentView.addSubview(priceLabel)
}
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func prepareForReuse() {
super.prepareForReuse()
}
override func layoutSubviews() {
super.layoutSubviews()
background.frame = CGRectMake(0, padding, frame.width, frame.height - 2 * padding)
typeLabel.frame = CGRectMake(padding, (frame.height - 25)/2, 40, 25)
priceLabel.frame = CGRectMake(frame.width - 100, padding, 100, frame.height - 2 * padding)
nameLabel.frame = CGRectMake(CGRectGetMaxX(typeLabel.frame) + 10, 0, frame.width - priceLabel.frame.width - (CGRectGetMaxX(typeLabel.frame) + 10), frame.height)
}
}
在你的视图控制器中
var stocks: [Stock] = []
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.whiteColor()
for stockData in dataArray {
var stock = Stock(stockData: stockData)
stocks.append(stock)
}
tableView = UITableView(frame: view.bounds, style: .Grouped)
tableView.delegate = self
tableView.dataSource = self
tableView.separatorStyle = .None
tableView.registerClass(StockCell.self, forCellReuseIdentifier: NSStringFromClass(StockCell))
view.addSubview(tableView)
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return stocks.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier( NSStringFromClass(StockCell), forIndexPath: indexPath) as StockCell
cell.stock = stocks[indexPath.row]
return cell
}
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 70
}
自定义单元格
class StockCell: UITableViewCell {
let padding: CGFloat = 5
var background: UIView!
var typeLabel: UILabel!
var nameLabel: UILabel!
var priceLabel: UILabel!
var stock: Stock? {
didSet {
if let s = stock {
background.backgroundColor = s.backgroundColor
priceLabel.text = s.price
priceLabel.backgroundColor = s.priceLabelColor
typeLabel.text = s.action
typeLabel.backgroundColor = s.typeColor
nameLabel.text = s.name
setNeedsLayout()
}
}
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
backgroundColor = UIColor.clearColor()
selectionStyle = .None
background = UIView(frame: CGRectZero)
background.alpha = 0.6
contentView.addSubview(background)
nameLabel = UILabel(frame: CGRectZero)
nameLabel.textAlignment = .Left
nameLabel.textColor = UIColor.blackColor()
contentView.addSubview(nameLabel)
typeLabel = UILabel(frame: CGRectZero)
typeLabel.textAlignment = .Center
typeLabel.textColor = UIColor.whiteColor()
contentView.addSubview(typeLabel)
priceLabel = UILabel(frame: CGRectZero)
priceLabel.textAlignment = .Center
priceLabel.textColor = UIColor.whiteColor()
contentView.addSubview(priceLabel)
}
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func prepareForReuse() {
super.prepareForReuse()
}
override func layoutSubviews() {
super.layoutSubviews()
background.frame = CGRectMake(0, padding, frame.width, frame.height - 2 * padding)
typeLabel.frame = CGRectMake(padding, (frame.height - 25)/2, 40, 25)
priceLabel.frame = CGRectMake(frame.width - 100, padding, 100, frame.height - 2 * padding)
nameLabel.frame = CGRectMake(CGRectGetMaxX(typeLabel.frame) + 10, 0, frame.width - priceLabel.frame.width - (CGRectGetMaxX(typeLabel.frame) + 10), frame.height)
}
}
我一直在努力寻找一些 documentation/tutorial/examples。关于如何在 swift 中制作高级表格视图。但是除了没完没了的故事板教程,我一无所获。
我在没有故事板和笔尖的情况下这样做。除了 Apple 的 /poorly/ explained 库之外,我还没有找到任何文档。
与其试图准确解释我正在寻找的内容,不如简单地展示下面的设计图片。
现在,我显然不是要你们为我创建这个。我只是希望你能给我发一个 link 给一些 documentation/tutorial。这解释了如何使细胞不同?以及如何以编程方式在单元格中定位元素。
我一直在搜索单元格限制,但找不到任何内容?
我也研究了原型单元,但我能找到的都是故事板相关的。
我希望你们能给我一个类似的例子,一些文档/教程。
还有一件重要的事情。我发现的所有未使用故事板的文档。都用了一个tableViewController。
我正在使用带有 UITableView 的 UIViewController。不是 tableViewController,它的工作方式似乎有很大的不同。
现在我只是想让原型工作。
下面是我的数据:
var objects = NSMutableArray()
var dataArray = [ ["stockName":"CTC Media Inc.","action":"sell","stockPrice":12.44],
["stockName":"Transglobal Energy","action":"buy","stockPrice":39.40],
["stockName":"NU Skin Enterprises","action":"buy","stockPrice":4.18]
]
虽然我只能从中获取并显示一条数据。
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
//return self.stocks.count
return dataArray.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
let object = dataArray[indexPath.row] as NSDictionary
cell.textLabel?.text = object["stockName"] as? String
return cell
}
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
println("You selected cell #\(indexPath.row)!")
}
但我仍然对如何定位这些数据或向其中添加更多数据一无所知。比如右边的 UIView 带有特定的背景色。在该 UIView 中居中 UILabel,在左侧添加一个 UIView,带有填充,单元格之间的自定义间距。等等等等
任何帮助,link文档,建议将不胜感激!
编辑:
我尝试在单元格内添加约束。 "cell.view.addConstraints("
但是它当然会抛出一个错误 "UITableViewCell does not have a member named view"。
那么单元格内部如何做约束,我还是一头雾水:(
编辑 2 - 进度:
我设法使用以下代码显示了一个 UIView:
testView.setTranslatesAutoresizingMaskIntoConstraints(false)
testView.backgroundColor = UIColor.redColor()
cell.addSubview(testView)
var viewsDictionary = [ "testView":testView]
cell.addConstraints(
NSLayoutConstraint.constraintsWithVisualFormat(
"H:|-50-[testView]|", options: nil, metrics: nil, views: viewsDictionary))
cell.addConstraints(
NSLayoutConstraint.constraintsWithVisualFormat(
"V:|[testView]|", options: nil, metrics: nil, views: viewsDictionary))
但是,由于某些原因,它只出现在最后一个单元格中,而不是所有单元格中?
我只是玩了一点。尽管所有 colors/fonts 都不太正确,但这将为您提供良好的起点。希望对你有帮助。
class Stock {
var name: String?
var action: String?
var price: String?
init(stockData: [String: AnyObject]) {
if let n = stockData["stockName"] as? String {
name = n
}
if let a = stockData["action"] as? String {
action = a
}
if let p = stockData["stockPrice"] as? Float {
price = NSString(format: "%.2f", p)
}
}
var backgroundColor: UIColor {
if action == "sell" {
return UIColor.greenColor()
}
return UIColor.blueColor()
}
var typeColor: UIColor {
if action == "sell" {
return UIColor.blackColor()
}
return UIColor.purpleColor()
}
var priceLabelColor: UIColor {
if action == "sell" {
return UIColor.redColor()
}
return UIColor.greenColor()
}
}
class StockCell: UITableViewCell {
let padding: CGFloat = 5
var background: UIView!
var typeLabel: UILabel!
var nameLabel: UILabel!
var priceLabel: UILabel!
var stock: Stock? {
didSet {
if let s = stock {
background.backgroundColor = s.backgroundColor
priceLabel.text = s.price
priceLabel.backgroundColor = s.priceLabelColor
typeLabel.text = s.action
typeLabel.backgroundColor = s.typeColor
nameLabel.text = s.name
setNeedsLayout()
}
}
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
backgroundColor = UIColor.clearColor()
selectionStyle = .None
background = UIView(frame: CGRectZero)
background.alpha = 0.6
contentView.addSubview(background)
nameLabel = UILabel(frame: CGRectZero)
nameLabel.textAlignment = .Left
nameLabel.textColor = UIColor.blackColor()
contentView.addSubview(nameLabel)
typeLabel = UILabel(frame: CGRectZero)
typeLabel.textAlignment = .Center
typeLabel.textColor = UIColor.whiteColor()
contentView.addSubview(typeLabel)
priceLabel = UILabel(frame: CGRectZero)
priceLabel.textAlignment = .Center
priceLabel.textColor = UIColor.whiteColor()
contentView.addSubview(priceLabel)
}
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func prepareForReuse() {
super.prepareForReuse()
}
override func layoutSubviews() {
super.layoutSubviews()
background.frame = CGRectMake(0, padding, frame.width, frame.height - 2 * padding)
typeLabel.frame = CGRectMake(padding, (frame.height - 25)/2, 40, 25)
priceLabel.frame = CGRectMake(frame.width - 100, padding, 100, frame.height - 2 * padding)
nameLabel.frame = CGRectMake(CGRectGetMaxX(typeLabel.frame) + 10, 0, frame.width - priceLabel.frame.width - (CGRectGetMaxX(typeLabel.frame) + 10), frame.height)
}
}
在你的视图控制器中
var stocks: [Stock] = []
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.whiteColor()
for stockData in dataArray {
var stock = Stock(stockData: stockData)
stocks.append(stock)
}
tableView = UITableView(frame: view.bounds, style: .Grouped)
tableView.delegate = self
tableView.dataSource = self
tableView.separatorStyle = .None
tableView.registerClass(StockCell.self, forCellReuseIdentifier: NSStringFromClass(StockCell))
view.addSubview(tableView)
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return stocks.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier( NSStringFromClass(StockCell), forIndexPath: indexPath) as StockCell
cell.stock = stocks[indexPath.row]
return cell
}
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 70
}
自定义单元格
class StockCell: UITableViewCell {
let padding: CGFloat = 5
var background: UIView!
var typeLabel: UILabel!
var nameLabel: UILabel!
var priceLabel: UILabel!
var stock: Stock? {
didSet {
if let s = stock {
background.backgroundColor = s.backgroundColor
priceLabel.text = s.price
priceLabel.backgroundColor = s.priceLabelColor
typeLabel.text = s.action
typeLabel.backgroundColor = s.typeColor
nameLabel.text = s.name
setNeedsLayout()
}
}
}
override init(style: UITableViewCellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
backgroundColor = UIColor.clearColor()
selectionStyle = .None
background = UIView(frame: CGRectZero)
background.alpha = 0.6
contentView.addSubview(background)
nameLabel = UILabel(frame: CGRectZero)
nameLabel.textAlignment = .Left
nameLabel.textColor = UIColor.blackColor()
contentView.addSubview(nameLabel)
typeLabel = UILabel(frame: CGRectZero)
typeLabel.textAlignment = .Center
typeLabel.textColor = UIColor.whiteColor()
contentView.addSubview(typeLabel)
priceLabel = UILabel(frame: CGRectZero)
priceLabel.textAlignment = .Center
priceLabel.textColor = UIColor.whiteColor()
contentView.addSubview(priceLabel)
}
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func prepareForReuse() {
super.prepareForReuse()
}
override func layoutSubviews() {
super.layoutSubviews()
background.frame = CGRectMake(0, padding, frame.width, frame.height - 2 * padding)
typeLabel.frame = CGRectMake(padding, (frame.height - 25)/2, 40, 25)
priceLabel.frame = CGRectMake(frame.width - 100, padding, 100, frame.height - 2 * padding)
nameLabel.frame = CGRectMake(CGRectGetMaxX(typeLabel.frame) + 10, 0, frame.width - priceLabel.frame.width - (CGRectGetMaxX(typeLabel.frame) + 10), frame.height)
}
}