前言
在ios7之前，UITableView的UITableViewStyleGrouped style 默认UITableViewCell有边框的。但是ios7之后苹果主推扁平化设计风格，边框这种拟物化的设计就不受待见了。但我们app的开发过程中，总会有地方需要带边框的设计，所以就得自己来实现了。基于此，简单的实现了一下这个效果
github地址
效果图
示例图
我提供了一些常用的属性进行定制：
-
contentBorderColor设置边框颜色； -
contentBorderWidth设置边框宽度； -
contentMargin设置左右距离屏幕边距； -
contentBackgroundColor设置边框内背景颜色； -
contentCornerRadius设置边框圆角；
实现思路
自定义一个BaseBorderCell作为基类，由它承载边框的实现；然后再继承于BaseBorderCell自定义cell进行内容展示；
代码展示
- BaseBorderCell.h文件
//此cell只简单负责border的配置，cell中的内容可以继承于此类再进行封装
typedef NS_ENUM(NSUInteger, BaseCellBorderStyle) {
BaseCellBorderStyleNoRound = 0,
BaseCellBorderStyleTopRound,
BaseCellBorderStyleBottomRound,
BaseCellBorderStyleAllRound,
};
@interface BaseBorderCell : UITableViewCell
@property (nonatomic, assign) BaseCellBorderStyle borderStyle;//边框类型
@property (nonatomic, strong) UIColor *contentBorderColor;//边框颜色
@property (nonatomic, strong) UIColor *contentBackgroundColor;//边框内部内容颜色
@property (nonatomic, assign) CGFloat contentBorderWidth;//边框的宽度，这个宽度的一半会延伸到外部，如果对宽度比较敏感的要注意下
@property (nonatomic, assign) CGFloat contentMargin;//左右距离父视图的边距
@property (nonatomic, assign) CGSize contentCornerRadius;//边框的圆角
+ (instancetype)cellWithTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath;
//如果不想用上面的方法初始化cell，就用下面的方法设置borderStyle
- (void)setBorderStyleWithTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath;
@end
- BaseBorderCell.m文件
#import "BaseBorderCell.h"
#define Width self.contentView.frame.size.width
#define Height self.contentView.frame.size.height
@implementation BaseBorderCell
+ (instancetype)cellWithTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath
{
BaseBorderCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[BaseBorderCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
}
//一定要这里设置style，而不能在上面的判断里面，因为cell重用的时候，只要有不同的地方都应该重新设置，否则拿到cell的style就是上一个的样式而自己却没有进行修改
if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
cell.borderStyle = BaseCellBorderStyleAllRound;
}else if (indexPath.row == 0) {
cell.borderStyle = BaseCellBorderStyleTopRound;
}else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
cell.borderStyle = BaseCellBorderStyleBottomRound;
}else {
cell.borderStyle = BaseCellBorderStyleNoRound;
}
return cell;
}
- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
if (self) {
//配置默认值
self.contentBorderColor = [UIColor lightGrayColor];
self.contentBackgroundColor = [UIColor whiteColor];
self.contentBorderWidth = 2.0;
self.contentMargin = 10.0;
self.contentCornerRadius = CGSizeMake(5, 5);
}
return self;
}
- (void)setBorderStyleWithTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath
{
if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
self.borderStyle = BaseCellBorderStyleAllRound;
}else if (indexPath.row == 0) {
self.borderStyle = BaseCellBorderStyleTopRound;
}else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
self.borderStyle = BaseCellBorderStyleBottomRound;
}else {
self.borderStyle = BaseCellBorderStyleNoRound;
}
}
- (void)layoutSubviews
{
[super layoutSubviews];
//在这里设置才能获取到真正显示时候的宽度，而不是原始的
[self setupBorder];
}
- (void)setupBorder
{
self.selectionStyle = UITableViewCellSelectionStyleNone;
self.backgroundColor = [UIColor clearColor];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.lineWidth = self.contentBorderWidth;
layer.strokeColor = self.contentBorderColor.CGColor;
layer.fillColor = self.contentBackgroundColor.CGColor;
UIView *view = [[UIView alloc] initWithFrame:self.contentView.bounds];
[view.layer insertSublayer:layer atIndex:0];
view.backgroundColor = [UIColor clearColor];
//用自定义的view代替cell的backgroundView
self.backgroundView = view;
CGRect rect = CGRectMake(self.contentMargin, 0, Width - 2*self.contentMargin, Height);
switch (self.borderStyle) {
case BaseCellBorderStyleNoRound:
{
UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect];
layer.path = path.CGPath;
}
break;
case BaseCellBorderStyleTopRound:
{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:self.contentCornerRadius];
layer.path = path.CGPath;
}
break;
case BaseCellBorderStyleBottomRound:
{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:self.contentCornerRadius];
layer.path = path.CGPath;
}
break;
case BaseCellBorderStyleAllRound:
{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerAllCorners cornerRadii:self.contentCornerRadius];
layer.path = path.CGPath;
}
break;
default:
break;
}
}
@end
其实就是传入tableView和indexPath，然后内部判断当前cell应该用那种borderStyle展示；接着用UIBezierPath画出来，通过CAShapeLayer展示出来。需要注意的细节就是用自定义的view来替代backgroundView。
如何使用
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
/*
你可以使用自己的初始化方法
BaseBorderCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
if (!cell) {
cell = [[BaseBorderCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
}
[cell setBorderStyleWithTableView:tableView indexPath:indexPath];
*/
//也可以这样子
BaseBorderCell *cell = [BaseBorderCell cellWithTableView:tableView indexPath:indexPath];
cell.contentBorderColor = COLOR_WITH_HEX(0x816973, 1);
cell.contentBackgroundColor = COLOR_WITH_HEX(0xe6d8be, 1);
cell.contentBorderWidth = 2.0;
cell.contentMargin = 10;
cell.contentCornerRadius = CGSizeMake(5, 5);
cell.textLabel.text = [NSString stringWithFormat:@"section%ld--index%ld",(long)indexPath.section,(long)indexPath.row];
return cell;
}
写在最后
此文仅在提供一种实现边框cell的基本思路，尽可能少的依赖外部参数来确定cell的边框样式，然后尽可能人性化的设置边框的属性；作为一个基类的cell继承它就能使用边框的特性。
此上所言，仅为个人想法，如果有什么错误的地方，麻烦各位大神指针；如有更好的思路或demo，请告诉我(__)
