您的位置:首页 > 产品设计 > UI/UE

iOS UIImageView 的使用

2016-05-09 16:52 471 查看


二. 创建UIImageView的两种方式

1.自己设置图片位置和尺寸

“`
UIImageView *iv = [[UIImageView alloc] init]; //创建的图片, 没有默认的宽高
iv.backgroundColor = [UIColor redColor];
UIImage *image = [UIImage imageNamed:@”meinv.jpg”];
iv.image = image;

//自己设置图片位置和尺寸
iv.frame =  CGRectMake(100, 100, image.size.width, image.size.height);
[self.view addSubview:iv];
“`

2、使用默认图片尺寸和位置

//默认宽高,为图片宽高,位置为0,0
UIImageView *iv = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"meinv.jpg"]];

//推荐设置iv的frame,以便于设置图片的摆放位置
//iv = CGRectMake(100, 100, image.size.width, image.size.height);

iv.backgroundColor = [UIColor redColor];
[self.view addSubview:iv];
NSLog(@"%@",NSStringFromCGRect(iv.frame));

三. ContentMode属性

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,
};

规律:
但凡取值中包含Scale单词的, 都会对图片进行拉伸(缩放)
但凡取值中没有出现Scale单词的, 都不会对图片进行拉伸
UIViewContentModeScaleToFill,
> 会按照UIImageView的宽高比来拉伸图片
> 直到让整个图片都填充UIImageView为止
> 因为是按照UIImageView的宽高比来拉伸, 所以图片会变形

规律:
但凡取值中包含Aspect单词的, 都会按照图片的宽高比来拉伸
> 因为是按照图片的宽高比来拉伸, 所以图片不会变形
UIViewContentModeScaleAspectFit,
> 会按照图片的宽高比来拉伸
> 要求整张图片都必须在UIImageView的范围内
> 并且宽度和高度其中一个必须和UIImageView一样
> 居中显示

UIViewContentModeScaleAspectFill,
> 会按照图片的宽高比来拉伸
> 要求整张图片必须填充UIImageView
> 并且图片的宽度或者高度其中一个必须和UIImageView一样

四. 剪裁超出部分属性

观察下面运行效果,理解clipsToBounds属性
// 1.创建一个UIImageView
UIImageView *iv = [[UIImageView alloc] init];
// 2.设置相关属性
iv.backgroundColor = [UIColor redColor];
iv.image = [UIImage imageNamed:@"meinv.jpg"];
iv.contentMode = UIViewContentModeLeft;
// 3.设置frame
iv.frame = CGRectMake(100, 100, 200, 200);

// 剪切超出的部分
iv.clipsToBounds = YES;
[self.view addSubview:iv];

五. UIImageView动画

- (IBAction)run:(UIButton *)sender
{
NSMutableArray *arrM = [NSMutableArray array];
// 1.创建多张图片
for (int i = 1; i <= 6; i++) {
NSString *imageNmae = [NSString stringWithFormat:@"run_%i", i];
UIImage *image = [UIImage imageNamed:imageNmae];
// 2.将所有的图片放到数组中
[arrM addObject:image];
}
// 3.将保存了所有图片的数组赋值给UIImageView
self.containerView.animationImages = arrM;

// 设置重复次数,0,代表无线
self.containerView.animationRepeatCount = 1;

//设置一次动画所需时间
self.containerView.animationDuration = 1;

// 开始动画
[self.containerView startAnimating];
}

- (IBAction)stop:(id)sender {

//判断是否正在动画
if([self.containerView isAnimating])
{
//停止动画
[self.containerView stopAnimating];
}

六. UIImageView性能优化问题

问题描述: 如果直接用 UIImage *image = [UIImage imageNamed:imageNmae];加载图片,图片会自动到内存中缓存起来. 这时,当加载多张图片后,假如执行动画,就会导致,内存暴增,而且当动画执行完毕之后,也不会释放。

解决方案:
//使用initWithContentOfFile:方法直接从mainBundle,app根目录中加载图片,
//这样如果遇到上述问题,在执行完动画之后,图片会自动释放..

NSString *imageNmae = [NSString stringWithFormat:@"%@_%i", prefix, i];
imageNmae = [[NSBundle mainBundle] pathForResource:imageNmae ofType:@"png"];
UIImage *image = [[UIImage alloc] initWithContentOfFile:imageName];

代替UIImage *image = [UIImage imageNamed:imageNmae];

七. 图片拉伸

为什么要让图片拉伸?

如果我们要设置背景图片,如按钮,当我们直接实用图片时(有时美工也会给我们一张可拉伸小图片),可能图片会被系统拉伸变形,变得很丑,严重影响美观!

图片拉伸就是为了解决如上问题而存在的,让图片在拉伸时,保证图片不变形
图片拉伸历史过程:

- (void)viewDidLoad {
[super viewDidLoad];

UIButton *btn = [[UIButton alloc]init];
btn.frame = CGRectMake(100, 100, 200, 100);
//旧图片
UIImage *image = [UIImage imageNamed:@"common_button_blue_highlighted"];

//可以指定平铺还是拉伸,得到一张新图片
//指定受保护的区域
<div style="font-family: Arial; font-size: 14px;">UIImageResizingMode参数,用来指定拉伸的模式:</div><blockquote style="font-family: Arial; font-size: 14px;"><div>UIImageResizingModeStret<wbr>ch:拉伸模式,通过拉伸UIEdgeInsets指定的矩形区域来填充图片</wbr></div><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">UIImageResizingModeTile:平铺模式,通过重复显示UIEdgeInsets指定的矩形区域来填充图片</p><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">
</p></blockquote><div style="font-family: Arial; font-size: 14px;">UIEdgeInsets参数用来指定被拉伸的区域</div>
UIEdgeInsets insets = UIEdgeInsetsMake(5, 5, 5, 5);
UIImage *newImage =  [image resizableImageWithCapInsets:insets resizingMode:UIImageResizingModeStretch];

//按钮设置背景
[btn setBackgroundImage:newImage forState:UIControlStateNormal];

[self.view addSubview:btn];

}


内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: