IOS 学习笔记 UIImageView
目录
2.1、使用图片自身的宽高,自动填充整个屏幕,不会拉伸或者压缩,图片显示会超出屏幕
3.1 UIViewContentModeScaleToFill
3.2 UIViewContentModeScaleAspectFit
3.3 UIViewContentModeScaleAspectFill
3.11 UIViewContentModeTopRight
3.12 UIViewContentModeBottomLeft
3.13 UIViewContentModeBottomRight
UIImageView
UIImageView视图用来展示图片,熟悉其属性有助于展示处不同的效果
1 UIImageView的创建
在熟悉UIImageView的重要属性之前我们需要知道怎么在布局上创建出来UIImageView,一共有三种方式,如果不知道怎么创建可以参考这篇文章《IOS 学习笔记 UIView》
1.1 代码布局创建UIImageView
这里采用代码创建,在viewDidLoad函数中通过:
(1)初始化UIImageView的实例
UIImageView *imageView = [[UIImageView alloc]init];
(2)通过imageNamed函数给创建的UIImageView实例设置图片
imageView.image = [UIImage imageNamed:@"girl"];
(3)使用UIImageView的frame属性设置UIImageView实例的宽高
imageView.frame = CGRectMake(0,0,imageView.image.size.width,imageView.image.size.height);
imageView.image.size.width 获取图片自身的宽度
imageView.image.size.width起作用需要提前设置图片,也就是imageView.image = [UIImage imageNamed:@"girl"]需要在其之前,因为这里取用的是图片的原始宽高数据
(4)将创建的UIImageView视图添加到根容器中
[self.view addSubview:imageView];
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc]init];
//imageView.image.size.width起作用需要提前设置图片
imageView.image = [UIImage imageNamed:@"girl"];
//imageView.image.size.width 获取图片自身的宽度
imageView.frame = CGRectMake(0,0,imageView.image.size.width,imageView.image.size.height);
[self.view addSubview:imageView];
}
1.2 UIImageView图片设置
给UIImageView视图设置图片需要调用UIImage的imageNamed函数如下
imageView.image = [UIImage imageNamed:@"girl"]
girl.png这张图片需要先准备好,我们将这张图片直接拖拉进Assets.xcassets,imageNamed就能通过girl字符串找到这张图片了,当然并不一定要在Assets.xcassets中准备图片,别的目录也行,Assets.xcassets是在工程创建后默认生成的的图片资源文件夹,这里就直接使用了。
如下图
2、 UIImageView重要属性
2.1、使用图片自身的宽高,自动填充整个屏幕,不会拉伸或者压缩,图片显示会超出屏幕
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc]init];
//imageView.image.size.width起作用需要提前设置图片
imageView.image = [UIImage imageNamed:@"girl"];
//imageView.image.size.width 获取图片自身的宽度
imageView.frame = CGRectMake(0,0,imageView.image.size.width,imageView.image.size.height);
[self.view addSubview:imageView];
}
这里采用代码写布局,因为是比较简单的布局
2.2 添加一个空白的UIImageView
width:300,height:200 如下图
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc]init];
imageView.frame = CGRectMake(0,0,300,200);//设置控件位置和宽高
imageView.backgroundColor = [UIColor orangeColor];//设置控件背景颜色
[self.view addSubview:imageView];
}
2.3、根据控件尺寸显示图片,不做处理
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc]init];
//imageView.image.size.width起作用需要提前设置图片
imageView.image = [UIImage imageNamed:@"girl"];
imageView.backgroundColor = [UIColor orangeColor];//设置控件背景颜色
imageView.frame = CGRectMake(0,0,300,200);//设置控件位置和宽高
[self.view addSubview:imageView];
}
在不做任何处理的情况下,如果图片非全屏幕设置,图片会全部展示,但是会被压缩变形,如何处理才能达到想要的效果需要配置UIImageView的contentMode和clipsToBounds属性。
3、设置图片显示的模式
imageView.contentMode = UIViewContentModeScaleToFill
可以设置图片显示模式,以达到处理图片的目的,适应裁剪和拉伸问题,一共有十三中模式可供选择。
typedef NS_ENUM(NSInteger, UIViewContentMode) {
UIViewContentModeScaleToFill,
UIViewContentModeScaleAspectFit, // contents scaled to fit with fixed aspect. remainder is transparent
UIViewContentModeScaleAspectFill, // contents scaled to fill with fixed aspect. some portion of content may be clipped.
UIViewContentModeRedraw, // redraw on bounds change (calls -setNeedsDisplay)
UIViewContentModeCenter, // contents remain same size. positioned adjusted.
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
};
注意结合:imageView.clipsToBounds = YES;来使用,否则达不到效果
3.1 UIViewContentModeScaleToFill
- (void)viewDidLoad {
[super viewDidLoad];
UIImageView *imageView = [[UIImageView alloc]init];
//imageView.image.size.width起作用需要提前设置图片
imageView.image = [UIImage imageNamed:@"girl"];
imageView.backgroundColor = [UIColor orangeColor];//设置控件背景颜色
imageView.frame = CGRectMake(0,0,300,200);//设置控件位置和宽高
imageView.clipsToBounds = YES;
// imageView.contentMode = UIViewContentModeScaleToFill;
// imageView.contentMode = UIViewContentModeScaleAspectFit;
imageView.contentMode = UIViewContentModeScaleAspectFill;
[self.view addSubview:imageView];
}
imageView.contentMode = UIViewContentModeScaleToFill
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.2 UIViewContentModeScaleAspectFit
imageView.contentMode = UIViewContentModeScaleAspectFit
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.3 UIViewContentModeScaleAspectFill
imageView.contentMode = UIViewContentModeScaleAspectFill
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.4 UIViewContentModeRedraw
imageView.contentMode = UIViewContentModeRedraw
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.5 UIViewContentModeCenter
imageView.contentMode = UIViewContentModeCenter
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.6 UIViewContentModeTop
imageView.contentMode = UIViewContentModeTop
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.7 UIViewContentModeBottom
imageView.contentMode = UIViewContentModeBottom
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.8 UIViewContentModeLeft
imageView.contentMode = UIViewContentModeLeft
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.9 UIViewContentModeRight
imageView.contentMode = UIViewContentModeRight
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.10 UIViewContentModeTopLeft
imageView.contentMode = UIViewContentModeTopLeft
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.11 UIViewContentModeTopRight
imageView.contentMode = UIViewContentModeTopRight
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.12 UIViewContentModeBottomLeft
imageView.contentMode = UIViewContentModeBottomLeft
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO
3.13 UIViewContentModeBottomRight
imageView.contentMode = UIViewContentModeBottomRight
左图 : imageView.clipsToBounds = YES;右图 : imageView.clipsToBounds = NO