IOS开发-懒加载\延迟加载-图片浏览器实例

一. 概述

主要介绍IOS开发中的懒加载，以后在实例中应用这种懒加载方式。实例是一个使用UIIma geView、UILabel、UIButton三个控件实现的图 片浏览器。

 

二. 属性的懒加载

1）何为懒加载：

懒加载也称为懒汉模式或延迟加载，这种方式是指让程序推迟访问数据，只有用到数据时才会建立并加载数据。

2）懒加载的好处：

这样作能够保证没必要在程序启动时就加载数据，由于有时候有些数据不是须要用的，只是在某些操做下才会使用数据，而每次访问数据都是比较耗时且占用必定的内存，使用懒加载就能够避免这中状况的发生。

如何实现懒加载：

通常的作法是重写某个属性的get方法，在get方法中判空即判断数据是否已经加载若是没有加载则建立数据并初始化不然直接返回数据。具体的作法见下文实例。

三. 懒加载使用实例图片浏览器

界面如图：

                                 

》》》 功能描述：

1. 点击左右箭头切换图片、图片描述、图片序号；

2.第一张图片时左箭头不能点击

3.最后一张图片时右箭头不能点击

4.点击设置按钮出现一个可设置的界面（上图中黄色背景的部分）能够设置模式和对图片的缩放

》》》 实现思路：

1. 搭建UI界面，因为只须要显现图片不须要处理点击事件故使用UIImageView控件来显示图片。

2. 监听个按钮的点击，本程序共有前、后、设置、模式选择开关、图片缩放等点击事件因此添加事件的处理方法

3. 前、后按钮的处理：因为点击这两个按钮要同时改变图片的内容、描述及序号，而内容、描述这两种数据咱们可当作一个组合，存放入字典中，最后将每一个组合存入数组而序号做为他们的索引，把初始的索引置为0，点击▶️时索引加1，反之索引减一；

4. 模式选择处理：一般夜间模式会使屏幕变暗，再此只需将控制器的View背景颜色置为黑色

5.图片的缩放处理，只需改变UIImageView的形变属性便可

6. 对全部的图片处理使用懒加载的方式。

》》》 实现代码以下：

分为几个部分：

1.数据初始化：使用懒加载的方式，将全部的图片数据存入数组，使控制器拥有数组这个属性，并重写其get方法,在get方法中建立并加载数据

1）控制器属性及方法，

 1 #import "ViewController.h"
 2 
 3 //用于查找字典防止拼写错误
 4 #define HGImgKey @"name"
 5 #define HGImgDes @"desc"
 6 
 7 @interface ViewController ()
 8 /** 图片序号 */
 9 @property (weak, nonatomic) IBOutlet UILabel *iconNum;
10 /** 图片描述 */
11 @property (weak, nonatomic) IBOutlet UILabel *iconDesc;
12 /** 图片数据 */
13 @property (weak, nonatomic) IBOutlet UIImageView *iconView;
14 /** 上一张图片按钮 用于设置enable状态 */
15 @property (weak, nonatomic) IBOutlet UIButton *prevBtn;
16 /** 下一张图片按钮 用于设置enable状态 */
17 @property (weak, nonatomic) IBOutlet UIButton *nextBtn;
18 /** 设置按钮 弹出的设置框 */
19 @property (weak, nonatomic) IBOutlet UIView *setView;
20 
21 /** 记录当前图片索引即序号 */
22 @property (nonatomic,assign) int iconIndex;
23 
24 /** 图片数据结合 让控制器拥有数据并使用懒加载方式加载数据 */
25 @property (nonatomic,strong)NSArray* imageData;
26 /** 设置按钮监听事件 */
27 - (IBAction)setting:(UIButton *)sender;
28 /** 缩放监听事件 */
29 - (IBAction)changeSize:(UISlider *)sender;
30 /** 模式选择开关监听事件 */
31 - (IBAction)changeMode:(UISwitch *)sender;
32 
33 /** previous 按钮监听事件 */
34 - (IBAction)previous:(UIButton *)sender;
35 /** next 按钮监听事件 */
36 - (IBAction)next:(UIButton *)sender;
37 
38 @end

View Code

2）懒加载的方式建立并初始化数据

 1 /**
 2  *    懒加载的实现方式，重写get方法，用到时才建立并初始化数据
 3  *
 4  *    @return _imageData 完成初始化的数据
 5  */
 6 - (NSArray *)imageData1
 7 {
 8     // 判空只需在第一次使用时加载
 9     if(_imageData == nil)
10     {
11         //建立字典
12         // 先来一个空的
13         NSMutableDictionary *img1 = [NSMutableDictionary dictionary];
14         // 以后使用添加的方法添加key和val
15         img1[HGImgKey] = @"iq";
16         img1[HGImgDes] = @"你是在挑战小偷的智商吗";
17         
18         // 先来一个空的
19         NSMutableDictionary *img2 = [NSMutableDictionary dictionary];
20         // 以后使用添加的方法添加key和val
21         img2[HGImgKey] = @"caifang";
22         img2[HGImgDes] = @"哪家电视台这么坑爹";
23         
24         // 先来一个空的
25         NSMutableDictionary *img3 = [NSMutableDictionary dictionary];
26         // 以后使用添加的方法添加key和val
27         img3[HGImgKey] = @"niupai";
28         img3[HGImgDes] = @"吃个牛排堪比杀牛";
29         
30         // 先来一个空的
31         NSMutableDictionary *img4 = [NSMutableDictionary dictionary];
32         // 以后使用添加的方法添加key和val
33         img4[HGImgKey] = @"biaoqingdi";
34         img4[HGImgDes] = @"在他面前，什么表情都弱爆了";
35         
36         // 先来一个空的
37         NSMutableDictionary *img5 = [NSMutableDictionary dictionary];
38         // 以后使用添加的方法添加key和val
39         img5[HGImgKey] = @"can";
40         img5[HGImgDes] = @"一个字惨！";
41         
42         // 先来一个空的
43         NSMutableDictionary *img6 = [NSMutableDictionary dictionary];
44         // 以后使用添加的方法添加key和val
45         img6[HGImgKey] = @"sb";
46         img6[HGImgDes] = @"非要跟本身过不去";
47         
48         /* 将字典加入数组 */
49         // 快速建立数组的方法
50         _imageData = @[img1,img2,img3,img4,img5,img6];
51     
52     }
53     return _imageData;
54 }

View Code

2.前、后按钮的监听事件：因为两个按钮均须要改变显示数据，故将公共的代码部分提出到changeData方法中，只在各自的处理中操做index便可

 1 - (IBAction)previous:(UIButton *)sender
 2 {
 3     // 序号减一
 4     _iconIndex--;
 5     // 改变显示的数据并设置按钮状态
 6     [self changeData];
 7 }
 8 
 9 - (IBAction)next:(UIButton *)sender
10 {
11     // 序号加1
12     _iconIndex++;
13     [self changeData];
14 }

View Code

changeData方法实现：

 1 - (void)changeData
 2 {
 3     // 从字典中取出当前索引对应的数据
 4     NSDictionary *dict = self.imageData[self.iconIndex];
 5     
 6     /* 设置序号 */
 7     NSString *num = [NSString stringWithFormat:@"%d/%d",_iconIndex + 1,(int)self.imageData.count];
 8     _iconNum.text = num;
 9     
10     /* 设置数据 */
11     _iconView.image = [UIImage imageNamed:dict[HGImgKey]];
12     
13     /* 设置描述 */
14     _iconDesc.text = dict[HGImgDes];
15     
16     // 设置按钮状态
17     _prevBtn.enabled = _iconIndex > 0;
18     // 不可写死
19     //_nextBtn.enabled = _iconIndex < 5;
20     _nextBtn.enabled = _iconIndex < self.imageData.count -1;
21 }

View Code

3.设置按钮的监听事件

 1 - (IBAction)setting:(UIButton *)sender {
 2     
 3     NSLog(@"seting");
 4     
 5     // 添加动画
 6     [UIView animateWithDuration:1.0 animations:^{
 7         CGRect fram =  _setView.frame;
 8         if (fram.origin.y == self.view.frame.size.height)
 9         {
10             fram.origin.y -= _setView.bounds.size.height;
11         }
12         else
13         {
14             fram.origin.y += _setView.bounds.size.height;
15         }
16         _setView.frame = fram;
17     }];
18 }

View Code

4.图片的缩放：缩放使用的是UISlider控件值设为0-1默认为最大,只能比初始状态小。

1 - (IBAction)changeSize:(UISlider *)sender {
2     
3      NSLog(@"changeSize");
4     // 缩放图片
5     // 获取当前的value
6     CGFloat value  = sender.value;
7     //改变图片的transform属性
8      _iconView.transform = CGAffineTransformMakeScale(value, value);
9 }

View Code 

补充：

1. UIlabel控件显示文字的换行，默认状况下UILabel只能显示一行若是文字过多会以“...”代替，为了不这种状况在main.storybord中以下设置：

将lines属性设置为0；对应的代码为numberOfLines属性

1 @property(nonatomic) NSInteger numberOfLines;

1. UIlabel控件显示文字默认是左对齐，要想设置的居中，在storybord中的设置见上图中alignment选项，对应的代码为：

@property(nonatomic)        NSTextAlignment    textAlignment;   // default is NSTextAlignmentLeft

可设置为以下三个值：

 NSTextAlignmentLeft      = 0,    // 左对齐
 NSTextAlignmentCenter    = 1,    // 居中
 NSTextAlignmentRight     = 2,    // 右对齐