ios实战开发之图片展示

Sian

1、直接效果展示：



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

1. //
2. //  SAViewController.h
3. //  ImageShow
4. //
5. //  Created by yusian on 14-3-27.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import <UIKit/UIKit.h>
11. @interface SAViewController : UIViewController
13. // ImageViewr控件，中间最大的区域，用来显示图片内容
14. @property (weak, nonatomic) IBOutlet UIImageView *image;
16. // UILabel控件--显示当前图片张数，以n/m形式展示，如1/16，显示在图片顶端
17. @property (weak, nonatomic) IBOutlet UILabel *number;
19. // UILabel控件，图片下方用作图片内容说明
20. @property (weak, nonatomic) IBOutlet UILabel *imageDesc;
22. // UIView控件，这是一个子视图，当点击“设置”按钮时弹出的设置面板
23. @property (weak, nonatomic) IBOutlet UIView *setBoard;
25. // UISlider控件，滑动条控件，从最左端滑到最右端，可以将图片分别从第一张切换到最后一张
26. - (IBAction)imageSwitch:(UISlider *)sender;
28. // UIButton控件，设置按钮，点击该按钮可以弹出设置面板或隐藏设置面板
29. - (IBAction)setting:(UIButton *)sender;
31. // UISwitch控件，设置面板中的其中一个功能：“夜间模式”，这是一个开关，打开后将背景调暗，模拟夜间浏览模式，保护眼睛
32. - (IBAction)nightMode:(UISwitch *)sender;
34. // UISlider控件，设置面板中的另一个功能，这个滑动条控件用来控件图片展示大小，让图片从30% - 100%进行缩放
35. - (IBAction)imageSizeChange:(UISlider *)sender;
37. @end

复制代码

SAViewController.m

1. //
2. //  SAViewController.m
3. //  ImageShow
4. //
5. //  Created by yusian on 14-3-27.
6. //  Copyright (c) 2014年 yusian. All rights reserved.
7. //
9. #import "SAViewController.h"
11. @interface SAViewController ()
12. {
13.     // 创建一个全局数组变量用来存放图片描述文字
14.     NSArray *_imageDescValues;
15. }
17. @end
19. @implementation SAViewController
21. // 动画方法，实现各种切换的渐变效果，传入两个参数，一个为实际业务代码block，一个为动画时长
22. - (void)actionAnimationBlock:(void (^)())block animationDourationTime:(double)time
23. {
24.     // 动画开始
25.     [UIView beginAnimations:nil context:nil];
26.    
27.     // 动画时长，此句可省略，有默认值，为实现不同切换场景有各自的时长加上这句
28.     [UIView setAnimationDuration:time];
29.    
30.     // 业务代码块
31.     block();
32.    
33.     // 动画提交
34.     [UIView commitAnimations];
35. }
37. // 初始加载值
38. - (void)viewDidLoad
39. {
40.     // 调用父类初始加载值，加载系统正常运行必需数据
41.     [super viewDidLoad];
42.         
43.     // 创建一个bundle，并调用bundel的pathForResource方法为在任何环境中都能正确返回plist文件的绝对路径
44.     NSBundle *bundle = [NSBundle mainBundle];
45.     NSString *path = [bundle pathForResource:@"descPlist" ofType:@"plist"];
46.    
47.     // 使用数组方法从文件中加载所有图片的文件说明到数组中
48.     _imageDescValues = [[NSArray alloc] initWithContentsOfFile:path];
49.    
50.     // 利用数组长度正确初始化图片张数并在UILable中显示
51.     self.number.text = [NSString stringWithFormat:@"1/%.d",_imageDescValues.count];
52.    
53.     // 取得数组中第一个成员赋值给第一张图片的文字描述，初始化界面内容
54.     self.imageDesc.text = _imageDescValues[0];
55.    
56. }
58. // 图片切换滑动条控件动作实现
59. - (IBAction)imageSwitch:(UISlider *)sender {
60.    
61.     /*******方法说明******
62.      
63.      1、图片序号Label(1/16 - 16/16)、图片文件名(001.png - 016.png)、图片描述(_imageDescValues[0]-[15])、sender.value的取值(1-16)都存在一定关系;
64.      2、涉及到两种数据类型(double与int)，所以先通过强制转换将类型统一，这里将double转成int型;
65.      3、数据关系：图片序号 = 文件名序号 = 数组序号+1;
66.      4、由于滑动控件是事件触发者，所以以sender.value为基准，定义一个用来统一数据的临时变量int tempNo;
67.      5、sender.value = 1(1.0000~1.9999) 则图片序号为 1/16, 图片名称为 001.png, 图片描述为数组取值[1 - 1];
68.      
69.      *******************/
70.    
71.     int tempNo = (int)sender.value;
72.    
73.     self.number.text  = [NSString stringWithFormat:@"%d/%.f",tempNo, sender.maximumValue];
74.    
75.     self.image.image = [UIImage imageNamed:[NSString stringWithFormat:@"%03d.png", tempNo]];
76.    
77.     self.imageDesc.text = _imageDescValues[tempNo - 1];
78.    
79. }
81. // 设置按钮UIButton控件触发事件
82. - (IBAction)setting:(UIButton *)sender {
83.    
84.     // 调用动画效果
85.     [self actionAnimationBlock:^{
86.         
87.         // 业务代码
88.         // 当用户点击设置按钮时设置面板View位置值发生变化，先取出设置面板的center值，数据类型为CGPoint;
89.         CGPoint tempPoint = self.setBoard.center;
90.         
91.         // 1、第一次点击设置按钮，设置面板从之间的屏幕下方外界移动到屏幕能见区域范围内，即上升100像素
92.         if (self.view.frame.size.height == self.setBoard.frame.origin.y) {
93.             
94.             tempPoint.y -= 100;
95.             
96.             /*************ios6.0版本屏幕尺寸问题****************
97.             
98.              } else if (480 == self.setBoard.frame.origin.y) {
99.             
100.              tempPoint.y -= 120;
101.             
102.              } else if (360 == self.setBoard.frame.origin.y){
103.             
104.              tempPoint.y += 120;
105.             
106.              ***********************End***********************/
107.         
108.         // 否则(即已显示在屏幕可见区域)下降100个像素移出屏幕显示区域
109.         } else {
110.             
111.             tempPoint.y += 100;
112.             
113.         }
114.         
115.         // 修改完毕后再赋值给设置面板的center，实现值修改，不能单独修改center中的单个值，只能整体修改：
116.         self.setBoard.center = tempPoint;
117.    
118.     // 动画时长0.3秒，传值给actionAnimationBlock: animationDourationTime:
119.     } animationDourationTime:0.3];
120.    
121. }
123. // 夜间模式开关
124. - (IBAction)nightMode:(UISwitch *)sender {
125.    
126.     // 动画代码，为了使夜间模式能平滑切换
127.     [self actionAnimationBlock:^{
128.         
129.         // 开关有个on属性，BOOL类型，开与表示两个状态，通过这两个状态来区分夜间模式与正常模式
130.         if (sender.on) {
131.             
132.             // 开关打开切换到夜间模式，即两个UIView的背景色设置为灰色;
133.             self.view.backgroundColor = [UIColor grayColor];
134.             
135.             self.setBoard.backgroundColor = [UIColor grayColor];
136.             
137.         } else {
138.             
139.             // 开关另外一个状态，将背景色还原
140.             self.view.backgroundColor = [UIColor whiteColor];
141.             
142.             // 由于设置面板之间的颜色是storyboard调的色，非系统结构体内的颜色，所以要还原这里通过RGB值还原，原RGB值可通过打印self.setBoard.backgroundColor结果获得;
143.             self.setBoard.backgroundColor = [UIColor colorWithRed:0.8 green:0.88 blue:0.84 alpha:1];
144.             
145.         }
146.    
147.     // 日夜模式渐变时长1秒，效果较好;
148.     } animationDourationTime:1];
149.         
150. }
152. // 设置面板中的UISlider控件：图片大小改变
153. - (IBAction)imageSizeChange:(UISlider *)sender {
154.    
155.     /*********修改image.frame实现************
156.      
157.      CGRect rectSize = self.image.frame;
158.      
159.      rectSize.size.width = 320 * sender.value;
160.      
161.      rectSize.size.height = 312 * sender.value;
162.      
163.      rectSize.origin.x = 0 + ((1 - sender.value) * 312) / 2;
164.      
165.      rectSize.origin.y = 61 + ((1 - sender.value) * 320) / 2;
166.      
167.      self.image.frame = rectSize;
168.      
169.      ***************************************/
170.    
171.     // 直接使用transform属性一句代码搞定
172.     self.image.transform = CGAffineTransformMakeScale(sender.value, sender.value);
173.    
174. }
176. @end

复制代码

相关链接：ios实战开发之按钮控件

源代码下载：

游客，本帖隐藏的内容需要积分高于 1 才可浏览，您当前积分为 0

特别感谢李明杰老师的无私奉献！