Implementation of the iOS avatar effect (border, shadow, clickable)

Objective: To achieve an image with three-dimensional effect

Two:

Third, the composition of the introduction:

1, a uiimageview (used to display photos)

2. Calayer (shadow effect to show the background)

3, gesture (click on the photo to respond, you can add some to view the avatar and change the effect of avatar)

Four, the code is as follows:

1   //Add a circular picture with an inner border2Uiimageview *headimage=[[uiimageview Alloc]initwithframe:cgrectmake ( -, -, -, -)];3 [Headimage setbackgroundcolor:[uicolor bluecolor];4headimage.layer.cornerradius= -; Setting the round effect is set according to the width of the imageveiw .5Headimage.image=[uiimage imagenamed:@"Image.png"];6Headimage.contentmode=Uiviewcontentmodescaleaspectfill;7headimage.clipstobounds=YES; This must be set to cut the picture into a circle, and the shadow effect is outside the garden, so it is not possible to add a shadow in this ImageView8Headimage.layer.borderwidth=3; Although you can't add a shadow effect, you can add an inner border effect that feels pretty9Headimage.layer.bordercolor=[uicolor colorwithred:1.0Green1.0Blue1.0Alpha0.6]. cgcolor;//setting color and transparencyTen [Self.view addsubview:headimage]; One     //Add Background ACalayer *layer=[[Calayer alloc]init]; -layer.position=headImage.layer.position; This is a man who likes to write this. -layer.bounds=headimage.bounds; thelayer.cornerradius=HeadImage.layer.cornerRadius; -Layer.backgroundcolor=[uicolor Blackcolor]. Cgcolor;//The background color of the layer must be set here, which should be transparent by default, causing the shadow color of the setting to not be displayed . -Layer.shadowcolor=[Uicolor Graycolor].　　　　　Cgcolor; Set the color of the shadow -layer.shadowradius=5; Set the width of the shadow +Layer.shadowoffset=cgsizemake (2,2); Set Offset -layer.shadowopacity=1; + [Self.view.layer Addsublayer:layer]; A [Self.view bringsubviewtofront:headimage]; at     //Add gestures -UITapGestureRecognizer *tap=[[UITapGestureRecognizer alloc]initwithtarget:self Action: @selector (Clickedtheimage)];//response method not written -Headimage.userinteractionenabled=yes;///user interaction must be set to use gestures -[Headimage Addgesturerecognizer:tap];

Five??、 summary and precautions

1. Add a picture to ImageView and set the clipstobounds to not show the external shadow effect, because the shadow effect is set externally, once cut is not, so add a calayer to show this shadow effect.          2. To add a picture to Imgeview to set the Clipstobounds=yes, so that the picture can be set to a circle; the 3.imageView boundary effect is headimage.layer.borderwidth=3; Headimage.layer.bordercolor=[uicolor colorwithred:1.0 green:1.0 blue:1.0 alpha:0.6].     Cgcolor; 4. To display the shadow effect at the Calayer layer, you must set the background color of Calayer 5. After adding the Calayer layer, set the ImageView to the front 6. Gesture interaction after adding gestures, or not responding Headimage.user Interactionenabled=yes;

(author original)

Implementation of the iOS avatar effect (border, shadow, clickable)