在 UITableViewCell 的左侧添加垂直条

Question

是否可以在 UITableViewCell 的左侧添加一个栏？

我只想在选定的单元格上添加左栏。

请看下图

Answer 1

我已经在UITableViewCell 上添加了一个UIView。我用它在行的左侧显示一个彩色条。

我只是在 IB 的 UITableViewCell 上放了一个 UIView，它比 UITableViewCell 短一点。现在我只需要更改cell.backgroundcolor 的值以在左侧显示不同的颜色条。

别忘了把新UIView的颜色改成UITableViewCell原来的颜色

//截图即将发布

Answer 2

self.tableView.allowsMultipleSelection = YES;

UITableView 的属性。

在选择中设置隐藏显示 UIView 为垂直条

Answer 3

创建自定义 TableViewCell

如图所示创建约束

约束视图

为左侧视图设置属性

如果你遇到任何约束错误，你可以通过向leftView添加约束来修复它，如下所示

为内容视图的约束标签创建出口

这是主要部分首先只是为了修正标签位置

Objective-C

在MyTableViewCell.h（自定义单元格）中创建网点

 @property (weak, nonatomic) IBOutlet UIView *viewOnLeft;
 @property (weak, nonatomic) IBOutlet UILabel *label;
 @property (weak, nonatomic) IBOutlet NSLayoutConstraint *leftConstraint;////Only if you need to move the label on showing left frame

ViewController.m（包含tableView）

@property(nonatomic,strong) NSMutableArray* selectedIndexPaths;//Declare Globaly

在viewDidLoad()

[self.tableView registerNib:[UINib nibWithNibName:@"MyTableViewCell" bundle:nil] forCellReuseIdentifier:@"MyCell"];
[self.tableView allowsMultipleSelection];
self.selectedIndexPaths = [[NSMutableArray alloc] init];

在cellForRowAtIndexPath方法中

MyTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"MyCell" forIndexPath:indexPath];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
cell.label.text = [NSString stringWithFormat:@"Section %ld Row %ld",(long)indexPath.section,(long)indexPath.row];
if ([self.selectedIndexPaths containsObject:indexPath])
{
    [cell.viewOnLeft setHidden:NO];
    cell.leftConstraint.constant = 18; //Only if you need to move the label on showing left frame
}
else
{
    [cell.viewOnLeft setHidden:YES];
    cell.leftConstraint.constant = 3; //Only if you need to move the label on hiding left frame
}
return cell;

在didSelectRowAtIndexPath方法中

if ([self.selectedIndexPaths containsObject:indexPath]){
    [self.selectedIndexPaths removeObject:indexPath];
}else {
    [self.selectedIndexPaths addObject:indexPath];
}
[tableView beginUpdates];
[tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationAutomatic];
[tableView endUpdates];

斯威夫特 4

在 MyTableViewCell.swift（自定义单元格）中创建 outlets

@IBOutlet weak var viewOnLeft: UIView!
@IBOutlet weak var label: UILabel!
@IBOutlet weak var leftConstraint: NSLayoutConstraint!

ViewController.swift (它包含 tableView)

var selectedIndexPaths:[IndexPath]! // Global declaration

在viewDidLoad()

self.tableView.register(UINib(nibName: "MyTableViewCell", bundle: nil), forCellReuseIdentifier: "MyCell")//Since i am using xib for custom cell
self.tableView.allowsMultipleSelection = true
selectedIndexPaths = [IndexPath]()

在cellForRowAt indexPath方法中

let cell = tableView.dequeueReusableCell(withIdentifier: "MyCell", for: indexPath) as! MyTableViewCell
cell.selectionStyle = .none
cell.label.text = "Section \(indexPath.section) Row \(indexPath.row)"
if selectedIndexPaths.contains(indexPath) {
   cell.viewOnLeft.isHidden = false
   cell.leftConstraint.constant = 18
} else {
   cell.viewOnLeft.isHidden = true
   cell.leftConstraint.constant = 3
}
cell.layoutIfNeeded()
cell.contentView.layoutSubviews()
return cell

在didSelectRowAt indexPath 方法中

if selectedIndexPaths.contains(indexPath) {
    guard let index = selectedIndexPaths.index(of: indexPath) else {
         return
      }
    selectedIndexPaths.remove(at: index)
} else {
    selectedIndexPaths.append(indexPath)
}

tableView.beginUpdates()
tableView.reloadRows(at: [indexPath], with: .automatic)
tableView.endUpdates()