UIImageView是iOS中用于显示图像(图片、gif、svg等)的视图。
它的主要功能有:
1. 显示图片
UIImageView可以通过image属性显示一张UIImage类型的图片。可以是本地图片、从网络下载的图片等。
2. 设置填充模式
可以通过contentMode属性设置图片在UIImageView内的显示和填充模式。内容模式有:- scaleToFill:拉伸填充整个imageView
- scaleAspectFit:保持纵横比缩放适应imageView
- scaleAspectFill:保持纵横比缩放填充满imageView
- top、bottom、left、right:拉伸填充指定方向
- center:居中不拉伸显示
3. 设置多种交替动画
可以通过animationImages和animationDuration设置多张图片的交替动画。
或者配置UIImageViewAnimation方式来实现更为复杂的动画。
4. 支持用户交互
UIImageView支持用户交互事件,可以得到点击、拖动等事件。
5. 实现自适应布局
UIImageView支持Auto Layout,可以自动适应不同屏幕尺寸。
1. 创建UIImageView实例:
UIImageView *imgview = [[UIImageView alloc] init];
2.设置UIImageView的布局信息:
imgview.frame =CGRectMake((self.view.frame.size.width-100)/2, (self.view.frame.size.height-100)/2, 100, 100);
3. 设置image属性,显示图片:
imgview.image = [UIImage imageNamed:@"icon"]
这里需要使用UIImage类的imageNamed方法传入图片的名称来生成图片,然后赋给imgview的image属性。
效果图:
4. 设置contentMode属性,控制图片缩放模式:
imageView.contentMode = UIViewContentModeScaleToFill; // 充满 imageView.contentMode = UIViewContentModeScaleAspectFit; // 完整显示 imageView.contentMode = UIViewContentModeScaleAspectFill; // 完整充满这里不做演示。就是三个枚举只,分别用来设置不同的展示方式
5. UIImageView设置圆角的方式
第一种方法:通过设置layer的属性
最简单的一种,但是很影响性能,一般在正常的开发中使用很少.
//设置圆角 imgview.layer.cornerRadius = imgview.frame.size.width / 2; //将多余的部分切掉 imgview.layer.masksToBounds = YES;
效果:
第二种方法:使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角
//开始对imageView进行画图 UIGraphicsBeginImageContextWithOptions(imgview.bounds.size, NO, 1.0); //使用贝塞尔曲线画出一个圆形图 [[UIBezierPath bezierPathWithRoundedRect:imgview.bounds cornerRadius:imgview.frame.size.width] addClip]; [imgview drawRect:imgview.bounds]; imgview.image = UIGraphicsGetImageFromCurrentImageContext(); //结束画图 UIGraphicsEndImageContext();
第三种方法:使用CAShapeLayer和UIBezierPath设置圆角
首先需要导入<AVFoundation/AVFoundation.h>
UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imgview.bounds byRoundingCorners:UIRectCornerAllCorners cornerRadii:imgview.bounds.size]; CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init]; //设置大小 maskLayer.frame = imgview.bounds; //设置图形样子 maskLayer.path = maskPath.CGPath; imgview.layer.mask = maskLayer;
效果图:
这三种方法中第三种最好,对内存的消耗最少,而且渲染快速