UIImageView的运用

UIImageView的运用

本节知识点小结：

1. UIImageView-设置图片和内容模式
2. UIImageView-设置imageView的frame
3. UIImageView-资源管理
4. UIImageView-帧动画的基本使用
5. UIImageView-播放音频文件
6. UIImageView-加载无缓存的图片
7. UIImageView-使用总结

---

1. UIImageView-设置图片和内容模式

• 分析一个新闻首页哪些是图片控件

• storyboard创建

  • 找图片 <图标引擎>
  • 把图片放在项目中(以前<Supporting Files> 现在<Images.xcassets>)
  • 两者的区别, 后者带后缀 苹果建议采用后者
  • 设置UIImageView的模式

• 代码创建一般使用步骤：

  1. 使用UIImageView,创建imageView；
  2. 设置UIImageView 创建出来的imageView 的位置、尺寸；
  3. 设置UIImageView 创建出来的imageView 的背景颜色；
  4. 将UIImageView 创建出来的imageView 的加入到控制器view 中；
  5. 设置显示的图片；
  6. 内容模式 contentMode（一般用来控制图片如何显示）
  7. 超出imageView边框的内容是否需要裁剪掉

  • 注意：6. 内容模式

  1. 带Scale:显示的图片可能会被拉伸：
   UIViewContentModeScaleToFill,
  2. 带有scale单词的,并且带有aspect单词的:可能会被拉伸,但是会保持图片原来的宽高比
   UIViewContentModeScaleAspectFit, // 保证刚好能看到图片的全部
   UIViewContentModeScaleAspectFill, // 拉伸至图片的宽度或者高度跟imageView一样
  3. 不带Scale:显示的图片一定不会被拉伸,保持图片原来的宽度和高度
   UIViewContentModeCenter,
   UIViewContentModeTop,
   UIViewContentModeBottom,
   UIViewContentModeLeft,
   UIViewContentModeRight,
   UIViewContentModeTopLeft,
   UIViewContentModeTopRight,
   UIViewContentModeBottomLeft,
   UIViewContentModeBottomRight,

• 例子：

  - (void)test{
  
    // 1. 创建UIImageView,
    UIImageView * imageView = [[UIImageView alloc]init];
    // 2. 设置UIImageView 创建出来的imageView 的位置、尺寸
    imageView.frame = CGRectMake(100, 200, 50, 100);
    // 3. 设置UIImageView 创建出来的imageView 的背景颜色；
    imageView.backgroundColor = [UIColor greenColor];
    // 4. 将UIImageView 创建出来的imageView 的加入到控制器view 中
    [self.view addSubview:imageView];
  
    // 5. 设置显示的图片
    imageView.image = [UIImage imageNamed:@"2"];
    // 6. 内容模式（一般用来控制图片如何显示）
    imageView.contentMode = UIViewContentModeLeft;
    // 7. 超出imageView边框的内容不会被裁剪掉
    imageView.clipsToBounds = NO;
  }

---

2. UIImageView-设置imageView的frame

• initWithImage :
  默认尺寸就是图片的尺寸,位置默认从(0,0)开始

• 修改frame三种方法

  • 方法一：通过获取图片的尺寸信息，并给结构体属性赋值（常见写法）

    // 注意：要先获取到图片才能使用图片的尺寸信息
    imageView.image = [UIImage imageNamed:@"2"];
    imageView.frame = CGRectMake(100, 200, imageView.image.size.width, imageView.image.size.height);

  • 方法二：使用CGRectMake(x, y, width, height),直接给frame 赋值（常见写法）

  imageView.frame = CGRectMake(100, 200, 100, 200);

  • 方法三：定义一个结构体变量，设置该变量的值，在将该结构体变量赋值个frame（神奇三部曲）

  // 注意：OC语法规定，不能直接修改OC 对象结构体属性的成员
  //    imageView.frame.size.width = 200;// Xcode报错
  //    imageView.frame .size.height = 100;// xcod报错
  //    imageView.frame.size = CGSize {200,100};// Xcode报错
  //1. 定义结构体变量,并获取原有的frame 信息
  CGRect tempFrame = imageView.frame;
  //2. 给结构体每个成员赋值
  tempFrame.size.width = 200;
  tempFrame.size.height = 100;
  tempFrame.origin.x = 100;
  tempFrame.origin.y =200;
  //3. 给frame 赋值回去
  imageView.frame = tempFrame;

  • 注意：修改frame的方法三中方式(同样适用于bounds/center)
    

    1.直接使用CGRectMake函数
    2.利用临时结构体变量
    3.直接运用结构体赋值

---

3. UIImageView-资源管理

• 图片放到supporting Files

  • 是否勾选copy

    1. 勾选，将文件拷贝放在项目的文件夹中，文件独立,与源文件不会相互影响
    2. 不勾选，项目文件夹中是没有的,仅仅是引用，与源文件有直接的联系

  • Add to targets

    1. 勾选，把文件资源打包到软件安装包中去
    2. 不勾选，程序打包后,安装包中没有这个资源

  • Added folder

    1. 如果勾选Create groups,会创建一个虚拟的文件夹,程序打包后,安装包中不存在这个文件夹;
    2. 如果勾选Create folder references,真的创建一个文件夹(文件夹颜色不一样),程序打包后,安装包中真的有这个文件夹.

  • 注意事项：

  • 默认无缓存，代码块或者图片文件使用结束时，就会释放图片所占内存
  • 在代码中访问获取图片的时候需要分开写后缀名；

  imageView.image = [UIImage imageNamed:@"2.jpg"];

• 图片放到images.xcassets

  • 默认就是拷贝源文件过来
  • 并最终将所有在image.xcassets中的文件打包成一个文件
  • 同时也打包到软件安装包中
  • 默认就带有缓存，代码块或者图片文件使用结束时，不会释放图片所占内存
  • 图片在代码中访问，不需要写后缀名；

  imageView.image = [UIImage imageNamed:@"2"];

---

4. UIImageView-帧动画的基本使用

• 设置多张图片–演示事例程序<拳皇>

• 帧动画(连续播放图片)
  

  • 站立
    

  设置动画图片—>开始动画–(无限循环)–>设置播放次数–(设置1次,图片消失)–>设置第一张图片

• 大招
  图片被拉伸,设置内容模式(Bottom Left)

• UIImageView的常见属性

  @property(nonatomic,retain) UIImage *image; 
  //显示的图片
  
  @property(nonatomic,copy) NSArray *animationImages; 
  //显示的动画图片
  
  @property(nonatomic) NSTimeInterval animationDuration; 
  //动画图片的持续时间
  
  @property(nonatomic) NSInteger      animationRepeatCount; 
  //动画的播放次数（默认是0，代表无限播放）

• UIImageView的常见方法

  - (void)startAnimating; // 开始动画
  - (void)stopAnimating; // 停止动画
  - (BOOL)isAnimating; // 是否正在执行动画

• 如何抽取重复代码？

  • 将重复的东西写入新方法
  • 先把相同的代码抽到方法中
  • 把要变化的东西换成变量,然后编译,把报错的设置为方法的参数

• 示例：

  
  #pragma mark  - 播放帧动画
  
  - (void )playWithName:(NSString *)name andImageNumber:(int)number{
    // 1. 创建图片
    // 1.1 创建可变数组，存储图片
    NSMutableArray *tempImage = [[NSMutableArray alloc]init];
    // 1.2 通过遍历获取图片
  
    for (int i = 0 ; i < number ; i++) {
        // 1.2.1. 获取图片名称
        NSString * imageName = [NSString stringWithFormat:@"%@_%i", name ,i+1];
        // 1.2.2. 创建对象,并获取图片
        UIImage * image = [UIImage imageNamed:imageName];
        // 1.2.3. 将图片存入数组中
        [tempImage addObject:image];
    }    
    // 2. 设置动画图片（将一个仅存储了该动作所有图片的数组赋值给动画属性）
    self.imageView.animationImages = tempImage;
  
    // 3. 设置动画的次数
    self.imageView.animationRepeatCount = [name isEqualToString:@"stand"] ? 0 : 1;
  
    // 4. 设置动画的时间
    self.imageView.animationDuration = number * 0.05;
  
    // 5. 开启动画
    [self.imageView startAnimating];
  
    // 6. 判断是否是站立的动作，如果不是则动画结束后立即播放站立动画
    if (([@"stand" isEqualToString:name] ? 0 : 1) ){
  //        // 7. 设置(最后)显示的图片
  //        self.imageView.image = [UIImage imageNamed:@"stand_1"];
        // 7.大招动画播放完毕后,播放站立动画
        // self.imageView.animationDuration 时间后执行self的stand的方法
        [self performSelector:@selector(stand) withObject:nil  afterDelay:self.imageView.animationDuration];        
    }
  }

• ---

  5. UIImageView-播放音频文件

  • 导入框架

    
    #import <AVFoundation/AVFoundation.h>
    

  • 播放音频

    // 在类扩展中声明 播放器
    @property (strong ,nonatomic)AVPlayer *player;

    // 8.获取软件安装包对象
    NSBundle *bundle = [NSBundle mainBundle];
    
    // 9.返回软件安装包中某一个资源的路径(这里查找并返回 "dazhao.mp3" 音频文件路径)
    NSURL *url = [bundle URLForResource:@"dazhao" withExtension:@"mp3"];
    
    // 10.创建播放器对象
    self.player = [[AVPlayer alloc]initWithURL:url];
    
    // 11.播放音频（调用对象方法）
    [self.player play];

  ---

  6. UIImageView-加载无缓存的图片

  • 分析内存问题

    • 看Memory(放大招,内存飙升,但是结束后,内存并没有降下来)

  • 原因: imageNamed: 默认缓存图片
    

    • 苹果为什么这么干?
      

    方便下次使用,下次访问图片直接去内存,不需要再读取文件,加快访问速度

• 缓存的优点和缺点

  • 优点:如果资源是经常用的,干脆放在内存中,不需要耗时的读写操作
  • 缺点:缓存是会越积越多的,占用内存

• 示例

  • 有缓存

  // 1.2.2. 创建对象,并从xcassets中获取图片，存储在这里的图片会被压缩打包，无法通过全路径获取，
  // 使用之后存在缓存区中，暂时不被释放，苹果官方推荐这么使用，这样软件的响应相对无缓冲快；
  UIImage * image = [UIImage imageNamed:imageName];

  • 无缓存

  // 获取图片的全路径，这里的图片是放在Supporting Files
  NSString *imagePath = [[NSBundle mainBundle] pathForResource:imageName ofType:@"png"];
  
  // 1.2.2. 创建图片对象，并根图片的全路径获取图片，通过全路径加载获取到的图片在使用之后释放空间，即是无缓存，
  // 每次使用的时候都要重新加载，这样软件的响应相对有缓存慢；该方法一般用于使用次数不多的情况；
  UIImage *image = [UIImage imageWithContentsOfFile:imagePath];

• 注意点

  1. 放在images.xcassets中的图片,只能通过文件名访问,没有全路径
  2. 大批量的图片不要放在images.xcassets中,默认就带有缓存

• ---

  7. UIImageView-使用总结

  • 图片的两种加载方式

    • 有缓存
      
      1. 使用场合：图片比较小、使用频率比较高
      2. 建议：把需要缓存的图片放到Images.xcassets

    UIImage *image =[UIImage imageNamed:@"图片名"];

    • 没有缓存
      
      1. 使用场合：图片比较大，使用频率比较低
      2. 建议：不需要缓存的图片不能放在Images.xcassets中

    NSString *file = [[NSBundle mainBundle] pathForResource:@"图片名" ofType:@"图片扩展名"];
    UIImage *image = [UIImage imageWithContentOfFile:file];    
    //只要方法名带有file的，都是传全路径

    • 注意： 放到Image.xcassets中的图片只能通过图片名去加载，苹果会压缩图片，而且默认带有缓存

  • 延迟做一些事情

    [objc performSelector:@selector(stand:) withObject:@"123" afterDelay:10];
    // 10秒后调用objc的stand：方法，并且传递@“123”参数
    // objc可以是任意对象

  • 音频文件的简单播放

    // 创建一个音频文件的URL(URL就是文件的路径对象)方法一：
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"音频文件名" withExtention:@"音频文件扩展名"];
    //创建一个音频文件的URL(URL就是文件的路径对象)方法二：
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"音频文件名.音频文件扩展名" withExtention:nil];
    // 创建播放器
    self.palyer = [AVPlayer playerWithURL:url];
    [self.player play];

  ---

  补充：

  1. 从安装包中获取某一个资源的路劲

  • 很多资源都是加载项目中的，项目中的资源都是通过mainBundle来获取的

    // 1.创建获取软件安装包对象
    NSBundle *bundle = [NSBundle mainBundle];
    
    // 2.返回软件安装包中某一个资源的路径(这里查找并返回 "dazhao.mp3" 音频文件路径)
    NSURL *url = [bundle URLForResource:@"dazhao.mp3" withExtension:nil];

  ---