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

图像控件 (UIImageView)

2016-01-07 09:56 483 查看


图像控件 (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;

[objc] view plaincopy

//设置大图片可以相应手势点击

self.bigPicture.userInteractionEnabled = YES;

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

[objc] view plaincopy

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

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

[objc] view plaincopy

[self.bigPicture addGestureRecognizer:tap];

-- 设置 UIImageView 图片 :

[objc] view plaincopy

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

-- 设置透明度 :

[objc] view plaincopy

self.bigPicture.alpha = alpha;

-- 获取手指触摸位置 :

[objc] view plaincopy

//获取手指触摸的位置

CGPoint point = [recognizer locationInView:self.bigPicture];

-- 获取图片对应的 CGImageRef :

[objc] view plaincopy

//获取原图对应的 CGImageRef

CGImageRef imageRef = [srcImage CGImage];

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

[objc] view plaincopy

//创建新的图片

CGImageRef newImageRef = CGImageCreateWithImageInRect(imageRef, CGRectMake(x, y, 140, 140));

-- 根据 CGImageRef 创建 UIImage :

[objc] view plaincopy

[UIImage imageWithCGImage:newImageRef];

(2) 代码示例

代码示例 :

-- 界面设计文件 :



-- OCViewController.h :

[objc] view plaincopy

//

// 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 :

[objc] view plaincopy

//

// 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 :

[objc] view plaincopy

images = [NSArray arrayWithObjects:

[UIImage imageNamed:@"1.png"],

[UIImage imageNamed:@"2.jpg"],

[UIImage imageNamed:@"3.png"],

nil nil];

self.imageView.animationImages = images;

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

[objc] view plaincopy

//设置 UIImageView 动画间隔

self.imageView.animationDuration = 5;

//设置动画重复次数

self.imageView.animationRepeatCount = 0xFFFF;

-- 启动动画 :

[objc] view plaincopy

//启动动画

[self.imageView startAnimating];

(2) 代码示例

代码示例 :

-- 界面设计文件 :



-- OCViewController.h :

[objc] view plaincopy

//

// 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

-- 界面展示 :

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