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

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

1、程序實現要求

1.要求

2. 界面分析

（1） 須要讀取或修改屬性的控件須要設置屬性

序號標籤

圖片

圖片描述

左邊按鈕

右邊按鈕

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

左邊按鈕

右邊按鈕

2、實現基本功能的程序

//
// YYViewController.m
// 03-圖片瀏覽器初步
//
// Created by apple on 14-5-21.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

#define POTOIMGW 200
#define POTOIMGH 300
#define POTOIMGX 60
#define POTOIMGY 50

@interface YYViewController ()

//變量聲明！
@property(nonatomic,strong)UILabel *firstlab;
@property(nonatomic,strong)UILabel *lastlab;
@property(nonatomic,strong)UIImageView *icon;
@property(nonatomic,strong)UIButton *leftbtn;
@property(nonatomic,strong)UIButton *rightbtn;

-(void)change;
@property(nonatomic ,assign)int i;
@end

@implementation YYViewController

- (void)viewDidLoad
{
[super viewDidLoad];
self.i=0;
//建立一個用來顯示序號的lable控件
UILabel *headlab=[[UILabel alloc]initWithFrame:CGRectMake(20, 10, 300, 30)];

// [headlab setText:@"1/5"];
[headlab setTextAlignment:NSTextAlignmentCenter];
[headlab setTextColor:[UIColor blackColor]];

[self.view addSubview:headlab];
self.firstlab=headlab;



//建立一個裝載圖片的控件
UIImageView *potoimg=[[UIImageView alloc]initWithFrame:CGRectMake(POTOIMGX, POTOIMGY, POTOIMGW, POTOIMGH)];

UIImage *image=[UIImage imageNamed:@"biaoqingdi"];
potoimg.image=image;

[self.view addSubview:potoimg];
self.icon=potoimg;



//建立最下邊的描述圖片的lable控件
UILabel *desclab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)];
// [desclab setText:@"表情弱爆了！"];
[desclab setTextAlignment:NSTextAlignmentCenter];
[self.view addSubview:desclab];
self.lastlab=desclab;


//建立兩個方向鍵按鈕
//設置爲自定義類型
//1.使用類建立對象
UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];

//2.設置對象的屬性（不要忘記設置座標）
leftbtn.frame=CGRectMake(0, self.view.center.y, 40, 40);
[leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
[leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];

//3.提交對象到視圖
[self.view addSubview:leftbtn];

self.leftbtn=leftbtn;
[leftbtn addTarget:self action:@selector(leftclick:) forControlEvents:UIControlEventTouchUpInside];


UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];

rightbtn.frame=CGRectMake(POTOIMGX+POTOIMGW+10, self.view.center.y, 40, 40);
[rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
[rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];

[self.view addSubview:rightbtn];

self.rightbtn=rightbtn;
[rightbtn addTarget:self action:@selector(rightclick:) forControlEvents:UIControlEventTouchUpInside];

//這是一個初始化方法，調用change能夠完成初始化的工做
[self change];
}

-(void)change
{
[self.firstlab setText:[NSString stringWithFormat:@"%d/5",self.i+1]];
switch (self.i) {
case 0:
self.lastlab.text=@"什麼表情都弱爆了！";
self.icon.image=[UIImage imageNamed:@"biaoqingdi"];
break;
case 1:
self.lastlab.text=@"病例";
self.icon.image=[UIImage imageNamed:@"bingli"];
break;
case 2:
self.lastlab.text=@"王八";
self.icon.image=[UIImage imageNamed:@"wangba"];
break;
case 3:
self.lastlab.text=@"吃牛扒";
self.icon.image=[UIImage imageNamed:@"chiniupa"];
break;
case 4:
self.lastlab.text=@"蛋疼！";
self.icon.image=[UIImage imageNamed:@"danteng"];
break;
}
//控制按鈕的點擊，若是爲5則右鍵失效，若是爲1，則左鍵失效
self.leftbtn.enabled=(self.i!=0);
self.rightbtn.enabled=(self.i!=4);

}

//向右按鍵
-(void)rightclick:(UIButton *)btn
{
self.i++;
[self change];
//NSLog(@"點我了");
}
-(void)leftclick:(UIButton *)btn
{
self.i--;
[self change];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}

@end

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     
 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 *dict1=@{@"name": @"biaoqingdi",@"desc":@"什麼表情都弱爆了！"};
 99 //    NSDictionary *dict2=@{@"name": @"bingli",@"desc":@"病例"};
100 //    NSDictionary *dict3=@{@"name": @"wangba",@"desc":@"烏龜"};
101 //    NSDictionary *dict4=@{@"name": @"chiniupa",@"desc":@"吃牛扒"};
102 //    NSDictionary *dict5=@{@"name": @"danteng",@"desc":@"蛋疼"};
103 //    
104 //    self.array=@[dict1,dict2,dict3,dict4,dict5];
105     //這是一個初始化方法，調用change能夠完成初始化的工做
106     [self change];
107 }
108 
109 -(void)change
110 {
111     //每次調用都須要建立？有沒有什麼解決辦法？
112 //    NSDictionary *dict1=@{@"name": @"biaoqingdi",@"desc":@"什麼表情都弱爆了！"};
113 //    NSDictionary *dict2=@{@"name": @"bingli",@"desc":@"病例"};
114 //    NSDictionary *dict3=@{@"name": @"wangba",@"desc":@"烏龜"};
115 //    NSDictionary *dict4=@{@"name": @"chiniupa",@"desc":@"吃牛扒"};
116 //    NSDictionary *dict5=@{@"name": @"danteng",@"desc":@"蛋疼"};
117 //    
118 //    NSArray *array=@[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 //            self.lastlab.text=@"什麼表情都弱爆了！";
135 //            self.icon.image=[UIImage imageNamed:@"biaoqingdi"];
136 //            break;
137 //        case 1:
138 //            self.lastlab.text=@"病例";
139 //            self.icon.image=[UIImage imageNamed:@"bingli"];
140 //            break;
141 //        case 2:
142 //           self.lastlab.text=@"王八";
143 //            self.icon.image=[UIImage imageNamed:@"wangba"];
144 //            break;
145 //        case 3:
146 //           self.lastlab.text=@"吃牛扒";
147 //            self.icon.image=[UIImage imageNamed:@"chiniupa"];
148 //            break;
149 //        case 4:
150 //             self.lastlab.text=@"蛋疼！";
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 *)array
162 {
163     NSLog(@"須要獲取數組");
164     //只實例化一次
165     if (_array==nil) {
166         NSLog(@"實例化數組");
167         NSDictionary *dict1=@{@"name": @"biaoqingdi",@"desc":@"什麼表情都弱爆了！"};
168         NSDictionary *dict2=@{@"name": @"bingli",@"desc":@"病例"};
169         NSDictionary *dict3=@{@"name": @"wangba",@"desc":@"烏龜"};
170         NSDictionary *dict4=@{@"name": @"chiniupa",@"desc":@"吃牛扒"};
171         NSDictionary *dict5=@{@"name": @"danteng",@"desc":@"蛋疼"};
172         _array=@[dict1,dict2,dict3,dict4,dict5];
173     }
174 //    NSDictionary *dict1=@{@"name": @"biaoqingdi",@"desc":@"什麼表情都弱爆了！"};
175 //    NSDictionary *dict2=@{@"name": @"bingli",@"desc":@"病例"};
176 //    NSDictionary *dict3=@{@"name": @"wangba",@"desc":@"烏龜"};
177 //    NSDictionary *dict4=@{@"name": @"chiniupa",@"desc":@"吃牛扒"};
178 //    NSDictionary *dict5=@{@"name": @"danteng",@"desc":@"蛋疼"};
179     
180    // _array=@[dict1,dict2,dict3,dict4,dict5];
181     return _array;
182 }
183 
184 //向右按鍵
185 -(void)rightclick:(UIButton *)btn
186 {
187     self.i++;
188     [self change];
189 }
190 
191 //向左按鍵
192 -(void)leftclick:(UIButton *)btn
193 {
194     self.i--;
195     [self change];
196 }
197 
198 
199 - (void)didReceiveMemoryWarning
200 {
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 }

4、使用plist文件

（1）使用Plist文件的目的：將數據與代碼分離

（2）加載方法：

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

_imageList = [NSArray arrayWithContentsOfFile:path];

提示：一般在方法中出現File字眼，一般須要傳遞文件的全路徑做爲參數

（3）代碼示例

//
// YYViewController.m
// 03-圖片瀏覽器初步
//
// Created by apple on 14-5-21.
// Copyright (c) 2014年 itcase. All rights reserved.
//

#import "YYViewController.h"

#define POTOIMGW 200
#define POTOIMGH 300
#define POTOIMGX 60
#define POTOIMGY 50

@interface YYViewController ()

//變量聲明！
@property(nonatomic,strong)UILabel *firstlab;
@property(nonatomic,strong)UILabel *lastlab;
@property(nonatomic,strong)UIImageView *icon;
@property(nonatomic,strong)UIButton *leftbtn;
@property(nonatomic,strong)UIButton *rightbtn;

@property(nonatomic,strong)NSArray *array;

-(void)change;
@property(nonatomic ,assign)int i;
@end

@implementation YYViewController

- (void)viewDidLoad
{
[super viewDidLoad];
self.i=0;
//建立一個用來顯示序號的lable控件
UILabel *headlab=[[UILabel alloc]initWithFrame:CGRectMake(20, 10, 300, 30)];

// [headlab setText:@"1/5"];
[headlab setTextAlignment:NSTextAlignmentCenter];
[headlab setTextColor:[UIColor blackColor]];

[self.view addSubview:headlab];
self.firstlab=headlab;



//建立一個裝載圖片的控件
UIImageView *potoimg=[[UIImageView alloc]initWithFrame:CGRectMake(POTOIMGX, POTOIMGY, POTOIMGW, POTOIMGH)];

UIImage *image=[UIImage imageNamed:@"biaoqingdi"];
potoimg.image=image;

[self.view addSubview:potoimg];
self.icon=potoimg;

//建立最下邊的描述圖片的lable控件
UILabel *desclab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)];
// [desclab setText:@"表情弱爆了！"];
[desclab setTextAlignment:NSTextAlignmentCenter];
[self.view addSubview:desclab];
self.lastlab=desclab;


//建立兩個方向鍵按鈕
//設置爲自定義類型
//1.使用類建立對象
UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];

//2.設置對象的屬性（不要忘記設置座標）
leftbtn.frame=CGRectMake(0, self.view.center.y, 40, 40);
[leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];
[leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];

//3.提交對象到視圖
[self.view addSubview:leftbtn];

self.leftbtn=leftbtn;
[leftbtn addTarget:self action:@selector(leftclick:) forControlEvents:UIControlEventTouchUpInside];


UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];

rightbtn.frame=CGRectMake(POTOIMGX+POTOIMGW+10, self.view.center.y, 40, 40);
[rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];
[rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];

[self.view addSubview:rightbtn];

self.rightbtn=rightbtn;
[rightbtn addTarget:self action:@selector(rightclick:) forControlEvents:UIControlEventTouchUpInside];
[self change];
}

-(void)change
{
self.icon.image=[UIImage imageNamed:self.array[self.i][@"name"]];
self.lastlab.text=self.array[self.i][@"desc"];

[self.firstlab setText:[NSString stringWithFormat:@"%d/5",self.i+1]];

self.leftbtn.enabled=(self.i!=0);
self.rightbtn.enabled=(self.i!=4);

}

//array的get方法
-(NSArray *)array
{
NSLog(@"須要獲取數組");
//只實例化一次
if (_array==nil) {

NSString *path=[[NSBundle mainBundle] pathForResource:@"data" ofType:@"plist"];
//數組的數據從文件獲取
// _array=[NSArray arrayWithContentsOfFile:path];
_array=[[NSArray alloc]initWithContentsOfFile:path];
//打印查看包的位置
NSLog(@"%@",path);

NSLog(@"實例化數組");
}

return _array;
}

//向右按鍵
-(void)rightclick:(UIButton *)btn
{
self.i++;
[self change];
}

//向左按鍵
-(void)leftclick:(UIButton *)btn
{
self.i--;
[self change];
}

- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}

@end

（4）plist文件

（5）實現效果

5、補充

開發思路：

1.完成基本功能

2.考慮性能

（1）（初始化操做，能夠直接調用change進行）

（2）由於要控制序號和圖片兩個變量，因此考慮使用字典代替掉switch

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

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

（5）懶加載（須要的時候才加載，那麼何時是須要的時候，及調用get方法的時候）

（6）每次都來一下？效率低下—》只有第一次調用get方法時爲空，此時實例化並創建數組，其餘時候直接返回成員變量（僅僅執行一次）

注意點：

1.方法的調用堆棧（順序）。

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

3.bundle-包（只讀）