图像控件 (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
-- 界面展示 :
相关文章推荐
- UE4 Socket多线程非阻塞通信【2】
- 分段控件 (UISegmentedControl)
- diskimage-builder的容器镜像
- WeChat demo 麦子学院课程笔记 UI部分
- 初学UEditor
- 事件处理, UIControl的子类
- UIScrollView不能响应touch事件的解决办法
- 详解iOS应用UI开发中的九宫格坐标计算与字典转换模型
- querySelector/querySelectorAll选择器两个容易忽略的点
- Arduino 串口的一些高级用法
- JSP自定义标签rtexprvalue属性用法实例分析
- 如何把UIView转成UIImage,解决模糊失真问题
- return关键词,break和continue
- Android UI组件进阶(2)——仿Windows对话框
- UITableView定义等高的cell
- Android UI组件进阶(1)——带进度条的按钮
- UITableView总结
- MQTT学习笔记——MQTT协议体验 Mosquitto安装和使用
- UIcollection基础
- The Citrix server is unable to process your reques