iOS開發UI篇—簡單的瀏覽器查看程式

標籤：

iOS開發UI篇—簡單的瀏覽器查看程式

一、程式實現要求

1.要求

2. 介面分析

（1） 需要讀取或修改屬性的控制項需要設定屬性

序號標籤

圖片

圖片描述

左邊按鈕

右邊按鈕

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

左邊按鈕

右邊按鈕

二、實現準系統的程式

  1 //  2 //  YYViewController.m  3 //  03-圖片瀏覽器初步  4 //  5 //  Created by apple on 14-5-21.  6 //  Copyright (c) 2014年 itcase. All rights reserved.  7 //  8   9 #import "YYViewController.h" 10  11 #define POTOIMGW    200 12 #define POTOIMGH    300 13 #define POTOIMGX    60 14 #define  POTOIMGY    50 15  16  17 @interface YYViewController () 18  19 //變數聲明！ 20 @property(nonatomic,strong)UILabel *firstlab; 21 @property(nonatomic,strong)UILabel *lastlab; 22 @property(nonatomic,strong)UIImageView *icon; 23 @property(nonatomic,strong)UIButton *leftbtn; 24 @property(nonatomic,strong)UIButton *rightbtn; 25  26 -(void)change; 27 @property(nonatomic ,assign)int i; 28 @end 29  30 @implementation YYViewController 31  32 - (void)viewDidLoad 33 { 34     [super viewDidLoad]; 35     self.i=0; 36     //建立一個用來顯示序號的lable控制項 37     UILabel *headlab=[[UILabel alloc]initWithFrame:CGRectMake(20, 10, 300, 30)]; 38      39   // [headlab setText:@"1/5"]; 40     [headlab setTextAlignment:NSTextAlignmentCenter]; 41     [headlab setTextColor:[UIColor blackColor]]; 42      43     [self.view addSubview:headlab]; 44     self.firstlab=headlab; 45      46      47      48     //建立一個裝載圖片的控制項 49     UIImageView *potoimg=[[UIImageView alloc]initWithFrame:CGRectMake(POTOIMGX, POTOIMGY, POTOIMGW, POTOIMGH)]; 50      51     UIImage *image=[UIImage imageNamed:@"biaoqingdi"]; 52     potoimg.image=image; 53      54     [self.view addSubview:potoimg]; 55     self.icon=potoimg; 56      57      58      59     //建立最下邊的描述圖片的lable控制項 60     UILabel *desclab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)]; 61    // [desclab setText:@"表情弱爆了！"]; 62     [desclab setTextAlignment:NSTextAlignmentCenter]; 63     [self.view addSubview:desclab]; 64     self.lastlab=desclab; 65      66      68     //建立兩個方向鍵按鈕 69     //設定為自訂類型 70     //1.使用類建立對象 71     UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 72      73     //2.設定對象的屬性（不要忘記設定座標） 74     leftbtn.frame=CGRectMake(0, self.view.center.y, 40, 40); 75     [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal]; 76     [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted]; 77      78     //3.提交對象到視圖 79     [self.view addSubview:leftbtn]; 80      81     self.leftbtn=leftbtn; 82     [leftbtn addTarget:self action:@selector(leftclick:) forControlEvents:UIControlEventTouchUpInside]; 83      84      85     UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 86      87     rightbtn.frame=CGRectMake(POTOIMGX+POTOIMGW+10, self.view.center.y, 40, 40); 88     [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal]; 89     [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted]; 90      91     [self.view addSubview:rightbtn]; 92      93     self.rightbtn=rightbtn; 94     [rightbtn addTarget:self action:@selector(rightclick:) forControlEvents:UIControlEventTouchUpInside]; 95      96     //這是一個初始化方法，調用change可以完成初始化的工作 97     [self change]; 98 } 99 100 -(void)change101 {102     [self.firstlab setText:[NSString stringWithFormat:@"%d/5",self.i+1]];103     switch (self.i) {104         case 0:105             [email protected]"什麼表情都弱爆了！";106             self.icon.image=[UIImage imageNamed:@"biaoqingdi"];107             break;108         case 1:109             [email protected]"病例";110             self.icon.image=[UIImage imageNamed:@"bingli"];111             break;112         case 2:113            [email protected]"王八";114             self.icon.image=[UIImage imageNamed:@"wangba"];115             break;116         case 3:117            [email protected]"吃牛扒";118             self.icon.image=[UIImage imageNamed:@"chiniupa"];119             break;120         case 4:121              [email protected]"蛋疼！";122             self.icon.image=[UIImage imageNamed:@"danteng"];123             break;124     }125     //控制按鈕的點擊，如果為5則右鍵失效，如果為1，則左鍵失效126     self.leftbtn.enabled=(self.i!=0);127     self.rightbtn.enabled=(self.i!=4);128 129 }130 131 //向右按鍵132 -(void)rightclick:(UIButton *)btn133 {134     self.i++;135     [self change];136     //NSLog(@"點我了");137 }138 -(void)leftclick:(UIButton *)btn139 {140     self.i--;141     [self change];142 }143 - (void)didReceiveMemoryWarning144 {145     [super didReceiveMemoryWarning];146     // Dispose of any resources that can be recreated.147 }148 149 @end

三、程式最佳化

  1 //  2 //  YYViewController.m  3 //  03-圖片瀏覽器初步  4 //  5 //  Created by apple on 14-5-21.  6 //  Copyright (c) 2014年 itcase. All rights reserved.  7 //  8   9 #import "YYViewController.h" 10  11 #define POTOIMGW    200 12 #define POTOIMGH    300 13 #define POTOIMGX    60 14 #define  POTOIMGY    50 15  16  17 @interface YYViewController () 18  19 //變數聲明！ 20 @property(nonatomic,strong)UILabel *firstlab; 21 @property(nonatomic,strong)UILabel *lastlab; 22 @property(nonatomic,strong)UIImageView *icon; 23 @property(nonatomic,strong)UIButton *leftbtn; 24 @property(nonatomic,strong)UIButton *rightbtn; 25  26 @property(nonatomic,strong)NSArray *array; 27  28 -(void)change; 29 @property(nonatomic ,assign)int i; 30 @end 31  32 @implementation YYViewController 33  34 - (void)viewDidLoad 35 { 36     [super viewDidLoad]; 37     self.i=0; 38     //建立一個用來顯示序號的lable控制項 39     UILabel *headlab=[[UILabel alloc]initWithFrame:CGRectMake(20, 10, 300, 30)]; 40      41   // [headlab setText:@"1/5"]; 42     [headlab setTextAlignment:NSTextAlignmentCenter]; 43     [headlab setTextColor:[UIColor blackColor]]; 44      45     [self.view addSubview:headlab]; 46     self.firstlab=headlab; 47      48      49      50     //建立一個裝載圖片的控制項 51     UIImageView *potoimg=[[UIImageView alloc]initWithFrame:CGRectMake(POTOIMGX, POTOIMGY, POTOIMGW, POTOIMGH)]; 52      53     UIImage *image=[UIImage imageNamed:@"biaoqingdi"]; 54     potoimg.image=image; 55      56     [self.view addSubview:potoimg]; 57     self.icon=potoimg; 58      59      60      61     //建立最下邊的描述圖片的lable控制項 62     UILabel *desclab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)]; 63    // [desclab setText:@"表情弱爆了！"]; 64     [desclab setTextAlignment:NSTextAlignmentCenter]; 65     [self.view addSubview:desclab]; 66     self.lastlab=desclab; 67      68      69      70     //建立兩個方向鍵按鈕 71     //設定為自訂類型 72     //1.使用類建立對象 73     UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 74      75     //2.設定對象的屬性（不要忘記設定座標） 76     leftbtn.frame=CGRectMake(0, self.view.center.y, 40, 40); 77     [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal]; 78     [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted]; 79      80     //3.提交對象到視圖 81     [self.view addSubview:leftbtn]; 82      83     self.leftbtn=leftbtn; 84     [leftbtn addTarget:self action:@selector(leftclick:) forControlEvents:UIControlEventTouchUpInside]; 85      86      87     UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 88      89     rightbtn.frame=CGRectMake(POTOIMGX+POTOIMGW+10, self.view.center.y, 40, 40); 90     [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal]; 91     [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted]; 92      93     [self.view addSubview:rightbtn]; 94      95     self.rightbtn=rightbtn; 96     [rightbtn addTarget:self action:@selector(rightclick:) forControlEvents:UIControlEventTouchUpInside]; 97     //放在這裡的話，只會建立一次，但是這個部分和[self change];部分有很嚴格的順序要求，並不人性化，可以考慮使用懶載入特性 98 //    NSDictionary *[email protected]{@"name": @"biaoqingdi",@"desc":@"什麼表情都弱爆了！"}; 99 //    NSDictionary *[email protected]{@"name": @"bingli",@"desc":@"病例"};100 //    NSDictionary *[email protected]{@"name": @"wangba",@"desc":@"烏龜"};101 //    NSDictionary *[email protected]{@"name": @"chiniupa",@"desc":@"吃牛扒"};102 //    NSDictionary *[email protected]{@"name": @"danteng",@"desc":@"蛋疼"};103 //    104 //    [email protected][dict1,dict2,dict3,dict4,dict5];105     //這是一個初始化方法，調用change可以完成初始化的工作106     [self change];107 }108 109 -(void)change110 {111     //每次調用都需要建立？有沒有什麼解決辦法？112 //    NSDictionary *[email protected]{@"name": @"biaoqingdi",@"desc":@"什麼表情都弱爆了！"};113 //    NSDictionary *[email protected]{@"name": @"bingli",@"desc":@"病例"};114 //    NSDictionary *[email protected]{@"name": @"wangba",@"desc":@"烏龜"};115 //    NSDictionary *[email protected]{@"name": @"chiniupa",@"desc":@"吃牛扒"};116 //    NSDictionary *[email protected]{@"name": @"danteng",@"desc":@"蛋疼"};117 //    118 //    NSArray *[email protected][dict1,dict2,dict3,dict4,dict5];119     120     121     //設定照片122     //先根據self.i取出數組中的元素，再取出元素（字典）中索引值對應的值123 //    self.icon.image=[UIImage imageNamed:array[self.i][@"name"]];124 //    self.lastlab.text=array[self.i][@"desc"];125    // NSLog(@"%@",array[self.i][@"desc"]);126     127     self.icon.image=[UIImage imageNamed:self.array[self.i][@"name"]];128     self.lastlab.text=self.array[self.i][@"desc"];129     130     [self.firstlab setText:[NSString stringWithFormat:@"%d/5",self.i+1]];131     132 //    switch (self.i) {133 //        case 0:134 //            [email protected]"什麼表情都弱爆了！";135 //            self.icon.image=[UIImage imageNamed:@"biaoqingdi"];136 //            break;137 //        case 1:138 //            [email protected]"病例";139 //            self.icon.image=[UIImage imageNamed:@"bingli"];140 //            break;141 //        case 2:142 //           [email protected]"王八";143 //            self.icon.image=[UIImage imageNamed:@"wangba"];144 //            break;145 //        case 3:146 //           [email protected]"吃牛扒";147 //            self.icon.image=[UIImage imageNamed:@"chiniupa"];148 //            break;149 //        case 4:150 //             [email protected]"蛋疼！";151 //            self.icon.image=[UIImage imageNamed:@"danteng"];152 //            break;153 //    }154     //控制按鈕的點擊，如果為5則右鍵失效，如果為1，則左鍵失效155     self.leftbtn.enabled=(self.i!=0);156     self.rightbtn.enabled=(self.i!=4);157 158 }159 160 //array的get方法161 -(NSArray *)array162 {163     NSLog(@"需要擷取數組");164     //只執行個體化一次165     if (_array==nil) {166         NSLog(@"執行個體化數組");167         NSDictionary *[email protected]{@"name": @"biaoqingdi",@"desc":@"什麼表情都弱爆了！"};168         NSDictionary *[email protected]{@"name": @"bingli",@"desc":@"病例"};169         NSDictionary *[email protected]{@"name": @"wangba",@"desc":@"烏龜"};170         NSDictionary *[email protected]{@"name": @"chiniupa",@"desc":@"吃牛扒"};171         NSDictionary *[email protected]{@"name": @"danteng",@"desc":@"蛋疼"};172         [email protected][dict1,dict2,dict3,dict4,dict5];173     }174 //    NSDictionary *[email protected]{@"name": @"biaoqingdi",@"desc":@"什麼表情都弱爆了！"};175 //    NSDictionary *[email protected]{@"name": @"bingli",@"desc":@"病例"};176 //    NSDictionary *[email protected]{@"name": @"wangba",@"desc":@"烏龜"};177 //    NSDictionary *[email protected]{@"name": @"chiniupa",@"desc":@"吃牛扒"};178 //    NSDictionary *[email protected]{@"name": @"danteng",@"desc":@"蛋疼"};179     180    // [email protected][dict1,dict2,dict3,dict4,dict5];181     return _array;182 }183 184 //向右按鍵185 -(void)rightclick:(UIButton *)btn186 {187     self.i++;188     [self change];189 }190 191 //向左按鍵192 -(void)leftclick:(UIButton *)btn193 {194     self.i--;195     [self change];196 }197 198 199 - (void)didReceiveMemoryWarning200 {201     [super didReceiveMemoryWarning];202 }203 204 @end

說明：

1> 定義控制項屬性，注意：屬性必須是strong的，範例程式碼如下：

@property (nonatomic, strong) UIImageView *icon;

2> 在屬性的getter方法中實現懶載入，範例程式碼如下：

 1 - (UIImageView *)icon 2  3 { 4  5     if (!_icon) { 6  7         // 計算位置參數 8  9         CGFloat imageW = 200;10 11         CGFloat imageX = (320 - imageW) / 2;12 13         CGFloat imageH = 200;14 15         CGFloat imageY = 80;16 17         // 執行個體化映像視圖18 19         _icon = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)];20 21         // 將映像視圖添加到主視圖22 23         [self.view addSubview:_icon];24 25     }26 27     return _icon;28 29 }

四、使用plist檔案

（1）使用Plist檔案的目的：將資料與代碼分離

（2）載入方法：

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

_imageList = [NSArray arrayWithContentsOfFile:path];

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

（3）程式碼範例

  1 //  2 //  YYViewController.m  3 //  03-圖片瀏覽器初步  4 //  5 //  Created by apple on 14-5-21.  6 //  Copyright (c) 2014年 itcase. All rights reserved.  7 //  8   9 #import "YYViewController.h" 10  11 #define POTOIMGW    200 12 #define POTOIMGH    300 13 #define POTOIMGX    60 14 #define  POTOIMGY    50 15  16  17 @interface YYViewController () 18  19 //變數聲明！ 20 @property(nonatomic,strong)UILabel *firstlab; 21 @property(nonatomic,strong)UILabel *lastlab; 22 @property(nonatomic,strong)UIImageView *icon; 23 @property(nonatomic,strong)UIButton *leftbtn; 24 @property(nonatomic,strong)UIButton *rightbtn; 25  26 @property(nonatomic,strong)NSArray *array; 27  28 -(void)change; 29 @property(nonatomic ,assign)int i; 30 @end 31  32 @implementation YYViewController 33  34 - (void)viewDidLoad 35 { 36     [super viewDidLoad]; 37     self.i=0; 38     //建立一個用來顯示序號的lable控制項 39     UILabel *headlab=[[UILabel alloc]initWithFrame:CGRectMake(20, 10, 300, 30)]; 40      41   // [headlab setText:@"1/5"]; 42     [headlab setTextAlignment:NSTextAlignmentCenter]; 43     [headlab setTextColor:[UIColor blackColor]]; 44      45     [self.view addSubview:headlab]; 46     self.firstlab=headlab; 47      48      49      50     //建立一個裝載圖片的控制項 51     UIImageView *potoimg=[[UIImageView alloc]initWithFrame:CGRectMake(POTOIMGX, POTOIMGY, POTOIMGW, POTOIMGH)]; 52      53     UIImage *image=[UIImage imageNamed:@"biaoqingdi"]; 54     potoimg.image=image; 55      56     [self.view addSubview:potoimg]; 57     self.icon=potoimg; 58      59     //建立最下邊的描述圖片的lable控制項 60     UILabel *desclab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)]; 61    // [desclab setText:@"表情弱爆了！"]; 62     [desclab setTextAlignment:NSTextAlignmentCenter]; 63     [self.view addSubview:desclab]; 64     self.lastlab=desclab; 65      66      67     //建立兩個方向鍵按鈕 68     //設定為自訂類型 69     //1.使用類建立對象 70     UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 71      72     //2.設定對象的屬性（不要忘記設定座標） 73     leftbtn.frame=CGRectMake(0, self.view.center.y, 40, 40); 74     [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal]; 75     [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted]; 76      77     //3.提交對象到視圖 78     [self.view addSubview:leftbtn]; 79      80     self.leftbtn=leftbtn; 81     [leftbtn addTarget:self action:@selector(leftclick:) forControlEvents:UIControlEventTouchUpInside]; 82      83      84     UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 85      86     rightbtn.frame=CGRectMake(POTOIMGX+POTOIMGW+10, self.view.center.y, 40, 40); 87     [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal]; 88     [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted]; 89      90     [self.view addSubview:rightbtn]; 91      92     self.rightbtn=rightbtn; 93     [rightbtn addTarget:self action:@selector(rightclick:) forControlEvents:UIControlEventTouchUpInside]; 94     [self change]; 95 } 96  97 -(void)change 98 { 99     self.icon.image=[UIImage imageNamed:self.array[self.i][@"name"]];100     self.lastlab.text=self.array[self.i][@"desc"];101     102     [self.firstlab setText:[NSString stringWithFormat:@"%d/5",self.i+1]];103     104     self.leftbtn.enabled=(self.i!=0);105     self.rightbtn.enabled=(self.i!=4);106 107 }108 109 //array的get方法110 -(NSArray *)array111 {112     NSLog(@"需要擷取數組");113     //只執行個體化一次114     if (_array==nil) {115      116         NSString *path=[[NSBundle mainBundle] pathForResource:@"data" ofType:@"plist"];117         //數組的資料從檔案擷取118        // _array=[NSArray arrayWithContentsOfFile:path];119         _array=[[NSArray alloc]initWithContentsOfFile:path];120         //列印查看包的位置121         NSLog(@"%@",path);122         123        NSLog(@"執行個體化數組");124     }125 126     return _array;127 }128 129 //向右按鍵130 -(void)rightclick:(UIButton *)btn131 {132     self.i++;133     [self change];134 }135 136 //向左按鍵137 -(void)leftclick:(UIButton *)btn138 {139     self.i--;140     [self change];141 }142 143 - (void)didReceiveMemoryWarning144 {145     [super didReceiveMemoryWarning];146 }147 148 @end

（4）plist檔案

（5）實現效果

五、補充

開發思路：

1.完成準系統

2.考慮效能

（1）（初始化操作，可以直接調用change進行）

（2）因為要控制序號和圖片兩個變數，所以考慮使用字典代替掉switch

（3）每次點擊，字典都需要建立一次，效率地下，可以考慮建立的這部分拿到初始化方法中去，這樣就只需要建立一次就ok了。

（4）考慮缺點（對代碼的順序要求極其嚴格）

（5）懶載入（需要的時候才載入，那麼什麼時候是需要的時候，及調用get方法的時候）

（6）每次都來一下？效率低下—》只有第一次調用get方法時為空白，此時執行個體化並建立數組，其他時候直接返回成員變數（僅僅執行一次）

注意點：

1.方法的呼叫堆疊（順序）。

2.使用plist：讓資料的操作更加靈活，把資料弄到外面去，解除耦合性，讓耦合性不要太強。實際上是一個xml，是蘋果定義的一種特殊格式的xml。

3.bundle-包（唯讀）

 

iOS開發UI篇—簡單的瀏覽器查看程式