上一次讨论了图片拉伸的问题,只给出了一种拉伸方式,查文档(iOS 8.3)的时候,没有给出任何版本提示,不过看到有其他大神说,iOS 5.0 以后就被禁用了,不知道是怎么回事.
这次来讨论一下美化图片,最基本的是大家在玩QQ,微博等app时,都会发现,用户头像做的很漂亮,圆形的,四个角有一定弧度的矩形等等,看着让人舒服.
接下来讨论一下如何做出这样的效果:
1 #import "ViewController.h" 2 3 @interface ViewController () 4 5 @end 6 7 @implementation ViewController 8 9 - (void)viewDidLoad { 10 [super viewDidLoad]; 11 12 // 美化图片的边框 13 [self beautyPhoto]; 14 } 15 16 // 美化图片的边框 17 - (void)beautyPhoto 18 { 19 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(120, 180, 80, 80)]; 20 imageView.image = [UIImage imageNamed:@"6.png"]; // 80 * 80 21 [self.view addSubview:imageView]; 22 }
上面的代码是加载一张本地图片,没有做任何处理,效果如下:
因为没有做任何处理,所以四个角是尖锐的,接下来为其处理一下边角,代码如下:
1 #import "ViewController.h" 2 3 @interface ViewController () 4 5 @end 6 7 @implementation ViewController 8 9 - (void)viewDidLoad { 10 [super viewDidLoad]; 11 12 // 美化图片的边框 13 [self beautyPhoto]; 14 } 15 16 // 美化图片的边框 17 - (void)beautyPhoto 18 { 19 UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(120, 180, 80, 80)]; 20 imageView.image = [UIImage imageNamed:@"6.png"]; // 80 * 80 21 [self.view addSubview:imageView]; 22 23 // 美化图片 24 // 设置图片的边框宽度 25 imageView.layer.borderWidth = 4; 26 // 设置图片的边框颜色 27 imageView.layer.borderColor = [UIColor lightGrayColor].CGColor; 28 // 设置图片的拐角的弧度的大小(此处不使用弧度) 29 imageView.layer.cornerRadius = 10; 30 // 截取超出边框外的部分 31 imageView.layer.masksToBounds = YES; 32 }
在上面的代码中,设置了图片的边框宽度,颜色以及边角的弧度等,为了让设置的内容显示比较清晰,故将边框的宽度设置的比较大,其运行效果如下:
可以看到,图片的四个角已不再尖锐.
想做出QQ用户头像那种圆形头像,也很简单,只要设置图片拐角的弧度大小为矩形图片宽度的一半就行了,如果是正方形,则图片显示为一个圆形,如果是长方形,则图片显示为一个椭圆形.
上面的图片设置拐角的弧度为40后的效果如下: // imageView.layer.cornerRadius = 40;
这样,我们就做出QQ用户头像那种圆形的图片了.