您的位置:首页 > 产品设计 > UI/UE

SWTableViewCell——一个和iOS 7的系统Mail类似,使用起来简单的UITableViewCell子类 (在iOS代码库中浏览本帖)

2016-04-09 09:39 676 查看
GitHub链接:https://github.com/CEWendel/SWTableViewCell

记录一下,省的以后找不到。



功能

右边的工具按钮

用户向左滑动可以调出工具按钮,在Table View Cell的右边显示。这种和iOS的系统Mail和Reminders类似。



左边的工具按钮

如果用户向右边滑动也可以调出工具按钮,在Table View Cell的左边显示。



特点

动态的工具按钮,大小可以调整。如果在一个cell中需要增加更多的按钮,那么其他的按钮会自动缩小提供空间。

按钮的名字和颜色可以自己调整。

在iOS6.1以上系统,包括iOS 7中测试通过。

用法

在tableView:cellForRowAtIndexPath:方法中创建一个SWTableView cell,使用NSMutableArray+SWUtilityButtons 类给它添加任意数量的工具按钮。
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

static NSString *cellIdentifier = @"Cell";

SWTableViewCell *cell = (SWTableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier];

if (cell == nil) {

NSMutableArray *leftUtilityButtons = [NSMutableArray new];

NSMutableArray *rightUtilityButtons = [NSMutableArray new];

[leftUtilityButtons addUtilityButtonWithColor:[UIColor colorWithRed:0.07 green:0.75f blue:0.16f alpha:1.0] icon:[UIImage imageNamed:@"check.png"]];

[leftUtilityButtons addUtilityButtonWithColor:[UIColor colorWithRed:1.0f green:1.0f blue:0.35f alpha:1.0] icon:[UIImage imageNamed:@"clock.png"]];

[leftUtilityButtons addUtilityButtonWithColor:[UIColor colorWithRed:1.0f green:0.231f blue:0.188f alpha:1.0] icon:[UIImage imageNamed:@"cross.png"]];

[leftUtilityButtons addUtilityButtonWithColor:[UIColor colorWithRed:0.55f green:0.27f blue:0.07f alpha:1.0] icon:[UIImage imageNamed:@"list.png"]];

[rightUtilityButtons addUtilityButtonWithColor:[UIColor colorWithRed:0.78f green:0.78f blue:0.8f alpha:1.0] title:@"More"];

[rightUtilityButtons addUtilityButtonWithColor:[UIColor colorWithRed:1.0f green:0.231f blue:0.188 alpha:1.0f] title:@"Delete"];

cell = [[SWTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:cellIdentifier height:_tableView.rowHeight leftUtilityButtons:leftUtilityButtons rightUtilityButtons:rightUtilityButtons];

cell.delegate = self;
}

NSDate *dateObject = _testArray[indexPath.row];

cell.textLabel.text = [dateObject description];

cell.detailTextLabel.text = @"Some detail text";

return cell;

}


Delegate

开发者可以使用SWTableViewCellDelegate来了解用户点击了哪个按钮。有两种方法:

- (void)swippableTableViewCell:(SWTableViewCell *)cell didTriggerLeftUtilityButtonWithIndex:(NSInteger)index;

- (void)swippableTableViewCell:(SWTableViewCell *)cell didTriggerRightUtilityButtonWithIndex:(NSInteger)index;


index指示用户点击了哪个按钮。

例子

#pragma mark - SWTableViewDelegate

- (void)swippableTableViewCell:(SWTableViewCell *)cell didTriggerLeftUtilityButtonWithIndex:(NSInteger)index {

switch (index) {

case 0:

NSLog(@"check button was pressed");

break;

case 1:

NSLog(@"clock button was pressed");

break;

case 2:

NSLog(@"cross button was pressed");

break;

case 3:

NSLog(@"list button was pressed");

default:

break;

}

}

- (void)swippableTableViewCell:(SWTableViewCell *)cell didTriggerRightUtilityButtonWithIndex:(NSInteger)index {

switch (index) {

case 0:

NSLog(@"More button was pressed");

break;

case 1:

{

// Delete button was pressed

NSIndexPath *cellIndexPath = [self.tableView indexPathForCell:cell];

[_testArray removeObjectAtIndex:cellIndexPath.row];

[self.tableView deleteRowsAtIndexPaths:@[cellIndexPath] withRowAnimation:UITableViewRowAnimationAutomatic];

break;

}

default:

break;

}

}

提示

定制UITableViewCell内容

不要使用Storyboards来创建你的定制的UItableViewCell内容。只需要简单的在- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath中增加view到cell的contentview。
获仍然可以取cell object的view或者管理预定义的内容。所以说如果你想要改变cell的imageView 或者是backgroundView,SWTableViewCell,仍然可以按照你希望的变化进行改变。
不要在cell中使用accessory view,因为他们的层级处于contentView之上,如果cell消失了的话,他们不会随之消失 。

Seperator Insets

如果在iOS 7中你有一个左边的工具按钮,我推荐你改变TableView 的seperatorInsect,这样可以让seperator扩展到屏幕的长度。

tableView.separatorInset = UIEdgeInsetsMake(0, 0, 0, 0);

联系作者:

Chris Wendel:http://twitter.com/CEWendel
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: