iOS - 版面实现记录五

思路是使用 UICollectionViewFlowLayout 的 UICollectionView，注册两个 Cell，一左一右。其中灰色线绘制代码加到 Cell 的 init 方法中，如下：

UIBezierPath * leftPath = [[UIBezierPath alloc]init];
//create path
[leftPath moveToPoint:CGPointMake(frame.size.width, 0)];
[leftPath addLineToPoint:CGPointMake(frame.size.width, frame.size.height)];
[leftPath moveToPoint:CGPointMake(frame.size.width, frame.size.height*0.6)];
[leftPath addLineToPoint:CGPointMake(frame.size.width*0.5, frame.size.height*0.6)];
//create shape layer
CAShapeLayer * lineLayer = [CAShapeLayer layer];
lineLayer.strokeColor = [UIColor grayColor].CGColor;
lineLayer.lineWidth = 3;
lineLayer.path = leftPath.CGPath;
[self.layer addSublayer:lineLayer];

右边同理。

Cell 的代码：

@interface ViewHomeMenuCollectionCellSmall : ViewHomeMenuCollectionSuper {
}
@property (nonatomic, strong) UILabel * titleLabel;
@property (nonatomic, strong) EGOImageView * imageView;

@end

@implementation ViewHomeMenuCollectionCellSmall

- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor colorWithRed:1 green:1 blue:1 alpha:1];
self.layer.cornerRadius = CELLLAYERCORNER;
self.layer.masksToBounds = YES;
UIBezierPath * leftPath = [[UIBezierPath alloc]init];
//create path
[leftPath moveToPoint:CGPointMake(frame.size.width, 0)];
[leftPath addLineToPoint:CGPointMake(frame.size.width, frame.size.height)];
[leftPath moveToPoint:CGPointMake(frame.size.width, frame.size.height*0.6)];
[leftPath addLineToPoint:CGPointMake(frame.size.width*0.5, frame.size.height*0.6)];
//create shape layer
CAShapeLayer * lineLayer = [CAShapeLayer layer];
lineLayer.strokeColor = [UIColor grayColor].CGColor;
lineLayer.lineWidth = 3;
lineLayer.path = leftPath.CGPath;
[self.layer addSublayer:lineLayer];

self.imageView = [[EGOImageView alloc]init];
[self.imageView setFrame:CGRectMake(0, 0, CELLIMAGESCALEWIDTH, CELLIMAGESCALEHIGHT)];
[self.imageView setCenter:CGPointMake(CELLIMAGECENTERX, frame.size.height*0.6)];
self.imageView.layer.borderColor = [[UIColor lightGrayColor]CGColor];
self.imageView.layer.borderWidth = 2;
self.imageView.layer.cornerRadius = self.imageView.frame.size.width/2;
self.imageView.layer.masksToBounds = YES;
[self.imageView setBackgroundColor:[UIColor yellowColor]];
[self addSubview:self.imageView];
self.titleLabel = [[UILabel alloc]init];
[self.titleLabel setFrame:CGRectMake(0, self.imageView.frame.origin.y + self.imageView.frame.size.height + 2, frame.size.width, 15)];
self.titleLabel.backgroundColor = [UIColor clearColor];
self.titleLabel.textColor = [UIColor blackColor];
[self.titleLabel setTextAlignment:NSTextAlignmentCenter];
self.titleLabel.numberOfLines = 0;
self.titleLabel.font = [UIFont systemFontOfSize:15];
[self addSubview:self.titleLabel];
}
return self;
}
@end

参考：

CAShapeLayer

UIBezierPath 简单使用