gpt4 book ai didi

ios - iOS中UITableView的自定义设计

转载 作者:行者123 更新时间:2023-11-29 12:07:14 26 4
gpt4 key购买 nike

我正在练习我的 Swift 编码,因为我是一名设计师,所以我想为我的应用程序进行定制设计。列表应用程序很简单。它有 2 个 View 。第一个是带有待办事项的 TableView,第二个 View 是关于添加新项目的。

我的单元格是圆形的并且有边框颜色。我如何风格化一个单元格?我遇到了很多 tuts,但我还没有设法找到答案。

我听说可以通过对原型(prototype)单元进行样式化来实现,但我真的不知道该怎么做。我到处用谷歌搜索,但没有找到任何可以解释我的问题的东西。

这是我的设计:

Home Screen of To Do App

你能指导我吗?

到目前为止我的代码:

import UIKit

class FirstViewController: UIViewController, UITableViewDataSource {

@IBOutlet weak var tableView: UITableView!

// Delete functionality
func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
if editingStyle == UITableViewCellEditingStyle.Delete {
listItems.removeAtIndex(indexPath.row)
}
tableView.reloadData()
}

// This function calculates how many rows our table has according to listItems array
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return listItems.count
}

// Data in cells
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = UITableViewCell(style: UITableViewCellStyle.Default, reuseIdentifier: "cell")
cell.textLabel?.text = listItems[indexPath.row] as String
cell.backgroundColor = UIColor.clearColor()
cell.layer.borderWidth = 2.0
cell.layer.borderColor = UIColor.whiteColor().CGColor
cell.layer.cornerRadius = 15

tableView.separatorColor = UIColor.clearColor()

// self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 10, 0);
return cell
}

override func viewDidAppear(animated: Bool) {
// Refreshing our table
tableView.reloadData()
}

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
listItems = savedItems.arrayForKey("UserInputs") as! [NSString]
tableView.reloadData()

}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}


}
enter code here

我已将所有选项 od 背景颜色设置为蓝色,将色调设置为白色,当我进入模拟时,单元格文本的字体为黑色。如果有人知道如何解决这个问题,请告诉我。

最佳答案

要获得该结果,您必须将 containingView 放入自定义 tableViewCell 中,并将半径和白色赋予该 containingView 而不是单元格。

从 Storyboard开始,添加你的containingViewlabel(我不知道你用的是什么字体):

enter image description here

我已决定在您的 tableView 上添加一个 View 以获得该结果,但我认为您也可以使用 titleForHeaderInSectionwillDisplayHeaderView得到相同的结果。

您的 ViewContollerScene 应该如下所示:

enter image description here

但是您还必须确保将约束分配给您的 containingView 否则您不会得到该结果:

enter image description here

然后确保设置标识符 enter image description here

以及您为单元格创建的 customClass

enter image description here

这里是代码:

ToDoCustomTableViewCell

import UIKit
import QuartzCore

class ToDoCustomTableViewCell: UITableViewCell {

@IBOutlet weak var containingView: UIView!
@IBOutlet weak var customLabel: UILabel!

override func awakeFromNib() {
super.awakeFromNib()

containingView.layer.borderWidth = 2
containingView.layer.borderColor = UIColor.whiteColor().CGColor
containingView.layer.cornerRadius = 20
containingView.layer.masksToBounds = true

}

override func setSelected(selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)

// Configure the view for the selected state
}

}

ViewController

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate{

var listItems = ["item One" ,"item One","item One","item One","item One","item One" ]


@IBOutlet weak var tableView: UITableView!
// Delete functionality
func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
if editingStyle == UITableViewCellEditingStyle.Delete {
listItems.removeAtIndex(indexPath.row)
}
tableView.reloadData()
}

// This function calculates how many rows our table has according to listItems array
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return listItems.count
}

// Data in cells
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("customCell", forIndexPath: indexPath) as! ToDoCustomTableViewCell
cell.customLabel.text = listItems[indexPath.row]




return cell
}


override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

}

}

最终结果应该是这样的。如果你想改变你的 containingViews 之间的距离,你只需要减少与 contentView 的距离。请记住,您看到的是 containingViews 的边框,而不是您的单元格边框,这就是您必须摆脱单元格分隔符的原因。

enter image description here

终于可以在gitHub上找到项目了

关于ios - iOS中UITableView的自定义设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34582299/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com