使用UIImageView、UILabel、UIButton實(shí)現(xiàn)一個綜合小案例
功能分析
步驟分析
切換序號、圖片、描述
1. 界面分析
1> 需要讀取或修改的屬性的控件
// 序號標(biāo)簽
// 圖片
// 圖片描述
// 左邊按鈕
// 右邊按鈕
2> 需要監(jiān)聽響應(yīng)事件的對象，需要添加監(jiān)聽方法
// 左邊按鈕
// 右邊按鈕
uiimage 是圖片，不是控件，他的父類為NSObject，UIImageView是加載圖片的控件，父類為UIView
完全的代碼編寫界面（復(fù)習(xí)回憶）
#import "ViewController.h"@interface ViewController ()//序號標(biāo)簽@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是視圖加載完成后調(diào)用的方法，通常在此方法中執(zhí)行視圖控制器的初始化工作- (void)viewDidLoad { [super viewDidLoad]; //實(shí)例化控件 //1、序號標(biāo)簽的編寫 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; //實(shí)例化一個圖像視圖 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)]; //實(shí)例化一個圖像 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 = @"發(fā)發(fā)發(fā)"; //居中對齊 label1.textAlignment = NSTextAlignmentCenter; [self.view addSubview:label1]; //記錄改變 self.descLabel = label1; //4、左邊的按鈕 UIButton *leftBtn = [[UIButton alloc] init]; //設(shè)置按鈕的背景圖 [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal]; [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted]; //設(shè)置按鈕的大小 leftBtn.frame = CGRectMake(0, 0, 40, 40); //設(shè)置按鈕的位置 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]; //設(shè)置按鈕的背景圖 [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal]; [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted]; //設(shè)置按鈕的大小 rightBtn.frame = CGRectMake(0, 0, 40, 40); //設(shè)置按鈕的位置 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 ()//序號標(biāo)簽@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默認(rèn)是0@property (nonatomic, assign) int index;/**設(shè)置一個圖像的數(shù)組*///新的注釋，可以顯式中文@property (nonatomic, strong) NSArray *imageList;/* @property 自動為我們生成 set，get 方法的聲明和實(shí)現(xiàn) 帶下劃線的成員變量 */@end@implementation ViewController//控件懶加載//不需要每次都在 viewdidload 里實(shí)例化數(shù)組，只要在需要的時候?qū)嵗纯?/span>//重寫 get 方法- (NSArray *)imageList{ //只有第一次調(diào)用imageList 的 getter 方法的時候，如果為空，那么再實(shí)例化并建立數(shù)組，其他時候，直接返回成員變量 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是視圖加載完成后調(diào)用的方法，通常在此方法中執(zhí)行視圖控制器的初始化工作- (void)viewDidLoad { [super viewDidLoad]; //實(shí)例化控件 //1、序號標(biāo)簽的編寫 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; //實(shí)例化一個圖像視圖 UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)]; //實(shí)例化一個圖像 // 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 = @"發(fā)發(fā)發(fā)"; //居中對齊 label1.textAlignment = NSTextAlignmentCenter; [self.view addSubview:label1]; //記錄改變 self.descLabel = label1; //4、左邊的按鈕 UIButton *leftBtn = [[UIButton alloc] init]; //設(shè)置按鈕的背景圖 [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal]; [leftBtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted]; //設(shè)置按鈕的大小 leftBtn.frame = CGRectMake(0, 0, 40, 40); //設(shè)置按鈕的位置 leftBtn.center = CGPointMake(self.icon.frame.origin.x / 2, self.icon.center.y); [self.view addSubview:leftBtn]; //設(shè)置監(jiān)聽 [leftBtn addTarget:self action:@selector(leftClick) forControlEvents:UIControlEventTouchUpInside]; self.leftButton = leftBtn; //5、右邊的按鈕 UIButton *rightBtn = [[UIButton alloc] init]; //設(shè)置按鈕的背景圖 [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal]; [rightBtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted]; //設(shè)置按鈕的大小 rightBtn.frame = CGRectMake(0, 0, 40, 40); //設(shè)置按鈕的位置 rightBtn.center = CGPointMake(self.view.frame.size.width - self.icon.frame.origin.x / 2, self.icon.center.y); [self.view addSubview:rightBtn]; //設(shè)置監(jiān)聽 [rightBtn addTarget:self action:@selector(rightClick) forControlEvents:UIControlEventTouchUpInside]; self.rightButton = rightBtn; [self change];}- (void)change{ //更具 self.index 來顯示序號標(biāo)簽，圖形，，描述 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
小結(jié)：
/**設(shè)置一個圖像的數(shù)組*/
這是 xcode 的新的注釋，鼠標(biāo)浮動時，可以顯式出中文注釋。
手碼懶加載創(chuàng)建控件的步驟
1> 定義控件屬性，注意：屬性必須是strong的，如下：
@property (nonatomic, strong) UIImageView *icon;
2> 在屬性的getter方法中實(shí)現(xiàn)懶加載。
使用懶加載的好處：
1> 不必將創(chuàng)建對象的代碼全部寫在viewDidLoad方法中，代碼的可讀性更強(qiáng)
2> 每個控件的getter方法中分別負(fù)責(zé)各自的實(shí)例化處理，代碼彼此之間的獨(dú)立性強(qiáng)，松耦合
按鈕的狀態(tài)
使用Plist文件重構(gòu)本項目代碼：
目的：將數(shù)據(jù)與代碼分離（類似 java 里的 xml 文件寫數(shù)據(jù)，數(shù)據(jù)和代碼分離）
之前的代碼，尤其是字典那部分，還是處理的不好，顯得太耦合。需要把數(shù)據(jù)和代碼分離，這里學(xué)習(xí)屬性列表文件，property list
新建file
本地文件，也可以網(wǎng)絡(luò)上解析 xml 文件
這樣，只需要修改對應(yīng)的 xml 文件即可，不用再打開代碼，修改代碼
//控件懶加載//不需要每次都在 viewdidload 里實(shí)例化數(shù)組，只要在需要的時候?qū)嵗纯?/span>- (NSArray *)imageList{ //只有第一次調(diào)用imageList 的 getter 方法的時候，如果為空，那么再實(shí)例化并建立數(shù)組，其他時候，直接返回成員變量 if (_imageList == nil) { //bundle 包的概念 只讀 NSString *path = [[NSBundle mainBundle] pathForResource:@"imageDate" ofType:@".plist"]; NSLog(@"%@", path); //File 表示從完整路徑查找文件 _imageList = [NSArray arrayWithContentsOfFile:path]; } return _imageList;}
小結(jié)：
1、將數(shù)據(jù)與代碼分離，Plist 文件的加載方法：
NSString *path = [[NSBundle mainBundle] pathForResource:@"ImageData" ofType:@"plist"];
_imageList = [NSArray arrayWithContentsOfFile:path];
提示：通常在方法中出現(xiàn)File字眼，通常需要傳遞文件的全路徑作為參數(shù)，如下全路徑：
/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自動換行，設(shè)置Lines為0即可。
3、UIButton和UIImageView
@property (strong, nonatomic) NSArray *images;
由于只需要初始化一次圖片數(shù)據(jù)，因此放在get方法中初始化，將屬性放在get方法中初始化的方式，稱為“懶加載”/”延遲加載”
/**設(shè)置一個圖像的數(shù)組*/
這是 xcode 的新的注釋，鼠標(biāo)浮動時，可以顯式出中文注釋。
手碼懶加載創(chuàng)建控件的步驟
1> 定義控件屬性，注意：屬性必須是strong的，如下：
@property (nonatomic, strong) UIImageView *icon;
2> 在屬性的getter方法中實(shí)現(xiàn)懶加載。
使用懶加載的好處：
1> 不必將創(chuàng)建對象的代碼全部寫在viewDidLoad方法中，代碼的可讀性更強(qiáng)
2> 每個控件的getter方法中分別負(fù)責(zé)各自的實(shí)例化處理，代碼彼此之間的獨(dú)立性強(qiáng)，松耦合
按鈕的狀態(tài)
新聞熱點(diǎn)
疑難解答
