在 UITableViewCell 的左侧添加竖线 [英] Adding vertical bar to the left of a UITableViewCell

问题描述

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

Is it possible to add a bar to the left of a UITableViewCell?

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

I would like to add left bars on selected cells only.

请看下面的图片

推荐答案

创建自定义 TableViewCell

Create a custom TableViewCell

创建如图所示的约束

约束视图

为左侧视图设置属性

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

if u get any constraint error u can fix that by adding constraint to leftView, as below

为约束标签到内容视图创建插座

create outlet for the constraint label to content View

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

This is the main part above all only to correct the label position

目标 C

在MyTableViewCell.h(自定义单元格)中创建网点

In MyTableViewCell.h (Custom cell) create outlets

 @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)

ViewController.m (It contain 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];

Swift 4

在 MyTableViewCell.swift (自定义单元格) 中创建出口

In MyTableViewCell.swift (Custom cell) create outlets

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

ViewController.swift (它包含 tableView)

ViewController.swift (It contain 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()

这篇关于在 UITableViewCell 的左侧添加竖线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！