自製帶圓框的頭像

這篇文章是我的【ios開發每日小筆記】系列中的一片，記錄的是今天在開發工作中遇到的，可以用很短的文章或很小的demo演示解發布來的小心得小技巧。它們可能會給使用者體驗、**效率得到一些提公升，或是之前自己沒有接觸過的技術，很開心的學到了，放在這裡得瑟一下。90%的作用是幫助自己回顧、記憶、複習。

效果是這樣的：使用者的頭像不再是乙個矩形，而是乙個有這白色邊框，帶邊框陰影的圓形。類似的效果比如「唱吧」、「qq」。

下面是我自己寫的效果：（帶有一點點陰影。）

以前，我們使用乙個討巧的方法，那就是讓ui組給我們切乙個「中間鏤空」的，蒙在uiimageview（我們的頭像）上面。這樣做挺討巧，但是水平未免也太低了，而且靈活度非常低。「邊寬」、「邊顏色」、「陰影」，要改變這些只能麻煩ui組的同學重新切圖。總之非常不科學。

用於處理**的類：

1//2
circleheadviewdemo4//
5//created by pigpigdaddy on 14-9-24.6//
7//89
#import
1011 typedef enum
circleheadviewcontenttype;
1617
@inte***ce
circleheadview : uiview
1819 @property (nonatomic, strong)uicolor *strokecolor;
20@property (nonatomic, assign)cgfloat strokewidth;
21 @property (nonatomic, strong)uiimage *originalimage;
22@property (nonatomic, assign)bool needshadow;
23@property (nonatomic, assign)circleheadviewcontenttype contenttype;
2425 - (void)setcircleimage:(uiimage *)image;
2627
@end

1//2
circleheadviewdemo4//
5//created by pigpigdaddy on 14-9-24.6//
7//89
#import
"circleheadview.h"10
11@implementation
circleheadview
1213 - (id
)initwithframe:(cgrect)frame
1424
return
self;25}
2627
//設定原始
28 - (void)setcircleimage:(uiimage *)image
2940
//建立**層
41[self createimagelayer:bounds cornerradius:cornerradius];42}
4344 - (void
)createshadowlayer:(cgrect)bounds cornerradius:(cgfloat)cornerradius
4557
58 - (void
)createimagelayer:(cgrect)bounds cornerradius:(cgfloat)cornerradius
5977
break;78
case
circleheadviewcontentresizeaspect:
7982
break;83
case
circleheadviewcontentresizeaspectfill:
8487
break;88
89default:90
break;91
}92}93
94@end

我用了兩個calayer層，來分別繪製「陰影」和「**」。

呼叫方法：

1     circleheadview *view = [[circleheadview alloc] initwithframe:cgrectmake(50, 50, 80, 80
)];2     view.needshadow =yes;
3     view.strokewidth = 2.0
;4     view.strokecolor =[uicolor whitecolor];
5     view.contenttype =circleheadviewcontentresizeaspectfill;
6     [view setcircleimage:[uiimage imagenamed:@"
photo.png
"]];
7     [self.view addsubview:view];

很簡單，也很靈活，可以設定「陰影」、「邊寬」、「邊顏色」、「平鋪型別」。其實還可以設定的更多，因為calayer可以自定義的東西有很多。在此就不一一擴充套件了。

自製帶圓框的頭像

框架學習六帶邊框的圓形頭像

基於jquery的頭像彈出框外掛程式JSPOP配置說明

自製的ST LINK V2 帶虛擬串列埠

自製帶圓框的頭像

框架學習六 帶邊框的圓形頭像

基於jquery的頭像彈出框外掛程式JSPOP配置說明

自製的ST LINK V2 帶虛擬串列埠

相關推薦

框架學習六帶邊框的圓形頭像