Git Product home page Git Product logo

ios-corner's Introduction

iOS-corner

似乎没有那家公司比Apple更爱圆角了,事实上,圆角也会让图形/产品看起来更加无**性,能够带来更好的用户体验.
iOS开发中各种圆角也随处可见,最简单给控件添加圆角的方式就是给视图的layer设置corner属性了:

self.blueView.layer.cornerRadius = 5.f;
self.blueView.layer.masksToBounds = YES; 

这种方式会带来两个问题:

    1. 当图片数量比较多的时候,这种添加圆角方式特别消耗性能,比如在UITableViewCell添加过多圆角的话,甚至会带来视觉可见的卡顿.
    1. 无法配置圆角数量(只能添加view的四个角全为圆角),无法配置某个圆角大小.

第一个问题实际上是由于数量太多的情况下,系统会频繁的调用GPU的离屏渲染(Offscreen Rendering)机制,导致内存损耗严重.更多关于离屏渲染的详解,可以看这里,本文不多赘述.

第二个问题,我们可以使用UIBezierPath 来完美解决.以下是示例代码:

    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即可 image

显示效果见demo.

ios-corner's People

Contributors

crosspqw avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.