iOS-圆形图像显示(UIImageView)

在现在很多App中开始使用圆形的图像显示方式，比如说QQ中的头像和图标，微博的头像等。这次我们就对UIImageView进行相应的设置，以便达到圆形图像的显示效果。

实现圆形图像显示的代码很简单，我们为了能让其更好的应用到项目中，我们结合之前的iOS对话框的实践，做了个小demon来展示如何拍照或从相册读取图片，然后以圆形图像的方式显示出来。

界面

我们的界面设计很简单，直接在storyboard中加入一个UIImageView和UIButton，UIButton将会触发对话框。此外还涉及到了UIImagePickerController的使用，可以便捷的获取拍照或相册中的图片资源。

圆形图像

设置圆形图像的原理很简单，通过设置UIImageView的圆角属性即可。首先我们需要保证待设置的图片资源大小为方形的（稍后我们会提供图像裁剪方法）。由于我们使用UIImagePickerController并设置其allowEditing属性之后获取的图像资源大小为正方形，故可以暂时忽略这一步。
因为图像为正方形的，所以我们只需要把UIImageView控件的圆角设置为正方形边长的一半即可得到一个圆。
我们除了可以设置控件的圆角之外，还可以设置控件的边框大小以及颜色。（似乎这些主要涉及就是CALayer相关的东西？！）

    //设置图像显示控件为圆形
    - (void)changeToCirclePicture
    {
        //设置圆角半径为方形边长一半
        [self.imageView.layer setCornerRadius:CGRectGetHeight([self.imageView bounds]) / 2];
        [self.imageView.layer setMasksToBounds:YES];

        //设置边框宽度和颜色
        [self.imageView.layer setBorderWidth:10];
        [self.imageView.layer setBorderColor:[[UIColor grayColor] CGColor]];
    }

图像裁剪

虽然我们这个demon中并没有用到图片的裁剪，但是很有可能实践项目中会涉及到图片裁剪成正方形。裁剪算法也很简单，以最短边边长为裁剪正方形的边长，在图像剧中的位置进行裁剪。

    //截取居中的方形图像
    - (UIImage *)cutPicture:(UIImage *)raw
    {
        CGSize origImageSize = raw.size;
        CGRect newRect = CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_WIDTH);

        float ratio = MAX(newRect.size.width / origImageSize.width, newRect.size.height / origImageSize.height);

        //创建透明位图上下文
        UIGraphicsBeginImageContextWithOptions(newRect.size, NO, 0.0);
        //创建圆角矩形的对象，这里设置圆角为0
        UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:newRect cornerRadius:0.0];
        //裁剪图形上下文
        [path addClip];

        //让图片在缩略图绘制范围内居中
        CGRect projectRect;
        projectRect.size.width = ratio * origImageSize.width;
        projectRect.size.height = ratio * origImageSize.height;
        projectRect.origin.x = (newRect.size.width - projectRect.size.width) / 2.0;
        projectRect.origin.y = (newRect.size.height - projectRect.size.height) / 2.0;

        //在上下文中绘制图片
        [raw drawInRect:projectRect];

        //从上下文获取图片，并复制给item
        UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext();

        //清理图形上下文
        UIGraphicsEndImageContext();

        return smallImage;
    }

到这里可能有人会想到，我们不可以直接在这里把图片处理成圆形图片不就好了么，的确可以这样！只是我们可以简单几行代码设置显示方式即可，除非有特殊要求把图像处理为圆形，不然何必多此一举对吧啊哈哈哈哈。再说正方形图像更常用，说不定什么地方还能用上呢~~

UIImagePickerController

UIImagePickerController是系统提供的一个ViewController,可以让我们通过拍照或相册选择图片的方式获取图片资源。这个类需要实现两个协议，UIImagePickerControllerDelegate和UINavigationControllerDelegate。在这里我们主要实现了两个委托方法，分别是图像选取完后的处理，以及取消图像选取操作的处理。PS:UIImagePickerController的实例是以模态方式显示的。

#pragma mark - UIImagePickerControllerDelegate 协议的实现

//这个为图像选择完毕之后的回调
//在这里获取我们选择的图像的UIImage对象，其中info字典中存储了获取的图片资源
//这里我们获取的是编辑过后的资源，所以使用的键值是：UIImagePickerControllerEditedImage
//如果需要获取原图像的资源则使用：UIImagePickerControllerOriginalImage
//此外通过info字典还可以获取其他信息，详细查看官方文档
- (void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info
{
    UIImage *image = [info valueForKey:UIImagePickerControllerEditedImage];
    self.imageView.image = image;

    [self dismissViewControllerAnimated:YES completion:nil];
}

//这个为点击取消选择图片之后的回调，关闭controller
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker
{
    [self dismissViewControllerAnimated:YES completion:nil];
}

源代码

这里给出的是Github上的源码地址。
iOS-Demon——CircleImageView

Demon显示效果