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 简单使用