IOS開發筆記-基礎UI（6）照片瀏覽器（控件的懶加載和使用Plist文件將數據與代碼分離）

2019-11-14 19:29:55

字體：大中小

來源：轉載

供稿：網友

使用UIImageView、UILabel、UIButton實現一個綜合小案例

功能分析

(1)點擊箭頭切換序號、圖片、描述

(2)如果是首張圖片，左邊箭頭不能點擊

(3)如果是尾張圖片，右邊箭頭不能點擊

步驟分析

(1)搭建UI界面

(2)監聽按鈕點擊

切換序號、圖片、描述

1. 界面分析

1> 需要讀取或修改的屬性的控件

// 序號標簽

// 圖片

// 圖片描述

// 左邊按鈕

// 右邊按鈕

2> 需要監聽響應事件的對象，需要添加監聽方法

// 左邊按鈕

// 右邊按鈕

uiimage 是圖片，不是控件，他的父類為NSObject，UIImageView是加載圖片的控件，父類為UIView

完全的代碼編寫界面（復習回憶）

#import "ViewController.h"@interface ViewController ()//序號標簽@PRoperty (nonatomic, strong) UILabel *noLabel;//圖片@property (nonatomic, strong) UIImageView *icon;//圖片描述@property (nonatomic, strong) UILabel *descLabel;//左邊按鈕@property (nonatomic, strong) UIButton *leftButton;//右邊按鈕@property (nonatomic, strong) UIButton *rightButton;@end@implementation ViewController//初始化工作//viewDidLoad是視圖加載完成后調用的方法，通常在此方法中執行視圖控制器的初始化工作- (void)viewDidLoad {    [super viewDidLoad];    //實例化控件    //1、序號標簽的編寫    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 320, 40)];    label.text = @"1/5";    //居中對齊    label.textAlignment = NSTextAlignmentCenter;    [self.view addSubview:label];    //記錄改變    self.noLabel = label;        //2、圖片控件    CGFloat imageW = 200;    CGFloat imageH = 200;    CGFloat imageX = (320 - imageW) / 2;    CGFloat imageY = 80;    //實例化一個圖像視圖    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)];    //實例化一個圖像    UIImage *image = [UIImage imageNamed:@"biaoqingdi"];    //把圖片顯示到imageView    imageView.image = image;    [self.view addSubview:imageView];    //記錄下改變    self.icon = imageView;        //3、圖片描述 label 控件    UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 300, 300, 80)];    label1.text = @"發發發";    //居中對齊    label1.textAlignment = NSTextAlignmentCenter;    [self.view addSubview:label1];    //記錄改變    self.descLabel = label1;        //4、左邊的按鈕    UIButton *leftBtn = [[UIButton alloc] init];    //設置按鈕的背景圖    [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];    [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];    //設置按鈕的大小    leftBtn.frame = CGRectMake(0, 0, 40, 40);    //設置按鈕的位置    leftBtn.center = CGPointMake(self.icon.frame.origin.x / 2, self.icon.center.y);        [self.view addSubview:leftBtn];    self.leftButton = leftBtn;        //5、右邊的按鈕    UIButton *rightBtn = [[UIButton alloc] init];    //設置按鈕的背景圖    [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];    [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];    //設置按鈕的大小    rightBtn.frame = CGRectMake(0, 0, 40, 40);    //設置按鈕的位置    rightBtn.center = CGPointMake(self.view.frame.size.width - self.icon.frame.origin.x / 2, self.icon.center.y);        [self.view addSubview:rightBtn];    self.leftButton = rightBtn;}@end

完整的代碼如下：

#import "ViewController.h"@interface ViewController ()//序號標簽@property (nonatomic, strong) UILabel *noLabel;//圖片@property (nonatomic, strong) UIImageView *icon;//圖片描述@property (nonatomic, strong) UILabel *descLabel;//左邊按鈕@property (nonatomic, strong) UIButton *leftButton;//右邊按鈕@property (nonatomic, strong) UIButton *rightButton;//圖片索引，index默認是0@property (nonatomic, assign) int index;/**設置一個圖像的數組*///新的注釋，可以顯式中文@property (nonatomic, strong) NSArray *imageList;/* @property  自動為我們生成 set，get 方法的聲明和實現 帶下劃線的成員變量 */@end@implementation ViewController//控件懶加載//不需要每次都在 viewdidload 里實例化數組，只要在需要的時候實例化即可//重寫 get 方法- (NSArray *)imageList{    //只有第一次調用imageList 的 getter 方法的時候，如果為空，那么再實例化并建立數組，其他時候，直接返回成員變量    if (_imageList == nil) {        //使用字典        NSDictionary *dict1 = @{@"name" : @"biaoqingdi", @"desc" : @"表情"};        NSDictionary *dict2 = @{@"name" : @"bingli", @"desc" : @"病歷"};        NSDictionary *dict3 = @{@"name" : @"chiniupa", @"desc" : @"吃牛扒"};        NSDictionary *dict4 = @{@"name" : @"danteng", @"desc" : @"蛋疼"};        NSDictionary *dict5 = @{@"name" : @"wangba", @"desc" : @"王八"};                self.imageList = @[dict1, dict2, dict3, dict4, dict5];    }        return _imageList;}//初始化工作//viewDidLoad是視圖加載完成后調用的方法，通常在此方法中執行視圖控制器的初始化工作- (void)viewDidLoad {    [super viewDidLoad];    //實例化控件    //1、序號標簽的編寫    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 20, 320, 40)];  //  label.text = @"1/5";    //居中對齊    label.textAlignment = NSTextAlignmentCenter;    [self.view addSubview:label];    //記錄改變    self.noLabel = label;        //2、圖片控件    CGFloat imageW = 200;    CGFloat imageH = 200;    CGFloat imageX = (320 - imageW) / 2;    CGFloat imageY = 80;    //實例化一個圖像視圖    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)];    //實例化一個圖像   // UIImage *image = [UIImage imageNamed:@"biaoqingdi"];    //把圖片顯示到imageView   // imageView.image = image;    //把圖像增加到 view    [self.view addSubview:imageView];    //記錄下改變    self.icon = imageView;        //3、圖片描述 label 控件    UILabel *label1 = [[UILabel alloc] initWithFrame:CGRectMake(0, 300, 300, 80)];   // label1.text = @"發發發";    //居中對齊    label1.textAlignment = NSTextAlignmentCenter;    [self.view addSubview:label1];    //記錄改變    self.descLabel = label1;        //4、左邊的按鈕    UIButton *leftBtn = [[UIButton alloc] init];    //設置按鈕的背景圖    [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];    [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];    //設置按鈕的大小    leftBtn.frame = CGRectMake(0, 0, 40, 40);    //設置按鈕的位置    leftBtn.center = CGPointMake(self.icon.frame.origin.x / 2, self.icon.center.y);    [self.view addSubview:leftBtn];    //設置監聽    [leftBtn addTarget:self action:@selector(leftClick) forControlEvents:UIControlEventTouchUpInside];    self.leftButton = leftBtn;        //5、右邊的按鈕    UIButton *rightBtn = [[UIButton alloc] init];    //設置按鈕的背景圖    [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];    [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];    //設置按鈕的大小    rightBtn.frame = CGRectMake(0, 0, 40, 40);    //設置按鈕的位置    rightBtn.center = CGPointMake(self.view.frame.size.width - self.icon.frame.origin.x / 2, self.icon.center.y);        [self.view addSubview:rightBtn];        //設置監聽    [rightBtn addTarget:self action:@selector(rightClick) forControlEvents:UIControlEventTouchUpInside];    self.rightButton = rightBtn;        [self change];}- (void)change{    //更具 self.index 來顯示序號標簽，圖形，，描述    self.noLabel.text = [NSString stringWithFormat:@"%d / %d", self.index + 1, 5];    self.icon.image = [UIImage imageNamed:self.imageList[self.index][@"name"]];    self.descLabel.text = self.imageList[self.index][@"desc"];        self.leftButton.enabled = (self.index != 0);    self.rightButton.enabled = (self.index != 4);}//left- (void)leftClick{    self.index--;    [self change];}//right- (void)rightClick{    self.index++;    [self change];}@end

小結：

/**設置一個圖像的數組*/

這是 xcode 的新的注釋，鼠標浮動時，可以顯式出中文注釋。

手碼懶加載創建控件的步驟

1> 定義控件屬性，注意：屬性必須是strong的，如下：

@property (nonatomic, strong) UIImageView *icon;

2> 在屬性的getter方法中實現懶加載。

使用懶加載的好處：

1> 不必將創建對象的代碼全部寫在viewDidLoad方法中，代碼的可讀性更強

2> 每個控件的getter方法中分別負責各自的實例化處理，代碼彼此之間的獨立性強，松耦合

按鈕的狀態

normal（普通狀態）

默認情況

對應的枚舉常量：UIControlStateNormal

highlighted（高亮狀態）

按鈕被按下去的時候（手指還未松開）

對應的枚舉常量：UIControlStateHighlighted

disabled（失效狀態，不可用狀態）

如果enabled屬性為NO，就是處于disable狀態，代表按鈕不可以被點擊

對應的枚舉常量：UIControlStateDisabled

使用Plist文件重構本項目代碼：

目的：將數據與代碼分離（類似 java 里的 xml 文件寫數據，數據和代碼分離）

之前的代碼，尤其是字典那部分，還是處理的不好，顯得太耦合。需要把數據和代碼分離，這里學習屬性列表文件，property list

新建file

本地文件，也可以網絡上解析 xml 文件

這樣，只需要修改對應的 xml 文件即可，不用再打開代碼，修改代碼

//控件懶加載//不需要每次都在 viewdidload 里實例化數組，只要在需要的時候實例化即可- (NSArray *)imageList{    //只有第一次調用imageList 的 getter 方法的時候，如果為空，那么再實例化并建立數組，其他時候，直接返回成員變量    if (_imageList == nil) {        //bundle 包的概念  只讀        NSString *path = [[NSBundle mainBundle] pathForResource:@"imageDate" ofType:@".plist"];        NSLog(@"%@", path);        //File 表示從完整路徑查找文件        _imageList = [NSArray arrayWithContentsOfFile:path];    }        return _imageList;}

小結：

1、將數據與代碼分離，Plist 文件的加載方法：

直接將數據直接寫在代碼里面，不是一種合理的做法。如果數據經常改，就要經常翻開對應的代碼進行修改，造成代碼擴展性低，因此，可以考慮將經常變的數據放在文件中進行存儲，程序啟動后從文件中讀取最新的數據。如果要變動數據，直接修改數據文件即可，不用修改代碼。

一般可以使用屬性列表文件存儲NSArray或者NSDictionary之類的數據，這種屬性列表文件的擴展名是plist，因此也成為“Plist文件”

NSString *path = [[NSBundle mainBundle] pathForResource:@"ImageData" ofType:@"plist"];

_imageList = [NSArray arrayWithContentsOfFile:path];

提示：通常在方法中出現File字眼，通常需要傳遞文件的全路徑作為參數，如下全路徑：

/Users/dashuai/Library/Developer/CoreSimulator/Devices/83C611C9-DE98-4D02-BC64-D31C0403766E/data/Containers/Bundle/application/E04713CF-A9D4-49D1-A934-B4093BCE5B3C/圖片瀏覽.app/imageDate.plist

2、要想讓UILabel自動換行，設置Lines為0即可。

3、UIButton和UIImageView

相同點

都能顯示圖片

不同點

UIButton默認情況就能監聽點擊事件，而UIImageView默認情況下不能

UIButton可以在不同狀態下顯示不同的圖片

UIButton既能顯示文字，又能顯示圖片

如何選擇

UIButton：需要顯示圖片，點擊圖片后需要做一些特定的操作

UIImageView：僅僅需要顯示圖片，點擊圖片后不需要做任何事情

NSArray和NSDictionary的使用