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

一. 概述

主要介绍IOS开发中的懒加载，之后在实例中应用这种懒加载方式。实例是一个使用UIImageView、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）控制器属性及方法，

#import "ViewController.h"

//用于查找字典防止拼写错误
#define HGImgKey @"name"
#define HGImgDes @"desc"

@interface ViewController ()
/** 图片序号 */
@property (weak, nonatomic) IBOutlet UILabel *iconNum;
/** 图片描述 */
@property (weak, nonatomic) IBOutlet UILabel *iconDesc;
/** 图片数据 */
@property (weak, nonatomic) IBOutlet UIImageView *iconView;
/** 上一张图片按钮 用于设置enable状态 */
@property (weak, nonatomic) IBOutlet UIButton *prevBtn;
/** 下一张图片按钮 用于设置enable状态 */
@property (weak, nonatomic) IBOutlet UIButton *nextBtn;
/** 设置按钮 弹出的设置框 */
@property (weak, nonatomic) IBOutlet UIView *setView;

/** 记录当前图片索引即序号 */
@property (nonatomic,assign) int iconIndex;

/** 图片数据结合 让控制器拥有数据并使用懒加载方式加载数据 */
@property (nonatomic,strong)NSArray* imageData;
/** 设置按钮监听事件 */
- (IBAction)setting:(UIButton *)sender;
/** 缩放监听事件 */
- (IBAction)changeSize:(UISlider *)sender;
/** 模式选择开关监听事件 */
- (IBAction)changeMode:(UISwitch *)sender;

/** previous 按钮监听事件 */
- (IBAction)previous:(UIButton *)sender;
/** next 按钮监听事件 */
- (IBAction)next:(UIButton *)sender;

@end

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

/**
 *    懒加载的实现方式，重写get方法，用到时才创建并初始化数据
 *
 *    @return _imageData 完成初始化的数据
 */
- (NSArray *)imageData1
{
    // 判空只需在第一次使用时加载
    if(_imageData == nil)
    {
        //创建字典
        // 先来一个空的
        NSMutableDictionary *img1 = [NSMutableDictionary dictionary];
        // 之后使用添加的方法添加key和val
        img1[HGImgKey] = @"iq";
        img1[HGImgDes] = @"你是在挑战小偷的智商吗";
        
        // 先来一个空的
        NSMutableDictionary *img2 = [NSMutableDictionary dictionary];
        // 之后使用添加的方法添加key和val
        img2[HGImgKey] = @"caifang";
        img2[HGImgDes] = @"哪家电视台这么坑爹";
        
        // 先来一个空的
        NSMutableDictionary *img3 = [NSMutableDictionary dictionary];
        // 之后使用添加的方法添加key和val
        img3[HGImgKey] = @"niupai";
        img3[HGImgDes] = @"吃个牛排堪比杀牛";
        
        // 先来一个空的
        NSMutableDictionary *img4 = [NSMutableDictionary dictionary];
        // 之后使用添加的方法添加key和val
        img4[HGImgKey] = @"biaoqingdi";
        img4[HGImgDes] = @"在他面前，什么表情都弱爆了";
        
        // 先来一个空的
        NSMutableDictionary *img5 = [NSMutableDictionary dictionary];
        // 之后使用添加的方法添加key和val
        img5[HGImgKey] = @"can";
        img5[HGImgDes] = @"一个字惨！";
        
        // 先来一个空的
        NSMutableDictionary *img6 = [NSMutableDictionary dictionary];
        // 之后使用添加的方法添加key和val
        img6[HGImgKey] = @"sb";
        img6[HGImgDes] = @"非要跟自己过不去";
        
        /* 将字典加入数组 */
        // 快速创建数组的方法
        _imageData = @[img1,img2,img3,img4,img5,img6];
    
    }
    return _imageData;
}

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

- (IBAction)previous:(UIButton *)sender
{
    // 序号减一
    _iconIndex--;
    // 改变显示的数据并设置按钮状态
    [self changeData];
}

- (IBAction)next:(UIButton *)sender
{
    // 序号加1
    _iconIndex++;
    [self changeData];
}

changeData方法实现：

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

3.设置按钮的监听事件

- (IBAction)setting:(UIButton *)sender {
    
    NSLog(@"seting");
    
    // 添加动画
    [UIView animateWithDuration:1.0 animations:^{
        CGRect fram =  _setView.frame;
        if (fram.origin.y == self.view.frame.size.height)
        {
            fram.origin.y -= _setView.bounds.size.height;
        }
        else
        {
            fram.origin.y += _setView.bounds.size.height;
        }
        _setView.frame = fram;
    }];
}

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

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

 

补充：

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

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

@property(nonatomic) NSInteger numberOfLines;

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

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

可设置为如下三个值：

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