我們在開發(fā)中,很多地方可能都會 imageView 的身影,尤其是應(yīng)用管理類的 app,包括一些社交類的用戶頭像. 如果簡單的把這些頭像或者應(yīng)用圖標(biāo)設(shè)置為正方形,總感覺不是那么的美觀,那么今天,我們一起看下該如何快速設(shè)置 imageView 形狀
為了方便以后使用,我把這些功能都封裝到一起了,以后可以直接拿來用
針對圓形形狀,我個人是先創(chuàng)建了一個繼承字UIImage 的Category,頭文件聲明了兩個方法,一個類方法,一個對象方法
#import <UIKit/UIKit.h>
@interface UIImage (XFExtension)
/**
* 返回圓形圖片
*/
- (instancetype)xf_circleImage;
+ (instancetype)xf_circleImage:(NSString *)name;
@end
在.m 文件里,先實現(xiàn)能返回圓形的對象方法
#import "UIImage+XFExtension.h"
@implementation UIImage (XFExtension)
- (instancetype)xf_circleImage {
// 開啟圖形上下文
UIGraphicsBeginImageContext(self.size);
// 上下文
CGContextRef context = UIGraphicsGetCurrentContext();
// 添加一個圓
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
CGContextAddEllipseInRect(context, rect);
// 裁剪
CGContextClip(context);
// 繪制圖片
[self drawInRect:rect];
// 獲得圖片
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
// 關(guān)閉圖形上下文
UIGraphicsEndImageContext();
return image;
}
+ (instancetype)xf_circleImage:(NSString *)name {
return [[self imageNamed:name] xf_circleImage];
}
@end
類方法的實現(xiàn)通過外界傳入的 image,返回一個圓形的
+ (instancetype)xf_circleImage:(NSString *)name { return [[self imageNamed:name] xf_circleImage];}
然后,我創(chuàng)建了一個繼承字UIImageView的Category,這里的方法是真正開放給外界使用的,所以在頭文件中,我聲明了三個對象方法
#import <UIKit/UIKit.h>
@interface UIImageView (XFExtension)
/**
* 圓形
*/
- (void)xf_setCircleHeaderWithUrl:(NSString *)url placeholder:(NSString *)placeholderName;
/**
* 方形或者圓角型
*/
- (void)xf_setRectHeaderWithUrl:(NSString *)url placeholder:(NSString *)placeholderName;
/**
* 六邊形
*/
- (void)xf_setSixSideHeaderWithUrl:(NSString *)url placeholder:(NSString *)placeholderName;
@end
接著在.m 文件里,一一實現(xiàn)這些方法
首先是圓形
/**
* 圓形
*/
- (void)xf_setCircleHeaderWithUrl:(NSString *)url placeholder:(NSString *)placeholderName {
// 讓占位圖片也是圓的
UIImage *placeholderImage = [UIImage xf_circleImage:placeholderName];
[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:placeholderImage completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
if (image == nil) return;
self.image = [image xf_circleImage];
}];
}
接著是方形或者圓角型
/**
* 方形,也可以設(shè)置圓角
*/
- (void)xf_setRectHeaderWithUrl:(NSString *)url placeholder:(NSString *)placeholderName {
[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:[UIImage imageNamed:placeholderName] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
if (image == nil) return;
self.layer.cornerRadius = 8.0;
self.clipsToBounds = YES;
}];
}
最后是六邊形
/**
* 六邊形
*/
- (void)xf_setSixSideHeaderWithUrl:(NSString *)url placeholder:(NSString *)placeholderName {
[self sd_setImageWithURL:[NSURL URLWithString:url] placeholderImage:[UIImage imageNamed:placeholderName] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
if (image == nil) return;
// 這個寬高要跟外面你要設(shè)置的 imageview 的寬高一樣
CGFloat imageViewWH = 57;
UIBezierPath * path = [UIBezierPath bezierPath];
path.lineWidth = 2;
[path moveToPoint:CGPointMake((sin(M_1_PI / 180 * 60)) * (imageViewWH / 2), (imageViewWH / 4))];
[path addLineToPoint:CGPointMake((imageViewWH / 2), 0)];
[path addLineToPoint:CGPointMake(imageViewWH - ((sin(M_1_PI / 180 * 60)) * (imageViewWH / 2)), (imageViewWH / 4))];
[path addLineToPoint:CGPointMake(imageViewWH - ((sin(M_1_PI / 180 * 60)) * (imageViewWH / 2)), (imageViewWH / 2) + (imageViewWH / 4))];
[path addLineToPoint:CGPointMake((imageViewWH / 2), imageViewWH)];
[path addLineToPoint:CGPointMake((sin(M_1_PI / 180 * 60)) * (imageViewWH / 2), (imageViewWH / 2) + (imageViewWH / 4))];
[path closePath];
CAShapeLayer * shapLayer = [CAShapeLayer layer];
shapLayer.lineWidth = 2;
shapLayer.path = path.CGPath;
self.layer.mask = shapLayer;
}];
}
至此,方法聲明和實現(xiàn)已經(jīng)完成,接下來就是在相應(yīng)的位置,先導(dǎo)入頭文件,使用的時候就一句代碼就 OK 了
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor grayColor];
// 測試圖片 url
NSString *testUrl = @"http://bos.pgzs.com/itunesimg/31/351091731/c2dcc1bc41fa08a3a7ab3877e878b7a1_512x512bb.114x114-75.jpg";
float viewWidth = 57;
/*** 要設(shè)置圓形的 imageview */
UIImageView *imageView = [[UIImageView alloc] init];
imageView.frame = CGRectMake(70, 100, viewWidth, viewWidth);
[imageView xf_setCircleHeaderWithUrl:testUrl placeholder:@"icon"];
[self.view addSubview:imageView];
/*** 要設(shè)置圓角型的 imageview */
UIImageView *imageViewTwo = [[UIImageView alloc] init];
imageViewTwo.frame = CGRectMake(150, 100, viewWidth, viewWidth);
[imageViewTwo xf_setRectHeaderWithUrl:testUrl placeholder:@"icon"];
[self.view addSubview:imageViewTwo];
/*** 要設(shè)置六邊形的 imageview */
UIImageView *imageViewThree = [[UIImageView alloc] init];
imageViewThree.frame = CGRectMake(230, 100, viewWidth, viewWidth);
[imageViewThree xf_setSixSideHeaderWithUrl:testUrl placeholder:@"icon"];
[self.view addSubview:imageViewThree];
}
直接把所有代碼貼出來了,有了代碼,幾乎不用我廢話了
運行效果如下
我也不是什么大牛,很多東西也是 stackoverflow / Google,以及各種iOS大牛群里學(xué)來的,自認(rèn)為,學(xué)到就是賺到.哈哈
- 最后奉上我的這些
Category鏈接,如果你覺得有用,可以 down 下來. - 穿越至 github ---> XFCategory(里面還有我總結(jié)的一些其他 Category)
