如图所示,实现以下tableview的整个section有边框有圆角
Simulator Screen Shot - iPhone 8 Plus - 2020-11-13 at 17.06.28.png
创建一个ACell,里面就一个view,左右各有15的间距
20201113-170849@2x.png
ACell.h
#import <UIKit/UIKit.h>
typedef NS_ENUM(NSUInteger, CellBorderStyle) {
CellBorderStyleNoRound = 0,
CellBorderStyleTopRound,
CellBorderStyleBottomRound,
CellBorderStyleAllRound,
};
NS_ASSUME_NONNULL_BEGIN
@interface ACell : UITableViewCell
@property (weak, nonatomic) IBOutlet UIView *bgView;
@property (nonatomic, assign) CellBorderStyle 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;//边框的圆角
@property (assign, nonatomic) CGFloat cornerRadius;
- (void)setupBorder;
- (void)setBorderStyleWithTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath;
@end
ACell.m
//
// ACell.m
//
// Created by yft on 2020/11/13.
// Copyright © 2020 yeebing. All rights reserved.
//
#import "ACell.h"
@implementation ACell
- (void)awakeFromNib {
[super awakeFromNib];
// Initialization code
}
- (void)setSelected:(BOOL)selected animated:(BOOL)animated {
[super setSelected:selected animated:animated];
// Configure the view for the selected state
}
- (void)setBorderStyleWithTableView:(UITableView *)tableView indexPath:(NSIndexPath *)indexPath
{
if (indexPath.row == 0 && indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
self.borderStyle = CellBorderStyleAllRound;
}else if (indexPath.row == 0) {
self.borderStyle = CellBorderStyleTopRound;
}else if (indexPath.row == [tableView numberOfRowsInSection:indexPath.section] - 1) {
self.borderStyle = CellBorderStyleBottomRound;
}else {
self.borderStyle = CellBorderStyleNoRound;
}
}
- (void)layoutSubviews
{
[super layoutSubviews];
//在这里设置才能获取到真正显示时候的宽度，而不是原始的
[self setupBorder];
}
- (void)setupBorder
{
CAShapeLayer *layer1 = [CAShapeLayer layer];
layer1.lineWidth = self.contentBorderWidth;
layer1.strokeColor = self.contentBorderColor.CGColor;
layer1.fillColor = self.contentBackgroundColor.CGColor;
CAShapeLayer *layer2 = [CAShapeLayer layer];
layer2.lineWidth = self.contentBorderWidth;
layer2.strokeColor = self.contentBorderColor.CGColor;
layer2.fillColor = self.contentBackgroundColor.CGColor;
[self.bgView.layer insertSublayer:layer1 atIndex:0];
[self.bgView.layer insertSublayer:layer2 atIndex:0];
CGFloat mw = [UIScreen mainScreen].bounds.size.width;//由于这里取不到真实的宽高,就用绝对k宽高来坐适配了
#if 0
CGFloat w = self.bgView.frame.size.width;//不知为什么取不到真实宽高,获取到的还是xib的宽高
CGFloat h = self.bgView.frame.size.height;
#else
CGFloat w = mw-30; //直接用绝对宽高来计算
CGFloat h = 60;
#endif
NSLog(@"width:%f---height:%f",w,h);
switch (self.borderStyle) {
case CellBorderStyleNoRound:
{
//中间的cell,没有圆角
//但是需要左右两边各画出一条竖线
[self addRoundedCorners:UIRectCornerAllCorners withRadii:CGSizeZero viewRect:CGRectMake(0, 0, w, h) View:self.bgView];
//左边竖线
UIBezierPath *_path1 = [UIBezierPath bezierPath];
[_path1 moveToPoint:CGPointMake(0, 0)];
//添加点
[_path1 addLineToPoint:CGPointMake(0, h)];
layer1.path = _path1.CGPath;
//右边竖线
UIBezierPath *_path2 = [UIBezierPath bezierPath];
[_path2 moveToPoint:CGPointMake(w, 0)];
//添加点
[_path2 addLineToPoint:CGPointMake(w, h)];
layer2.path = _path2.CGPath;
}
break;
case CellBorderStyleTopRound:
{
//第一个cell,需要画出上左,上右圆角
//左右上三边的线,用UIBezierPath添加点画出需要的线条
[self addRoundedCorners:UIRectCornerTopLeft|UIRectCornerTopRight withRadii:self.contentCornerRadius viewRect:CGRectMake(0, 0, w, h) View:self.bgView];
UIBezierPath *_path = [UIBezierPath bezierPath];
[_path moveToPoint:CGPointMake(0, h)];
//添加点
[_path addArcWithCenter:CGPointMake(self.cornerRadius, self.cornerRadius) radius:self.cornerRadius startAngle:M_PI endAngle:M_PI*3/2 clockwise:YES];
[_path addArcWithCenter:CGPointMake(w-self.cornerRadius, self.cornerRadius) radius:self.cornerRadius startAngle:M_PI*3/2 endAngle:M_PI*2 clockwise:YES];
[_path addLineToPoint:CGPointMake(w, h)];
// [_path closePath]; //第五条线通过调用closePath方法得到的 不要闭合
layer1.path = _path.CGPath;
}
break;
case CellBorderStyleBottomRound:
{
//最后一个cell,需要画出下左,下右圆角
//左右下三边的线,用UIBezierPath添加点画出需要的线条
[self addRoundedCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight withRadii:self.contentCornerRadius viewRect:CGRectMake(0, 0, w, h) View:self.bgView];
UIBezierPath *_path = [UIBezierPath bezierPath];
[_path moveToPoint:CGPointMake(0, 0)];
//添加点
[_path addArcWithCenter:CGPointMake(self.cornerRadius,h- self.cornerRadius) radius:self.cornerRadius startAngle:M_PI endAngle:M_PI/2 clockwise:NO];
[_path addArcWithCenter:CGPointMake(w-self.cornerRadius,h- self.cornerRadius) radius:self.cornerRadius startAngle:M_PI/2 endAngle:M_PI*2 clockwise:NO];
[_path addLineToPoint:CGPointMake(w, 0)];
// [_path closePath]; //第五条线通过调用closePath方法得到的 不要闭合
layer1.path = _path.CGPath;
}
break;
case CellBorderStyleAllRound:
{
//只有一个cell的时候,只需对这个cell添加全部圆角
[self addRoundedCorners:UIRectCornerAllCorners withRadii:self.contentCornerRadius viewRect:CGRectMake(0, 0, w, h) View:self.bgView];
UIBezierPath *_path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, w, h) cornerRadius:self.cornerRadius];
layer1.frame = CGRectMake(0, 0, w, h);
layer1.path = _path.CGPath;
}
break;
default:
break;
}
}
/**
* 设置部分圆角(相对布局)
*
* @param corners 需要设置为圆角的角 UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight | UIRectCornerAllCorners
* @param radii 需要设置的圆角大小 例如 CGSizeMake(20.0f, 20.0f)
* @param rect 需要设置的圆角view的rect
*/
- (void)addRoundedCorners:(UIRectCorner)corners
withRadii:(CGSize)radii
viewRect:(CGRect)rect
View:(UIView *)view{
UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];
CAShapeLayer* shape = [[CAShapeLayer alloc] init];
[shape setPath:rounded.CGPath];
view.layer.mask = shape;
}
@end
用UIBezierPath画出的只是线条,圆角其实还在,如下图
20201113-171800@2x.png
单独裁掉圆角
/**
* 设置部分圆角(相对布局)
*
* @param corners 需要设置为圆角的角 UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomLeft | UIRectCornerBottomRight | UIRectCornerAllCorners
* @param radii 需要设置的圆角大小 例如 CGSizeMake(20.0f, 20.0f)
* @param rect 需要设置的圆角view的rect
*/
- (void)addRoundedCorners:(UIRectCorner)corners
withRadii:(CGSize)radii
viewRect:(CGRect)rect
View:(UIView *)view{
UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corners cornerRadii:radii];
CAShapeLayer* shape = [[CAShapeLayer alloc] init];
[shape setPath:rounded.CGPath];
view.layer.mask = shape;
}
只需在tableview的代理里设置
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
ACell *cell = [tableView dequeueReusableCellWithIdentifier:@"ACell"];
[cell setBorderStyleWithTableView:tableView indexPath:indexPath];
cell.contentBorderColor = [UIColor lightGrayColor];
cell.contentBackgroundColor = [UIColor whiteColor];
cell.contentBorderWidth = 1.0;
cell.contentMargin = 15;
cell.contentCornerRadius = CGSizeMake(10, 10);
cell.cornerRadius = 10;
[cell setupBorder];
cell.textLabel.text = [NSString stringWithFormat:@"section%ld--index%ld",(long)indexPath.section,(long)indexPath.row];
return cell;
}
网友评论