美文网首页
优雅的为cell设计圆角并绘制边框颜色

优雅的为cell设计圆角并绘制边框颜色

作者: 为什么划船不靠桨 | 来源:发表于2017-05-01 14:34 被阅读0次

先上代码

- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath
{
    CAShapeLayer *maskLayer = [CAShapeLayer layer];
    maskLayer.frame = CGRectMake(0, 0, cellWidth, cellHeight);

    CAShapeLayer *borderLayer = [CAShapeLayer layer];
    borderLayer.frame = CGRectMake(0, 0, cellWidth, cellHeight);
    borderLayer.lineWidth = 1.f;
    borderLayer.strokeColor = lineColor.CGColor;
    borderLayer.fillColor = [UIColor clearColor].CGColor;

    UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, cellWidth, cellHeight) cornerRadius:cornerRadius];
    maskLayer.path = bezierPath.CGPath;
    borderLayer.path = bezierPath.CGPath;

    [cell.contentView.layer insertSublayer:borderLayer atIndex:0];
    [cell.layer setMask:maskLayer];
}

具体解释如下:

  • 代码中创建了两个CAShapeLayer, 关于CAShapeLayer先讲几句,CAShapeLayer属于Core Animation框架,会通过GPU来渲染图形,节省性能,动画渲染直接交给手机GPU,不消耗内存。CAShapeLayer中shape是形状的意思,需要形状才能生效,而贝塞尔曲线恰恰可以为CAShapeLayer提供路径,CAShapeLayer在提供的路径中进行渲染绘制出了shape
  • 先看代码中创建的贝塞尔曲线,通过UIBezierPath的bezierPathWithRoundedRect:cornerRadius:方法来绘制出一个带圆角矩形的路径,用来给CAShapeLayer绘制图形
  • 第一个layer叫做maskLayer,是用来给cell实现遮罩效果,因为layer使用的path是一个圆角矩形的贝塞尔曲线,那么这个layer形成的遮罩可以实现cell的圆角
  • 第二个layer叫做borderLayer,是用来绘制cell边框颜色的,通过CAShapeLayer的lineWidth, strokeColor来绘制边框,注意fillColor一定要设置成clearColor,否则会挡住整个cell
  • 最后,将borderLayer加载到cell的layer上,将maskLayer设置成cell layer的mask

相关文章

  • 优雅的为cell设计圆角并绘制边框颜色

    先上代码 具体解释如下: 代码中创建了两个CAShapeLayer, 关于CAShapeLayer先讲几句,CAS...

  • 边框 背景

    1 边框 能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件 对于 border-im...

  • HTML5 Canvas笔记——绘制方形钟

    利用矩形的绘制,颜色与透明度,编程绘制方形钟 要求: (1)钟面的矩形边框应当是圆角矩形, (2)边框线要采用除默...

  • UITableview重新绘制cell 圆角

    UITableview重新绘制cell 圆角

  • UIView任意角圆角和圆角边框

    圆角原理:设置view.layer.mask该遮罩层。 圆角边框:在view.layer 上增加一层,绘制圆角边框...

  • 画圆角及边框

    1.方式一: 最常见设计圆角,绘制边框的方法是利用CALayer的cornerRadius和borderWidth...

  • iOS cell圆角边框解决方案

    【方案一】- 自定义cell** 圆角边框为UIImage,充当自定义cell的背景图.**方法比较简单,就不粘代...

  • CSS3 边框

    通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 Photo...

  • CSS3边框

    通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 Photo...

  • android view 圆角

    使用outlineProvider 即可实现view的圆角效果。不用绘制圆角背景边框,不用自定义view重新绘制实...

网友评论

      本文标题:优雅的为cell设计圆角并绘制边框颜色

      本文链接:https://www.haomeiwen.com/subject/mfnftxtx.html