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,    // 右對齊