图像控件 (UIImageView)

图像控件 (UIImageView)

1. UIImageView 控件属性

(1) UIImageView 简介

UIImageView 简介 : 

-- 继承结构 : UIImageView 继承 UIView, 该类不能响应用户操作, 是静态控件, (活动控件 静态控件 被动控件);

 

(2) 图片显示属性

 

设置图片显示的属性 : 

-- image (普通) : 访问或设置该控件显示的图片;

-- HighlightedImage (高亮) : 设置图片处于 高亮状态 时显示的图片;

(3) 动画显示方法

 

UIImageView 动画显示方法 : 

-- animationImages : 设置一个 NSArray 对象, 需要显示多张图片;

-- highlightedAnimationImages : 设置 高亮状态 显示的多张图片;

-- animationDuration : 设置 UIImageView 动画持续时间;

-- animationRepeatCount : 设置 UIImageView 动画重复次数;

-- startAnimating : 开始播放动画;

-- stopAnimating : 停止播放动画;

-- isAnimating : 判断 UIImageView 是否正在播放动画;

 

(4) UIImageView 缩放属性

 

UIImageView 缩放属性 : 

     

-- Scale To Fill : 不保持 纵横缩放比, 图片完全自适应 UIImageView 控件;

-- Aspect Fit : 保持纵横比缩放, 保证图片长边完全显示出来, 完整显示图片;

-- Aspect Fill : 保持纵横比缩放, 保证图片短边能显示出来, 只在水平或垂直方向某一个方向是完整的, 另一个方向截取;

-- Center : 不缩放图片, 显示图片的中间区域;

-- Top : 不缩放图片, 显示图片的顶部区域;

-- Bottom : 不缩放图片, 显示图片底部区域;

-- Left : 不缩放图片, 显示图片左边区域;

-- Right : 不缩放图片, 显示图片右边区域;

-- Top Left : 不缩放图片, 显示图片左上区域;

-- Top Right : 不缩放图片, 显示图片右上区域;

-- Bottom Left : 不缩放图片, 显示图片左下区域;

-- Bottom Right : 不缩放图片, 显示图片右下区域;

2. 图片浏览器示例

(1) API 简介

手势事件 : 

-- 设置手势点击响应 : 每个 UIView 都有一个 userInteractionEnabled 属性为 YES;

 

//设置大图片可以相应手势点击
self.bigPicture.userInteractionEnabled = YES;

 

-- 创建手势识别器 : 创建 UITapGestureRecognizer 手势识别器, initWithTarget 表示手势响应方法的类, action 对应方法的 selector 方法;

 

UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(click:)];

-- 为 UIView 添加手势识别器 : 调用 UIView 的 addGestureRecognizer 方法;

 

[self.bigPicture addGestureRecognizer:tap];

-- 设置 UIImageView 图片 : 

 

self.bigPicture.image = [UIImage imageNamed:[images objectAtIndex:currentImage%images.count]];

-- 设置透明度 : 

 

self.bigPicture.alpha = alpha;

-- 获取手指触摸位置 : 

 

//获取手指触摸的位置
CGPoint point = [recognizer locationInView:self.bigPicture];

-- 获取图片对应的 CGImageRef : 

 

//获取原图对应的 CGImageRef
CGImageRef imageRef = [srcImage CGImage];

-- 根据一个图片创建新的 CGImageRef : 

 

//创建新的图片
CGImageRef newImageRef = CGImageCreateWithImageInRect(imageRef, CGRectMake(x, y, 140, 140));

-- 根据 CGImageRef 创建 UIImage : 

 

[UIImage imageWithCGImage:newImageRef];

(2) 代码示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

 

//
//  OCViewController.h
//  UIImageView
//
//  Created by octopus on 15-12-7.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController

//大图片的 UIImageView
@property (strong, nonatomic) IBOutlet UIImageView *bigPicture;
//小图片的 UIImageView
@property (strong, nonatomic) IBOutlet UIImageView *smallPicture;

//UISegmentedControl 的方法
- (IBAction)segmentControl:(id)sender;

@end

 

-- OCViewController.m : 

 

//
//  OCViewController.m
//  UIImageView
//
//  Created by octopus on 15-12-7.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

//图片集合
NSArray * images;
//当前显示的图片
int currentImage;
//透明度
CGFloat alpha;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //初始化变量
    currentImage = 0;
    alpha = 1.0;
    images = [NSArray arrayWithObjects:@"1.png" , @"2.jpg", @"3.png", nil nil];

    //设置大图片可以相应手势点击
    self.bigPicture.userInteractionEnabled = YES;

    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(click:)];

    [self.bigPicture addGestureRecognizer:tap];

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction)segmentControl:(id)sender {
    int index = [sender selectedSegmentIndex];
    switch (index) {
        case 0: //透明度+
            alpha += 0.1;
            if(alpha > 1.0){
                alpha = 1.0;
            }
            self.bigPicture.alpha = alpha;
            break;
        case 1: //透明度-
            NSLog(@"1");
            alpha -= 0.1;
            if(alpha < 0){
                alpha = 0;
            }
            self.bigPicture.alpha = alpha;
            break;
        case 2: //下一张图片
            NSLog(@"2");
            self.bigPicture.image = [UIImage imageNamed:[images objectAtIndex:currentImage%images.count]];
            currentImage ++;
            break;

        default:
            break;
    }
}

- (void) click : (UIGestureRecognizer * ) recognizer{
    //获取正在显示的图片
    UIImage * srcImage = self.bigPicture.image;
    //获取手指触摸的位置
    CGPoint point = [recognizer locationInView:self.bigPicture];
    //获取原图对应的 CGImageRef
    CGImageRef imageRef = [srcImage CGImage];
    //获取缩放比例
    CGFloat scale = srcImage.size.width / 320;
    //获取图片位置
    CGFloat x = point.x * scale;
    CGFloat y = point.y * scale;
    //验证 x y 坐标, 不要超出边界
    if (x + 120 > srcImage.size.width - 140) {
        x = srcImage.size.width - 140;
    }

    if (y + 120 > srcImage.size.height) {
        y = srcImage.size.height - 140;
    }

    //创建新的图片
    CGImageRef newImageRef = CGImageCreateWithImageInRect(imageRef, CGRectMake(x, y, 140, 140));
    self.smallPicture.image = [UIImage imageWithCGImage:newImageRef];

}
@end

 

-- 界面展示 : 

 

3. 幻灯片放映

(1) API 简介

 

幻灯片播放相关 API : 

-- 设置 UIImage 数组给 UIImageView : 

 

images = [NSArray arrayWithObjects:
          [UIImage imageNamed:@"1.png"],
          [UIImage imageNamed:@"2.jpg"],
          [UIImage imageNamed:@"3.png"],
          nil nil];
self.imageView.animationImages = images;

-- 设置动画的间隔 和 次数 : 

 

 

//设置 UIImageView 动画间隔
self.imageView.animationDuration = 5;
//设置动画重复次数
self.imageView.animationRepeatCount = 0xFFFF;

-- 启动动画 : 

 

//启动动画
[self.imageView startAnimating];

(2) 代码示例

代码示例 : 

-- 界面设计文件 : 

-- OCViewController.h : 

 

//
//  OCViewController.h
//  UIimageView2
//
//  Created by octopus on 15-12-9.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface OCViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIImageView *imageView;

@end

 

-- OCViewController.m : 

 [objc] view plaincopy

//
//  OCViewController.m
//  UIimageView2
//
//  Created by octopus on 15-12-9.
//  Copyright (c) 2015年 www.octopus.org.cn. All rights reserved.
//

#import "OCViewController.h"

@interface OCViewController ()

@end

@implementation OCViewController

NSArray * images;

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    //创建 UIImageView 集合
    images = [NSArray arrayWithObjects:
              [UIImage imageNamed:@"1.png"],
              [UIImage imageNamed:@"2.jpg"],
              [UIImage imageNamed:@"3.png"],
              nil nil];
    //设置集合给 UIImageView 的动画
    self.imageView.animationImages = images;
    //设置 UIImageView 动画间隔
    self.imageView.animationDuration = 5;
    //设置动画重复次数
    self.imageView.animationRepeatCount = 0xFFFF;
    //启动动画
    [self.imageView startAnimating];

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

 

-- 界面展示 :