ios-round corner setting performance optimization

Source: Internet
Author: User

Check out some of the corners of the performance optimization of the post, summarized under the record.
First of all:
Dsimageviewround How to use
iOS pictures high performance setting fillet

In general, we set the rounded corners in the iOS development process as follows.

 avatarImageView.clipsToBounds = YES; [avatarImageView.layer setCornerRadius:50];

This setting triggers off-screen rendering and compares consumption performance. For example, when you have more than 10 avatars on a page that have rounded corners
Will obviously feel the lag.

Note: PNG images Uiimageview processing fillets do not produce off-screen rendering. (ios9.0 will not be rendered after the ios9.0 and will be rendered before the screen is left).
So if you want to set a high-performance fillet, you need to find another way. Here are some of the methods I found

Ways to set rounded corners

1. Direct use of Setcornerradius

This is the most commonly used, but also the most consumption of performance.

2.setCornerRadius after setting rounded corners, Shouldrasterize=yes rasterization

avatarImageView.clipsToBoundsYES; [avatarImageView.layer setCornerRadius:50]; avatarImageView.layer.shouldRasterizeYES;

Shouldrasterize=yes set rasterization allows the results of off-screen rendering to be cached in memory as bitmaps, using the cache directly, saving the performance of the off-screen rendering loss.

However, if layer and sublayers often change, it will continue to render and delete the cache re-create cache, so in this case it is recommended not to use rasterization, so it is more lossy performance.

3. Opportunistic methods:-> directly to a picture with a circular transparency in the middle

This method is to add a transparent picture, GPU compute multi-layered mixed rendering blending also consumes a bit of performance, but better than the first method is much better.

4.UIImage drawinrect to draw rounded corners

This way GPU lossy low memory consumption is large, and UIButton do not know how to draw, you can use Uiimageview to add a click gesture as UIButton.

UIGraphicsBeginImageContextWithOptions(avatarImageView.bounds.size, NO, [UIScreen mainScreen].scale);  [[UIBezierPath bezierPathWithRoundedRect:avatarImageView.bounds cornerRadius:50] addClip];  [image drawInRect:avatarImageView.bounds];  avatarImageView.image = UIGraphicsGetImageFromCurrentImageContext();  UIGraphicsEndImageContext();

This method can be written in Sdwebimage's completed callback, which is drawn asynchronously in the main thread. can also be encapsulated in the Uiimageview, wrote a dsroundimageview. Background threads are drawn asynchronously and do not block the main thread.

5.SDWebImage working with a picture when the core graphics draws rounded corners

UIImage plotted as rounded int w = imagesize.width;  int h = imagesize.height; int radius = imagesize.width/2;  UIImage *img = image;  Cgcolorspaceref colorspace = Cgcolorspacecreatedevicergb (); CgcontextrefContext= Cgbitmapcontextcreate (NULL, W, H,8,4* W, ColorSpace, Kcgimagealphapremultipliedfirst); CGRect rect = CGRectMake (0,0, W, h); Cgcontextbeginpath (Context); Addroundedrecttopath (Context, rect, radius, radius); Cgcontextclosepath (Context); Cgcontextclip (Context); Cgcontextdrawimage (Context, CGRectMake (0,0, W, h), IMG.  Cgimage); Cgimageref imagemasked = Cgbitmapcontextcreateimage (Context);  IMG = [UIImage imagewithcgimage:imagemasked]; Cgcontextrelease (Context);  Cgcolorspacerelease (ColorSpace); Cgimagerelease (imagemasked);

I wrote the above code in the category of UIImage: Uiimage+dsroundimage.h and using the category method to draw the fillet and cache when processing the image in the Sdwebimage library.
This category GitHub address: https://github.com/walkdianzi/DSRoundedImageArticle
View performance using Instruments's core animation

Color offscreen-rendered Yellow

When turned on, the layers that need to be rendered off-screen are highlighted in yellow, which means there may be a performance problem with the yellow layer.
Color Hits Green and Misses Red

If Shouldrasterize is set to Yes, the corresponding render result is cached, if the layer is green, the cache is reused, and if it is red, the cache is created repeatedly, indicating that there is a performance problem.
Tested with instruments.

The first method, ios9.0 before Uiimageview and UIButton, is highlighted in yellow. Only UIButton is highlighted in yellow after ios9.0.

The second method Uiimageview and UIButton are highlighted in green

The third method, without any highlighting, indicates that there is no off-screen rendering. This method of covering the circle is generally used only when the background is a solid color, if the picture of the parent view of the fillet is a picture of the time there is no way, and if the background color if it is a variety of colors, it should be more than a different color of the disc cover. (You can use the color value of the background of the code to colorize the disc)

The fourth method does not have any highlighting, indicating no off-screen rendering (but CPU consumption and memory usage can be very large)

The fifth method does not have any highlighting, indicating that there is no off-screen rendering, and the memory footprint is small. (Temporary feeling is the best method)

Collection 2:
A line of code, round the corner rain or shine, goodbye off-screen rendering performance loss
GitHub bunker. Link: Https://github.com/liuzhiyi1992/ZYCornerRadius

Finally, you can look at the performance-optimized posts written by the idol God:
http://blog.ibireme.com/2015/11/12/smooth_user_interfaces_for_ios/

Stand on the shoulders of giants and program!

ios-round corner setting performance optimization

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.