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)change
101 {
102     [self.firstlab setText:[NSString stringWithFormat:@"%d/5",self.i+1]];
103     switch (self.i) {
104         case 0:
105             self.lastlab.text=@"什么表情都弱爆了!";
106             self.icon.image=[UIImage imageNamed:@"biaoqingdi"];
107             break;
108         case 1:
109             self.lastlab.text=@"病例";
110             self.icon.image=[UIImage imageNamed:@"bingli"];
111             break;
112         case 2:
113            self.lastlab.text=@"王八";
114             self.icon.image=[UIImage imageNamed:@"wangba"];
115             break;
116         case 3:
117            self.lastlab.text=@"吃牛扒";
118             self.icon.image=[UIImage imageNamed:@"chiniupa"];
119             break;
120         case 4:
121              self.lastlab.text=@"蛋疼!";
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 *)btn
133 {
134     self.i++;
135     [self change];
136     //NSLog(@"点我了");
137 }
138 -(void)leftclick:(UIButton *)btn
139 {
140     self.i--;
141     [self change];
142 }
143 - (void)didReceiveMemoryWarning
144 {
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 *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 }
技术分享

四、使用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 *)array
111 {
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 *)btn
131 {
132     self.i++;
133     [self change];
134 }
135 
136 //向左按键
137 -(void)leftclick:(UIButton *)btn
138 {
139     self.i--;
140     [self change];
141 }
142 
143 - (void)didReceiveMemoryWarning
144 {
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-包(只读)

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。