iOS设置圆角阴影 避免离屏渲染
ios 控件设置圆角,避免离屏渲染。
离屏渲染:指gpu(图形处理器)在当前屏幕缓冲区外新开辟一个渲染缓冲区进行工作。这会给我们带来额外的性能损耗,如果这样的操作达到一定数量,会触发缓冲区的频繁合并和上下文的的频繁切换,会出现卡顿、掉帧现象。造成离屏渲染的原因有很多,如:shouldrasterize(光栅化)、mask(遮罩层)、shadows(阴影)、edgeanntialiasing(抗锯齿)、cornerradius(圆角)等等。
下面说一下什么情况下设置圆角会造成离屏渲染:
//设置cornerradius>0且maskstobounds为yes view.layer.cornerradius = 10.f; view.layer.maskstobounds = yes; //设置cornerradius>0且maskstobounds为yes view.layer.cornerradius = 10.f; view.cliptobounds = yes; //像下面设置view.layer.mask uibezierpath *path = [uibezierpath bezierpathwithroundedrect:imgview.bounds byroundingcorners:uirectcornerallcorners cornerradii:cgsizemake(10.f, 10.f)]; cashapelayer *masklayer = [[cashapelayer alloc] init]; masklayer.frame = view.bounds; masklayer.path = path.cgpath; view.layer.mask = masklayer;
上面第一种应该是最常用的,是在设置了圆角及maskstobounds为yes时,才会触发离屏渲染,而maskstobounds默认是no,也就是说只要不设置这个属性就能避免很多情况了,下面说一下如何切一个不触发离屏渲染的圆角:
uiview、uitextfield、uitextview等大部分控件都可以像下面这样设置:
view.layer.cornerradius = 10.f; view.layer.maskstobounds = no;
有一些特殊情况,uilabel设置时,不要设置label.backgroundcolor,应设置:
label.layer.cornerradius = 10.f; label.layer.backgroundcolor = [uicolor whitecolor].cgcolor;
有图片的uibutton、uiimageview,用drawinrect绘制uiimage圆角:
uibezierpath *bezierpath = [uibezierpath bezierpathwithroundedrect:rect cornerradius:cornerradius]; uigraphicsbeginimagecontextwithoptions(rect.size, false, [uiscreen mainscreen].scale); cgcontextaddpath(uigraphicsgetcurrentcontext(), bezierpath.cgpath); cgcontextclip(uigraphicsgetcurrentcontext()); [self drawinrect:rect]; cgcontextdrawpath(uigraphicsgetcurrentcontext(), kcgpathfillstroke); uiimage *image = uigraphicsgetimagefromcurrentimagecontext(); uigraphicsendimagecontext();
查看离屏渲染,模拟器可以选中“debug - color off-screen rendered”开启调试,真机可以用instruments检测,“instruments - core animation - debug options - color offscreen-rendered yellow”开启调试,开启后,有离屏渲染的图层会变成高亮的黄色。
写了个离屏渲染的样例:
下面贴上代码:
控制器viewcontroller:
#import "viewcontroller.h" #import "uiimage+hwcorner.h" #define kmainw [uiscreen mainscreen].bounds.size.width @interface viewcontroller () @end @implementation viewcontroller - (void)viewdidload { [super viewdidload]; self.view.backgroundcolor = [uicolor whitecolor]; //创建控件 [self creatcontrol]; } - (void)creatcontrol { cgfloat margin = 20.f; cgfloat controlw = (kmainw - margin * 3) * 0.5; nsarray *titlearray = @[@"离屏渲染", @"非离屏渲染"]; for (int i = 0; i < titlearray.count; i++) { cgfloat controlx = margin + (controlw + margin) * i; //uilabel uilabel *label = [[uilabel alloc] initwithframe:cgrectmake(controlx, 30, controlw, 40)]; label.layer.backgroundcolor = [[uicolor graycolor] cgcolor]; label.text = titlearray[i]; label.textalignment = nstextalignmentcenter; label.layer.cornerradius = label.bounds.size.height * 0.5; label.layer.maskstobounds = i == 0 ? yes : no; [self.view addsubview:label]; //uiview uiview *view = [[uiview alloc] initwithframe:cgrectmake(controlx, cgrectgetmaxy(label.frame) + margin, controlw, 40)]; view.backgroundcolor = [uicolor graycolor]; view.layer.cornerradius = view.bounds.size.height * 0.5; view.layer.maskstobounds = i == 0 ? yes : no; [self.view addsubview:view]; //uiview若未添加子控件,设置view.layer.maskstobounds = yes;也不会造成离屏渲染 uiview *subview = [[uiview alloc] initwithframe:cgrectmake(30, 0, controlw - 60, 40)]; subview.backgroundcolor = [uicolor redcolor]; [view addsubview:subview]; //uitextview uitextview *textview = [[uitextview alloc] initwithframe:cgrectmake(controlx, cgrectgetmaxy(view.frame) + margin, controlw, 40)]; textview.userinteractionenabled = no; textview.backgroundcolor = [uicolor graycolor]; if (i == 0) { /* 这里换了一种实现方法,用uibezierpath赋值layer.mask,两种方式都会造成离屏渲染 textview.layer.cornerradius = textview.bounds.size.height * 0.5; textview.layer.maskstobounds = yes; */ uibezierpath *path = [uibezierpath bezierpathwithroundedrect:textview.bounds byroundingcorners:uirectcornertopleft | uirectcornertopright cornerradii:cgsizemake(textview.bounds.size.height * 0.5, textview.bounds.size.height * 0.5)]; cashapelayer *masklayer = [[cashapelayer alloc] init]; masklayer.frame = textview.bounds; masklayer.path = path.cgpath; textview.layer.mask = masklayer; }else { textview.layer.cornerradius = textview.bounds.size.height * 0.5; textview.layer.maskstobounds = no; } [self.view addsubview:textview]; //uibutton uibutton *button = [[uibutton alloc] initwithframe:cgrectmake(controlx, cgrectgetmaxy(textview.frame) + margin, controlw, controlw)]; if (i == 0) { [button setimage:[uiimage imagenamed:@"hero_1"] forstate:uicontrolstatenormal]; button.layer.cornerradius = button.bounds.size.width * 0.5; button.layer.maskstobounds = yes; }else { [button setimage:[[uiimage imagenamed:@"hero_1"] drawcornerinrect:button.bounds cornerradius:button.bounds.size.width * 0.5] forstate:uicontrolstatenormal]; } [self.view addsubview:button]; //uiimageview设置圆角 uiimageview *imageview = [[uiimageview alloc] initwithframe:cgrectmake(controlx, cgrectgetmaxy(button.frame) + margin, controlw, controlw)]; if (i == 0) { [imageview setimage:[uiimage imagenamed:@"hero_1"]]; imageview.layer.cornerradius = imageview.bounds.size.width * 0.5; imageview.layer.maskstobounds = yes; }else { [imageview setimage:[[uiimage imagenamed:@"hero_1"] drawcornerinrect:imageview.bounds cornerradius:imageview.bounds.size.width * 0.5]]; } [self.view addsubview:imageview]; //uiimageview若未添加子控件,设置imageview.layer.maskstobounds = yes;也不会造成离屏渲染 uiview *subimageview = [[uiview alloc] initwithframe:cgrectmake(0, 0, controlw, 40)]; subimageview.backgroundcolor = [uicolor redcolor]; subimageview.layer.cornerradius = imageview.bounds.size.width * 0.5; [imageview addsubview:subimageview]; //uiimageview设置阴影 cgfloat imgw = 70.f; cgfloat imgpadding = (kmainw - imgw * 4 - margin * 2) / 3; uiimageview *shadowimgview = [[uiimageview alloc] initwithframe:cgrectmake(margin + (imgw + imgpadding) * 2 * i, cgrectgetmaxy(imageview.frame) + margin, imgw, imgw)]; [shadowimgview setimage:[uiimage imagenamed:@"hero_1"]]; shadowimgview.layer.shadowcolor = [uicolor redcolor].cgcolor; shadowimgview.layer.shadowopacity = 0.8f; shadowimgview.layer.shadowoffset = cgsizemake(5, 5); shadowimgview.layer.shadowradius = 5.f; if (i == 1) { uibezierpath *path = [uibezierpath bezierpathwithrect:shadowimgview.bounds]; shadowimgview.layer.shadowpath = path.cgpath; } [self.view addsubview:shadowimgview]; //uiimageview设置阴影+圆角 uiimageview *shadowcorimgview = [[uiimageview alloc] initwithframe:cgrectmake(margin + imgw + imgpadding + (imgw + imgpadding) * 2 * i, cgrectgetminy(shadowimgview.frame), imgw, imgw)]; [shadowcorimgview setimage:[[uiimage imagenamed:@"hero_1"] drawcornerinrect:imageview.bounds cornerradius:imageview.bounds.size.width * 0.5]]; shadowcorimgview.layer.shadowcolor = [uicolor redcolor].cgcolor; shadowcorimgview.layer.shadowopacity = 0.8f; shadowcorimgview.layer.shadowoffset = cgsizemake(0, 0); shadowcorimgview.layer.shadowradius = 5.f; if (i == 1) { uibezierpath *path = [uibezierpath bezierpathwithroundedrect:shadowcorimgview.bounds cornerradius:shadowcorimgview.bounds.size.height * 0.5]; shadowcorimgview.layer.shadowpath = path.cgpath; } [self.view addsubview:shadowcorimgview]; } } @end
uiimage分类,uiimage+hwcorner:
#import <uikit/uikit.h> @interface uiimage (hwcorner) //绘制图片圆角 - (uiimage *)drawcornerinrect:(cgrect)rect cornerradius:(cgfloat)cornerradius; @end /*** ---------------分割线--------------- ***/ #import "uiimage+hwcorner.h" @implementation uiimage (hwcorner) //绘制图片圆角 - (uiimage *)drawcornerinrect:(cgrect)rect cornerradius:(cgfloat)cornerradius { uibezierpath *bezierpath = [uibezierpath bezierpathwithroundedrect:rect cornerradius:cornerradius]; uigraphicsbeginimagecontextwithoptions(rect.size, false, [uiscreen mainscreen].scale); cgcontextaddpath(uigraphicsgetcurrentcontext(), bezierpath.cgpath); cgcontextclip(uigraphicsgetcurrentcontext()); [self drawinrect:rect]; cgcontextdrawpath(uigraphicsgetcurrentcontext(), kcgpathfillstroke); uiimage *image = uigraphicsgetimagefromcurrentimagecontext(); uigraphicsendimagecontext(); return image; } @end
最后说一下,只有在大量的离屏渲染情况时才会出现卡顿、掉帧等现象,没必要过分追求容不下一丝黄色。性能上instruments工具还可以检测很多。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: iOS下拉、上拉刷新控件的封装
下一篇: 验证本机的excel版本的C#代码