ios实战开发之图片展示
本帖最后由 Sian 于 2014-3-27 04:02 编辑1、直接效果展示：
http://player.youku.com/player.php/sid/XNjkwNTcyMjE2/v.swf
2、基本需求分析：
1、该练习是模拟类似"笑多了会怀孕"这样的图片浏览软件而设计，图片素材来自“笑多了会怀孕”，在此声明并表示感谢；
2、主要为实现几个功能：UISlider控件的使用、UIImageView的使用、plist文件的使用、子View的使用以及图片大小修改等；
3、基本过程描述
1、通过storyboard将面板基本组件布置好，并设置好相关参数，效果如下图所示：
2、一共涉及到两个UIView，两个UISlider，四个UILabel，一个UIImageView，一个UIButton，还有一个UISwitch
3、包含关系为：
UIView{
UIView{
UILabel
UISwitch
UILabel
UISlder
}
UIButton
UILabel
UIImageView
UILabel
UISlider
}
4、将storyboard上相关属性与方法都连好线，保证属性及方法前面都是实心点，并且控件上没有多余的连接线：
4、实现相关功能
主要代码及说明
SAViewController.h
//
//SAViewController.h
//ImageShow
//
//Created by yusian on 14-3-27.
//Copyright (c) 2014年 yusian. All rights reserved.
//
#import <UIKit/UIKit.h>
@interface SAViewController : UIViewController
// ImageViewr控件，中间最大的区域，用来显示图片内容
@property (weak, nonatomic) IBOutlet UIImageView *image;
// UILabel控件--显示当前图片张数，以n/m形式展示，如1/16，显示在图片顶端
@property (weak, nonatomic) IBOutlet UILabel *number;
// UILabel控件，图片下方用作图片内容说明
@property (weak, nonatomic) IBOutlet UILabel *imageDesc;
// UIView控件，这是一个子视图，当点击“设置”按钮时弹出的设置面板
@property (weak, nonatomic) IBOutlet UIView *setBoard;
// UISlider控件，滑动条控件，从最左端滑到最右端，可以将图片分别从第一张切换到最后一张
- (IBAction)imageSwitch:(UISlider *)sender;
// UIButton控件，设置按钮，点击该按钮可以弹出设置面板或隐藏设置面板
- (IBAction)setting:(UIButton *)sender;
// UISwitch控件，设置面板中的其中一个功能：“夜间模式”，这是一个开关，打开后将背景调暗，模拟夜间浏览模式，保护眼睛
- (IBAction)nightMode:(UISwitch *)sender;
// UISlider控件，设置面板中的另一个功能，这个滑动条控件用来控件图片展示大小，让图片从30% - 100%进行缩放
- (IBAction)imageSizeChange:(UISlider *)sender;
@end
SAViewController.m
//
//SAViewController.m
//ImageShow
//
//Created by yusian on 14-3-27.
//Copyright (c) 2014年 yusian. All rights reserved.
//
#import "SAViewController.h"
@interface SAViewController ()
{
// 创建一个全局数组变量用来存放图片描述文字
NSArray *_imageDescValues;
}
@end
@implementation SAViewController
// 动画方法，实现各种切换的渐变效果，传入两个参数，一个为实际业务代码block，一个为动画时长
- (void)actionAnimationBlock:(void (^)())block animationDourationTime:(double)time
{
// 动画开始
;
// 动画时长，此句可省略，有默认值，为实现不同切换场景有各自的时长加上这句
;
// 业务代码块
block();
// 动画提交
;
}
// 初始加载值
- (void)viewDidLoad
{
// 调用父类初始加载值，加载系统正常运行必需数据
;
// 创建一个bundle，并调用bundel的pathForResource方法为在任何环境中都能正确返回plist文件的绝对路径
NSBundle *bundle = ;
NSString *path = ;
// 使用数组方法从文件中加载所有图片的文件说明到数组中
_imageDescValues = [ initWithContentsOfFile:path];
// 利用数组长度正确初始化图片张数并在UILable中显示
self.number.text = ;
// 取得数组中第一个成员赋值给第一张图片的文字描述，初始化界面内容
self.imageDesc.text = _imageDescValues;
}
// 图片切换滑动条控件动作实现
- (IBAction)imageSwitch:(UISlider *)sender {
/*******方法说明******
1、图片序号Label(1/16 - 16/16)、图片文件名(001.png - 016.png)、图片描述(_imageDescValues-)、sender.value的取值(1-16)都存在一定关系;
2、涉及到两种数据类型(double与int)，所以先通过强制转换将类型统一，这里将double转成int型;
3、数据关系：图片序号 = 文件名序号 = 数组序号+1;
4、由于滑动控件是事件触发者，所以以sender.value为基准，定义一个用来统一数据的临时变量int tempNo;
5、sender.value = 1(1.0000~1.9999) 则图片序号为 1/16, 图片名称为 001.png, 图片描述为数组取值;
*******************/
int tempNo = (int)sender.value;
self.number.text= ;
self.image.image = ];
self.imageDesc.text = _imageDescValues;
}
// 设置按钮UIButton控件触发事件
- (IBAction)setting:(UIButton *)sender {
// 调用动画效果
[self actionAnimationBlock:^{
// 业务代码
// 当用户点击设置按钮时设置面板View位置值发生变化，先取出设置面板的center值，数据类型为CGPoint;
CGPoint tempPoint = self.setBoard.center;
// 1、第一次点击设置按钮，设置面板从之间的屏幕下方外界移动到屏幕能见区域范围内，即上升100像素
if (self.view.frame.size.height == self.setBoard.frame.origin.y) {
tempPoint.y -= 100;
/*************ios6.0版本屏幕尺寸问题****************
} else if (480 == self.setBoard.frame.origin.y) {
tempPoint.y -= 120;
} else if (360 == self.setBoard.frame.origin.y){
tempPoint.y += 120;
***********************End***********************/
// 否则(即已显示在屏幕可见区域)下降100个像素移出屏幕显示区域
} else {
tempPoint.y += 100;
}
// 修改完毕后再赋值给设置面板的center，实现值修改，不能单独修改center中的单个值，只能整体修改：
self.setBoard.center = tempPoint;
// 动画时长0.3秒，传值给actionAnimationBlock: animationDourationTime:
} animationDourationTime:0.3];
}
// 夜间模式开关
- (IBAction)nightMode:(UISwitch *)sender {
// 动画代码，为了使夜间模式能平滑切换
[self actionAnimationBlock:^{
// 开关有个on属性，BOOL类型，开与表示两个状态，通过这两个状态来区分夜间模式与正常模式
if (sender.on) {
// 开关打开切换到夜间模式，即两个UIView的背景色设置为灰色;
self.view.backgroundColor = ;
self.setBoard.backgroundColor = ;
} else {
// 开关另外一个状态，将背景色还原
self.view.backgroundColor = ;
// 由于设置面板之间的颜色是storyboard调的色，非系统结构体内的颜色，所以要还原这里通过RGB值还原，原RGB值可通过打印self.setBoard.backgroundColor结果获得;
self.setBoard.backgroundColor = ;
}
// 日夜模式渐变时长1秒，效果较好;
} animationDourationTime:1];
}
// 设置面板中的UISlider控件：图片大小改变
- (IBAction)imageSizeChange:(UISlider *)sender {
/*********修改image.frame实现************
CGRect rectSize = self.image.frame;
rectSize.size.width = 320 * sender.value;
rectSize.size.height = 312 * sender.value;
rectSize.origin.x = 0 + ((1 - sender.value) * 312) / 2;
rectSize.origin.y = 61 + ((1 - sender.value) * 320) / 2;
self.image.frame = rectSize;
***************************************/
// 直接使用transform属性一句代码搞定
self.image.transform = CGAffineTransformMakeScale(sender.value, sender.value);
}
@end
相关链接：ios实战开发之按钮控件
源代码下载：**** Hidden Message *****
特别感谢李明杰老师的无私奉献！
页:
[1]