"iOS Development Daily Small notes (10)" self-made with round frame avatar take advantage of the Calayer setting "Homestay Map"

This article is a piece of my "iOS development Daily Small Notes" series, which is recorded in the development work today, can be explained with a short article or a small demo demo small tips. They may give the user experience, the code efficiency to get some improvement, or have not been in touch with the technology, very happy to learn, put here to be a little bit. The role of 90% is to help you review, remember, review.

In the previous article, I reviewed and reviewed the core graphics framework using Quartz 2D to draw a variety of graphics, in fact, these drawings are drawn to the UIView calayer layer. This time, inspired by another blog post (http://www.cnblogs.com/kenshincui/p/3972100.html), I used a "homestay map" on the Calayer layer to re-optimize a small control in my project. This article describes setting up a "homestay map" on the Calayer layer. (Demo address: Https://github.com/pigpigdaddy/CircleHeadViewDemo)

The effect is this: The user's avatar is no longer a rectangle, but a circle with a border shadow with the white border. Similar effects such as "Sing Bar", "QQ".

Here is the effect I wrote myself: (with a little bit of shadow.) ）

Previously, we used a flattering approach, which was to let the UI group cut us a "middle cutout" image, blindfolded on Uiimageview (our avatar). This is very flattering, but the level is too low, and flexibility is very low. "Edge width", "Edge Color", "shadow", to change these can only bother the UI group of classmates to re-cut the diagram. In short, very unscientific.

So take a look at a very simple class I wrote myself to solve these problems: (Demo address: Https://github.com/pigpigdaddy/CircleHeadViewDemo)

Classes for working with photos:

1 //2 //CircleHeadView.h3 //Circleheadviewdemo4 //5 //Created by Pigpigdaddy on 14-9-24.6 //Copyright (c) 2014 Pigpigdaddy. All rights reserved.7 //8 9 #import<UIKit/UIKit.h>Ten  Onetypedefenum { A Circleheadviewcontentresize, - Circleheadviewcontentresizeaspect, - Circleheadviewcontentresizeaspectfill the } circleheadviewcontenttype; -  - @interfaceCircleheadview:uiview -  +@property (nonatomic, strong) Uicolor *Strokecolor; - @property (nonatomic, assign) cgfloat strokewidth; +@property (nonatomic, strong) UIImage *Originalimage; A @property (nonatomic, assign) BOOL Needshadow; at @property (nonatomic, assign) Circleheadviewcontenttype ContentType; -  -- (void) Setcircleimage: (UIImage *) image; -  - @end

1 //2 //circleheadview.m3 //Circleheadviewdemo4 //5 //Created by Pigpigdaddy on 14-9-24.6 //Copyright (c) 2014 Pigpigdaddy. All rights reserved.7 //8 9 #import "CircleHeadView.h"Ten  One @implementationCircleheadview A  -- (ID) initWithFrame: (CGRect) Frame - { theSelf =[Super Initwithframe:frame]; -     if(self) { -         //Initialization Code -         //Set Default values +Self.needshadow =NO; -Self.strokecolor =[Uicolor Whitecolor]; +Self.strokewidth =2.0; ASelf.contenttype =circleheadviewcontentresize; at     } -     returnSelf ; - } -  - //set the original picture -- (void) Setcircleimage: (UIImage *) Image in { -Self.originalimage =image; to      +     //Positive Circle -CGRect Bounds=cgrectmake (0,0, Self.bounds.size.height, self.bounds.size.height); theCGFloat cornerradius=self.bounds.size.height/2; *      $     if(Self.needshadow) {Panax Notoginseng         //Create a shadow layer - [self createshadowlayer:bounds cornerradius:cornerradius]; the     } +     //Create a photo layer A [self createimagelayer:bounds cornerradius:cornerradius]; the } +  -- (void) Createshadowlayer: (cgrect) Bounds Cornerradius: (cgfloat) Cornerradius $ { $Calayer *layershadow=[[Calayer alloc]init]; -layershadow.bounds=bounds; -Layershadow.position=cgpointmake (self.bounds.size.width/2, self.bounds.size.height/2); thelayershadow.cornerradius=Cornerradius; -Layershadow.shadowcolor=[Uicolor Graycolor]. Cgcolor;WuyiLayershadow.shadowoffset=cgsizemake (2,2); thelayershadow.shadowopacity=0.7; -Layershadow.bordercolor=Self.strokeColor.CGColor; WuLayershadow.borderwidth=Self.strokewidth; - [Self.layer Addsublayer:layershadow]; About } $  -- (void) Createimagelayer: (cgrect) Bounds Cornerradius: (cgfloat) Cornerradius - { -Calayer *layer=[[Calayer alloc]init]; Alayer.bounds=bounds; +Layer.position=cgpointmake (self.bounds.size.width/2, self.bounds.size.height/2); theLayer.backgroundcolor=[Uicolor Blackcolor]. Cgcolor; -layer.cornerradius=Cornerradius; $layer.maskstobounds=YES; theLayer.bordercolor=Self.strokeColor.CGColor; theLayer.borderwidth=Self.strokewidth; theLayer.contents= (ID) Self.originalImage.CGImage; the [Self.layer Addsublayer:layer]; -      in     //set how photos are tiled the     Switch(self.contenttype) { the          Casecircleheadviewcontentresize: About         { theLayer.contentsgravity =kcagravityresize; the         } the              Break; +          CaseCircleheadviewcontentresizeaspect: -         { theLayer.contentsgravity =Kcagravityresizeaspect;Bayi         } the              Break; the          CaseCircleheadviewcontentresizeaspectfill: -         { -Layer.contentsgravity =Kcagravityresizeaspectfill; the         } the              Break; the              the         default: -              Break; the     } the } the 94 @end

I used two calayer layers to draw "shadows" and "photos", respectively.

Call Method:

1Circleheadview *view = [[Circleheadview alloc] Initwithframe:cgrectmake ( -, -, the, the)];2View.needshadow =YES;3View.strokewidth =2.0;4View.strokecolor =[Uicolor Whitecolor];5View.contenttype =Circleheadviewcontentresizeaspectfill;6[View Setcircleimage:[uiimage imagenamed:@"Photo.png"]];7[Self.view Addsubview:view];

Simple and flexible, you can set shadow, edge width, edge color, tile type. You can actually set more, because Calayer can customize things a lot. There is no expansion of this.

(Demo address: Https://github.com/pigpigdaddy/CircleHeadViewDemo)

Reference article:

Http://www.cnblogs.com/kenshincui/p/3972100.html

"iOS Development Daily Small notes (10)" self-made with round frame avatar take advantage of the Calayer setting "Homestay Map"