iOS-圆形图像显示(UIImageView)
2016-02-04 15:05
477 查看
在现在很多App中开始使用圆形的图像显示方式,比如说QQ中的头像和图标,微博的头像等。这次我们就对
实现圆形图像显示的代码很简单,我们为了能让其更好的应用到项目中,我们结合之前的iOS对话框的实践,做了个小demon来展示如何拍照或从相册读取图片,然后以圆形图像的方式显示出来。
因为图像为正方形的,所以我们只需要把UIImageView控件的圆角设置为正方形边长的一半即可得到一个圆。
我们除了可以设置控件的圆角之外,还可以设置控件的边框大小以及颜色。(似乎这些主要涉及就是CALayer相关的东西?!)
到这里可能有人会想到,我们不可以直接在这里把图片处理成圆形图片不就好了么,的确可以这样!只是我们可以简单几行代码设置显示方式即可,除非有特殊要求把图像处理为圆形,不然何必多此一举对吧啊哈哈哈哈。再说正方形图像更常用,说不定什么地方还能用上呢~~
iOS-Demon——CircleImageView
UIImageView进行相应的设置,以便达到圆形图像的显示效果。
实现圆形图像显示的代码很简单,我们为了能让其更好的应用到项目中,我们结合之前的iOS对话框的实践,做了个小demon来展示如何拍照或从相册读取图片,然后以圆形图像的方式显示出来。
界面
我们的界面设计很简单,直接在storyboard中加入一个UIImageView和
UIButton,
UIButton将会触发对话框。此外还涉及到了
UIImagePickerController的使用,可以便捷的获取拍照或相册中的图片资源。
圆形图像
设置圆形图像的原理很简单,通过设置UIImageView的圆角属性即可。首先我们需要保证待设置的图片资源大小为方形的(稍后我们会提供图像裁剪方法)。由于我们使用UIImagePickerController并设置其allowEditing属性之后获取的图像资源大小为正方形,故可以暂时忽略这一步。
因为图像为正方形的,所以我们只需要把UIImageView控件的圆角设置为正方形边长的一半即可得到一个圆。
我们除了可以设置控件的圆角之外,还可以设置控件的边框大小以及颜色。(似乎这些主要涉及就是CALayer相关的东西?!)
[code] //设置图像显示控件为圆形 - (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中并没有用到图片的裁剪,但是很有可能实践项目中会涉及到图片裁剪成正方形。裁剪算法也很简单,以最短边边长为裁剪正方形的边长,在图像剧中的位置进行裁剪。[code] //截取居中的方形图像 - (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的实例是以模态方式显示的。
[code]#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显示效果
相关文章推荐
- UINavigationController和UIScrollView一起使用时导致UIScrollView位置偏移
- Android 动画 ValueAnimator(三)
- AbstractQueuedSynchronizer
- UIButton的resizableImageWithCapInsets使用解析--拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片
- 基于IBM Bluemix的数据缓存应用实例
- iOS三种让UILabel中的text居上的方式
- 自定义WheelView UI 实现Ios滚轮效果
- fragment 用法小结
- iOS开发小记:运用Runtime机制扩大UIButton的响应区域
- iOS7中UIView的animateKeyframesWithDuration方法讲解
- 不自定义也可更改UITableViewCellSection背景颜色字体颜色
- 用UITextView加载rtfd文件
- 【Android】3.7 UI控制功能
- unsigned , NSInteger/NSUInter ,NSNumber,
- UITableView练习三之Static Cells
- hdoj4000Fruit Ninja【树状数组】
- UITableView上的UITextField防止被键盘遮挡
- Groupon面经:Find paths in a binary tree summing to a target value
- druid监控没有数据
- UItexfile实时验证输入字符