自定义 UI UITableViewCell 选定的背景色 swift
Custom UI TableViewCell selected backgroundcolor swift
我正在尝试使用 Swift 更改自定义选定 TableViewCell 的外观。
我需要通过设计器还是以编程方式完成?
我尝试了以下方法:
这是我的代码:
@IBOutlet var tableView: UITableView!
var tableData: [String] = ["One", "Two", "Three", "Four"]
override func viewDidLoad() {
super.viewDidLoad()
// Register custom cell
var nib = UINib(nibName: "vwTblCell", bundle: nil)
tableView.registerNib(nib, forCellReuseIdentifier: "cell")
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.tableData.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell:TblCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as TblCell
cell.lblCarName.text = tableData[indexPath.row]
cell.imgCarName.image = UIImage(named: tableData[indexPath.row])
return cell
}
func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
println("Row \(indexPath.row) selected")
}
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 70
}
您已经有了正确的方法:didSelectRowAtIndexPath
。在该方法中,您可以调用 tableView.cellForRowAtIndexPath(indexPath)
并获取您的手机。你可以将单元格背景设置为你的颜色:
func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
println("Row \(indexPath.row) selected")
let cell:YourCustomCell = tableView.cellForRowAtIndexPath(indexPath) as YourCell
cell.backgroundColor = UIColor.redColor()
}
或者,如果选择了一个单元格,更好的方法是检查您的 cellForRowAtIndexPath
方法:
if(cell.selected){
cell.backgroundColor = UIColor.redColor()
}else{
cell.backgroundColor = UIColor.clearColor()
}
我有相似度问题。在您的 cellForRowAtIndexPath 方法中设置:
cell.selectionStyle = .None
然后设置didHighlightRowAtIndexPath...
func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .green
}
func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .clear
}
当您点击一个单元格时,实际上会更改子视图的背景颜色。该子视图是 'selectedBackgroundView'。您可以覆盖 cellForRowAtIndexPath TableView 委托方法中每个单元格的视图。
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("identifier", forIndexPath: indexPath)
let selectedView = UIView()
selectedView.backgroundColor = UIColor(red: 250/255, green: 250/255, blue: 250/255, alpha: 1.0)
cell.selectedBackgroundView = selectedView
return cell
}
将颜色更改为您喜欢的任何颜色。
对于tableView==
首先调用这个方法-
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
cell.textLabel?.text = "Show Label"
cell.backgroundColor = UIColor.redColor()
}
然后调用这个方法
func tableView(tableView: UITableView, didDeselectRowAtIndexPath indexPath: NSIndexPath) {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
cell.backgroundColor = UIColor.clearColor()
}
对于 CollectionView==
1-
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
let cell = dateCollectionView.cellForItemAtIndexPath(indexPath) as! DateCollectionViewCell
cell!.dateLabel.backgroundColor = UIColor.redColor()
}
2-
func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
let cell = dateCollectionView.cellForItemAtIndexPath(indexPath) as? DateCollectionViewCell
cell!.dateLabel.backgroundColor = UIColor.clearColor()
}
为了保持代码整洁,您应该考虑将单元格的屏幕设计相关代码从 UITableViewController
移动到 UITableViewCell
class。
您的 UITableViewController` 只需按如下方式设置单元格的 selected 状态:
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
{
guard let cell = tableView.cellForRow(at: indexPath) else { return }
cell.setSelected(true, animated: true)
}
您想要的自定义可以通过覆盖 var isSelected
在派生的 UITableViewCell
class 中实现。使用此解决方案,您甚至可以为每个单元格设置不同的 select 颜色。
class MyTableViewCell: UITableViewCell
{
@IBOutlet weak var label:UILabel!
override var isSelected: Bool
{
didSet{
if (isSelected)
{
self.backgroundColor = UIColor.red
if let label = label
{
label.textColor = UIColor.white
}
}
else
{
self.backgroundColor = UIColor.white
if let label = label
{
label.textColor = UIColor.black
}
}
}
}
}
Update for Swift 3
此答案基于曹勇的答案,旨在更新Swift 3
对于 Swift 3,在您的 cellForRowAt indexPath 方法集中使用以下代码:
cell.selectionStyle = .none
然后,在didHighlightRowAtIndexPath
中设置
func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .red
}
func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .clear
}
我的两分钱:正确的做法(也是视觉上的)是在 (tableView) 单元格中使用指定的视图,即 selectedBackgroundView 属性。但是,您需要先使用 UIView()
对其进行初始化
SWIFT 3.0
override func awakeFromNib() {
super.awakeFromNib()
self.selectedBackgroundView = UIView()
self.selectionStyle = .default // you can also take this line out
}
然后您就可以在自定义单元格中使用它了,如下所示:
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
self.selectedBackgroundView!.backgroundColor = selected ? .red : nil
}
就是这样。当然,您也可以将上述内容集成到上面提到的 UITableView 函数中。看看吧。
正确的(更自然和自然的)方法:
override func awakeFromNib() {
super.awakeFromNib()
selectedBackgroundView = UIView()
selectedBackgroundView?.backgroundColor = .blue
}
为什么其他方法是错误的:
- 高亮解决办法:高亮不是select。突出显示不像选择那样具有动画效果。感觉不像普通选择那样自然
- 不需要在
setSelected
方法中改变selectedBackgroundView的颜色,因为iOS为我们处理了动画。
- 设置
backgroundColor
的行为也与 iOS 的行为不同
SWIFT 5 次更新
在cellForRowAT
方法中将选择样式设置为.none:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! Cell
cell.selectionStyle = .none
return cell
}
然后执行 didHighlightRowAt
和 didUnhighlightRowAt
方法:
func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .red
}
func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
// Add timer to be able see the effect
Timer.scheduledTimer(withTimeInterval: 0.2, repeats: false) { (_) in
cell!.contentView.backgroundColor = .white
}
}
None 上面的答案有效,所以我尝试了我的并且有效:
这是:-
- 在你的单元格中创建这样的函数。
func reloadcell() {
if isSelected {
conView.backgroundColor = .yellow
} else if isHighlighted {
conView.backgroundColor = .yellow
} else {
conView.backgroundColor = .clear
}
}
并在布局子视图和您的 didselect 方法中调用该函数
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
updateUI(isSelected: selected)
}
private func updateUI(isSelected: Bool){
label.textColor = isSelected ? .red : .green
//etc..
}
在您的 cellForRowAtIndexPath 方法中设置:
cell.selectionStyle = .none
然后像这样设置 didHighlightRowAtIndexPath...
func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .green
}
我正在尝试使用 Swift 更改自定义选定 TableViewCell 的外观。
我需要通过设计器还是以编程方式完成?
我尝试了以下方法:
这是我的代码:
@IBOutlet var tableView: UITableView!
var tableData: [String] = ["One", "Two", "Three", "Four"]
override func viewDidLoad() {
super.viewDidLoad()
// Register custom cell
var nib = UINib(nibName: "vwTblCell", bundle: nil)
tableView.registerNib(nib, forCellReuseIdentifier: "cell")
}
func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return self.tableData.count
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell:TblCell = self.tableView.dequeueReusableCellWithIdentifier("cell") as TblCell
cell.lblCarName.text = tableData[indexPath.row]
cell.imgCarName.image = UIImage(named: tableData[indexPath.row])
return cell
}
func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
println("Row \(indexPath.row) selected")
}
func tableView(tableView: UITableView, heightForRowAtIndexPath indexPath: NSIndexPath) -> CGFloat {
return 70
}
您已经有了正确的方法:didSelectRowAtIndexPath
。在该方法中,您可以调用 tableView.cellForRowAtIndexPath(indexPath)
并获取您的手机。你可以将单元格背景设置为你的颜色:
func tableView(tableView: UITableView!, didSelectRowAtIndexPath indexPath: NSIndexPath!) {
println("Row \(indexPath.row) selected")
let cell:YourCustomCell = tableView.cellForRowAtIndexPath(indexPath) as YourCell
cell.backgroundColor = UIColor.redColor()
}
或者,如果选择了一个单元格,更好的方法是检查您的 cellForRowAtIndexPath
方法:
if(cell.selected){
cell.backgroundColor = UIColor.redColor()
}else{
cell.backgroundColor = UIColor.clearColor()
}
我有相似度问题。在您的 cellForRowAtIndexPath 方法中设置:
cell.selectionStyle = .None
然后设置didHighlightRowAtIndexPath...
func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .green
}
func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .clear
}
当您点击一个单元格时,实际上会更改子视图的背景颜色。该子视图是 'selectedBackgroundView'。您可以覆盖 cellForRowAtIndexPath TableView 委托方法中每个单元格的视图。
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("identifier", forIndexPath: indexPath)
let selectedView = UIView()
selectedView.backgroundColor = UIColor(red: 250/255, green: 250/255, blue: 250/255, alpha: 1.0)
cell.selectedBackgroundView = selectedView
return cell
}
将颜色更改为您喜欢的任何颜色。
对于tableView==
首先调用这个方法-
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
cell.textLabel?.text = "Show Label"
cell.backgroundColor = UIColor.redColor()
}
然后调用这个方法
func tableView(tableView: UITableView, didDeselectRowAtIndexPath indexPath: NSIndexPath) {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as UITableViewCell
cell.backgroundColor = UIColor.clearColor()
}
对于 CollectionView==
1-
func collectionView(collectionView: UICollectionView, didSelectItemAtIndexPath indexPath: NSIndexPath) {
let cell = dateCollectionView.cellForItemAtIndexPath(indexPath) as! DateCollectionViewCell
cell!.dateLabel.backgroundColor = UIColor.redColor()
}
2-
func collectionView(collectionView: UICollectionView, didDeselectItemAtIndexPath indexPath: NSIndexPath) {
let cell = dateCollectionView.cellForItemAtIndexPath(indexPath) as? DateCollectionViewCell
cell!.dateLabel.backgroundColor = UIColor.clearColor()
}
为了保持代码整洁,您应该考虑将单元格的屏幕设计相关代码从 UITableViewController
移动到 UITableViewCell
class。
您的 UITableViewController` 只需按如下方式设置单元格的 selected 状态:
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
{
guard let cell = tableView.cellForRow(at: indexPath) else { return }
cell.setSelected(true, animated: true)
}
您想要的自定义可以通过覆盖 var isSelected
在派生的 UITableViewCell
class 中实现。使用此解决方案,您甚至可以为每个单元格设置不同的 select 颜色。
class MyTableViewCell: UITableViewCell
{
@IBOutlet weak var label:UILabel!
override var isSelected: Bool
{
didSet{
if (isSelected)
{
self.backgroundColor = UIColor.red
if let label = label
{
label.textColor = UIColor.white
}
}
else
{
self.backgroundColor = UIColor.white
if let label = label
{
label.textColor = UIColor.black
}
}
}
}
}
Update for Swift 3
此答案基于曹勇的答案,旨在更新Swift 3
对于 Swift 3,在您的 cellForRowAt indexPath 方法集中使用以下代码:
cell.selectionStyle = .none
然后,在didHighlightRowAtIndexPath
中设置func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .red
}
func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .clear
}
我的两分钱:正确的做法(也是视觉上的)是在 (tableView) 单元格中使用指定的视图,即 selectedBackgroundView 属性。但是,您需要先使用 UIView()
对其进行初始化SWIFT 3.0
override func awakeFromNib() {
super.awakeFromNib()
self.selectedBackgroundView = UIView()
self.selectionStyle = .default // you can also take this line out
}
然后您就可以在自定义单元格中使用它了,如下所示:
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
self.selectedBackgroundView!.backgroundColor = selected ? .red : nil
}
就是这样。当然,您也可以将上述内容集成到上面提到的 UITableView 函数中。看看吧。
正确的(更自然和自然的)方法:
override func awakeFromNib() {
super.awakeFromNib()
selectedBackgroundView = UIView()
selectedBackgroundView?.backgroundColor = .blue
}
为什么其他方法是错误的:
- 高亮解决办法:高亮不是select。突出显示不像选择那样具有动画效果。感觉不像普通选择那样自然
- 不需要在
setSelected
方法中改变selectedBackgroundView的颜色,因为iOS为我们处理了动画。 - 设置
backgroundColor
的行为也与 iOS 的行为不同
SWIFT 5 次更新
在cellForRowAT
方法中将选择样式设置为.none:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath) as! Cell
cell.selectionStyle = .none
return cell
}
然后执行 didHighlightRowAt
和 didUnhighlightRowAt
方法:
func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .red
}
func tableView(_ tableView: UITableView, didUnhighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
// Add timer to be able see the effect
Timer.scheduledTimer(withTimeInterval: 0.2, repeats: false) { (_) in
cell!.contentView.backgroundColor = .white
}
}
None 上面的答案有效,所以我尝试了我的并且有效: 这是:-
- 在你的单元格中创建这样的函数。
func reloadcell() {
if isSelected {
conView.backgroundColor = .yellow
} else if isHighlighted {
conView.backgroundColor = .yellow
} else {
conView.backgroundColor = .clear
}
}
并在布局子视图和您的 didselect 方法中调用该函数
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
updateUI(isSelected: selected)
}
private func updateUI(isSelected: Bool){
label.textColor = isSelected ? .red : .green
//etc..
}
在您的 cellForRowAtIndexPath 方法中设置:
cell.selectionStyle = .none
然后像这样设置 didHighlightRowAtIndexPath...
func tableView(_ tableView: UITableView, didHighlightRowAt indexPath: IndexPath) {
let cell = tableView.cellForRow(at: indexPath)
cell!.contentView.backgroundColor = .green
}