zoukankan      html  css  js  c++  java
  • iOS 圆角那些事

     

    iOS开发中各种圆角也随处可见,最简单给控件添加圆角的方式就是给视图的layer设置corner属性了:
    [Objective-C] 查看源文件 复制代码
    1
    2
    self.blueView.layer.cornerRadius = 5.f;
    self.blueView.layer.masksToBounds = YES;





    这种方式会带来两个问题:
    • 当图片数量比较多的时候,这种添加圆角方式特别消耗性能,比如在UITableViewCell
      添加过多圆角的话,甚至会带来视觉可见的卡顿.
    • 无法配置圆角数量(只能添加view的四个角全为圆角),无法配置某个圆角大小.
      第一个问题实际上是由于数量太多的情况下,系统会频繁的调用GPU的离屏渲染(Offscreen Rendering)机制,导致内存损耗严重.更多关于离屏渲染的详解,可以看这里,本文不多赘述.
      第二个问题,我们可以使用UIBezierPath
      来完美解决.以下是示例代码:
    [Objective-C] 查看源文件 复制代码
    1
    2
    3
    4
    5
    6
    7
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:self.blueView.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomLeft cornerRadii:CGSizeMake(20, 0)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = self.blueView.bounds;
    maskLayer.path = maskPath.CGPath;
    self.blueView.layer.mask = maskLayer;
    self.blueView.layer.cornerRadius = 5.f;
    self.blueView.layer.masksToBounds = YES;





    想要配置某个角为圆角的话,只需要指定对应的UIRectCorner
    即可
    也可以采用下面这种方法 : 采取预先生成圆角图片,并缓存起来这个方法才是比较好的手段。预处理圆角图片可以在后台处理,处理完毕后缓存起来,再在主线程显示,这就避免了不必要的离屏渲染了。
    [Objective-C] 查看源文件 复制代码
    1
    2
    3
    4
    self.layer.cornerRadius = 6;
    self.layer.masksToBounds = YES; // 裁剪
    self.layer.shouldRasterize = YES; // 缓存
    self.layer.rasterizationScale = [UIScreen mainScreen].scale;





    当shouldRasterize设成true时,layer被渲染成一个bitmap,并缓存起来,等下次使用时不会再重新去渲染了。实现圆角本 身就是在做颜色混合(blending),如果每次页面出来时都blending,消耗太大,这时shouldRasterize = yes,下次就只是简单的从渲染引擎的cache里读取那张bitmap,节约系统资源。
    如果在滚动tableView时,每次都执行圆角设置,肯定会阻塞UI,设置这个将会使滑动更加流畅
  • 相关阅读:
    css之position
    js之循环语句
    js之条件判断
    js之字典操作
    js之获取html标签的值
    5.15 牛客挑战赛40 C 小V和字符串 数位dp 计数问题
    5.21 省选模拟赛 luogu P4297 [NOI2006]网络收费 树形dp
    luogu P4525 自适应辛普森法1
    luogu P1784 数独 dfs 舞蹈链 DXL
    5.21 省选模拟赛 luogu P4207 [NOI2005]月下柠檬树 解析几何 自适应辛普森积分法
  • 原文地址:https://www.cnblogs.com/-ios/p/5583501.html
Copyright © 2011-2022 走看看