iOS開發(fā)中圖片瀏覽器的實(shí)例講解

2020-02-19 15:52:34

字體：大中小

供稿：網(wǎng)友

現(xiàn)在大部分人都在使用智能手機(jī)，不管你是安卓還是iOS系統(tǒng)，應(yīng)用程序也有一個(gè)特殊的圖像瀏覽程序，鑒于目前知識(shí)有限，程序員可能不能做這么高的應(yīng)用程序，下面是武林技術(shù)頻道小編為大家?guī)淼膇OS開發(fā)中圖片瀏覽器的實(shí)例講解。

一、程序?qū)崿F(xiàn)要求

1.要求

201611392120159.png (663×410)

2. 界面分析

（1）需要讀取或修改屬性的控件需要設(shè)置屬性

序號(hào)標(biāo)簽
圖片
圖片描述
左邊按鈕
右邊按鈕

（2）需要監(jiān)聽響應(yīng)事件的對(duì)象，需要添加監(jiān)聽方法

左邊按鈕
右邊按鈕

二、實(shí)現(xiàn)基本功能的程序

復(fù)制代碼代碼如下:

//
//? 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;
??? //創(chuàng)建一個(gè)用來顯示序號(hào)的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;
???
???
???
??? //創(chuàng)建一個(gè)裝載圖片的控件
??? 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;
???
???
???
??? //創(chuàng)建最下邊的描述圖片的lable控件
??? UILabel *desclab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)];
?? // [desclab setText:@"表情弱爆了！"];
??? [desclab setTextAlignment:NSTextAlignmentCenter];
??? [self.view addSubview:desclab];
??? self.lastlab=desclab;
???
???
??? //創(chuàng)建兩個(gè)方向鍵按鈕
??? //設(shè)置為自定義類型
??? //1.使用類創(chuàng)建對(duì)象
??? UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];
???
??? //2.設(shè)置對(duì)象的屬性（不要忘記設(shè)置坐標(biāo)）
??? 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.提交對(duì)象到視圖
??? [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];
???
??? //這是一個(gè)初始化方法，調(diào)用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;
??? }
??? //控制按鈕的點(diǎn)擊，如果為5則右鍵失效，如果為1，則左鍵失效
??? self.leftbtn.enabled=(self.i!=0);
??? self.rightbtn.enabled=(self.i!=4);

}

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

@end

三、程序優(yōu)化

復(fù)制代碼代碼如下:

//
//? 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)NSArray *array;

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

復(fù)制代碼代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
??? [super viewDidLoad];
??? self.i=0;
??? //創(chuàng)建一個(gè)用來顯示序號(hào)的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;
???
???
???
??? //創(chuàng)建一個(gè)裝載圖片的控件
??? 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;
???
???
???
??? //創(chuàng)建最下邊的描述圖片的lable控件
??? UILabel *desclab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)];
?? // [desclab setText:@"表情弱爆了！"];
??? [desclab setTextAlignment:NSTextAlignmentCenter];
??? [self.view addSubview:desclab];
??? self.lastlab=desclab;
???
???
???
??? //創(chuàng)建兩個(gè)方向鍵按鈕
??? //設(shè)置為自定義類型
??? //1.使用類創(chuàng)建對(duì)象
??? UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];
???
??? //2.設(shè)置對(duì)象的屬性（不要忘記設(shè)置坐標(biāo)）
??? 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.提交對(duì)象到視圖
??? [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];
??? //放在這里的話，只會(huì)創(chuàng)建一次，但是這個(gè)部分和[self change];部分有很嚴(yán)格的順序要求，并不人性化，可以考慮使用懶加載特性
//??? NSDictionary *dict1=@{@"name": @"biaoqingdi",@"desc":@"什么表情都弱爆了！"};
//??? NSDictionary *dict2=@{@"name": @"bingli",@"desc":@"病例"};
//??? NSDictionary *dict3=@{@"name": @"wangba",@"desc":@"烏龜"};
//??? NSDictionary *dict4=@{@"name": @"chiniupa",@"desc":@"吃牛扒"};
//??? NSDictionary *dict5=@{@"name": @"danteng",@"desc":@"蛋疼"};
//???
//??? self.array=@[dict1,dict2,dict3,dict4,dict5];
??? //這是一個(gè)初始化方法，調(diào)用change可以完成初始化的工作
??? [self change];
}

-(void)change
{
??? //每次調(diào)用都需要?jiǎng)?chuàng)建？有沒有什么解決辦法？
//??? NSDictionary *dict1=@{@"name": @"biaoqingdi",@"desc":@"什么表情都弱爆了！"};
//??? NSDictionary *dict2=@{@"name": @"bingli",@"desc":@"病例"};
//??? NSDictionary *dict3=@{@"name": @"wangba",@"desc":@"烏龜"};
//??? NSDictionary *dict4=@{@"name": @"chiniupa",@"desc":@"吃牛扒"};
//??? NSDictionary *dict5=@{@"name": @"danteng",@"desc":@"蛋疼"};
//???
//??? NSArray *array=@[dict1,dict2,dict3,dict4,dict5];
???
???
??? //設(shè)置照片
??? //先根據(jù)self.i取出數(shù)組中的元素，再取出元素（字典）中鍵值對(duì)應(yīng)的值
//??? self.icon.image=[UIImage imageNamed:array[self.i][@"name"]];
//??? self.lastlab.text=array[self.i][@"desc"];
?? // NSLog(@"%@",array[self.i][@"desc"]);
???
??? 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]];
???
//??? 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;
//??? }
??? //控制按鈕的點(diǎn)擊，如果為5則右鍵失效，如果為1，則左鍵失效
??? self.leftbtn.enabled=(self.i!=0);
??? self.rightbtn.enabled=(self.i!=4);

}

//array的get方法
-(NSArray *)array
{
??? NSLog(@"需要獲取數(shù)組");
??? //只實(shí)例化一次
??? if (_array==nil) {
??????? NSLog(@"實(shí)例化數(shù)組");
??????? NSDictionary *dict1=@{@"name": @"biaoqingdi",@"desc":@"什么表情都弱爆了！"};
??????? NSDictionary *dict2=@{@"name": @"bingli",@"desc":@"病例"};
??????? NSDictionary *dict3=@{@"name": @"wangba",@"desc":@"烏龜"};
??????? NSDictionary *dict4=@{@"name": @"chiniupa",@"desc":@"吃牛扒"};
??????? NSDictionary *dict5=@{@"name": @"danteng",@"desc":@"蛋疼"};
??????? _array=@[dict1,dict2,dict3,dict4,dict5];
??? }
//??? NSDictionary *dict1=@{@"name": @"biaoqingdi",@"desc":@"什么表情都弱爆了！"};
//??? NSDictionary *dict2=@{@"name": @"bingli",@"desc":@"病例"};
//??? NSDictionary *dict3=@{@"name": @"wangba",@"desc":@"烏龜"};
//??? NSDictionary *dict4=@{@"name": @"chiniupa",@"desc":@"吃牛扒"};
//??? NSDictionary *dict5=@{@"name": @"danteng",@"desc":@"蛋疼"};
???
?? // _array=@[dict1,dict2,dict3,dict4,dict5];
??? return _array;
}

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

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

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

@end

說明：

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

復(fù)制代碼代碼如下:

@property (nonatomic, strong) UIImageView *icon;

2> 在屬性的getter方法中實(shí)現(xiàn)懶加載，示例代碼如下：

復(fù)制代碼代碼如下:

- (UIImageView *)icon

{

??? if (!_icon) {

??????? // 計(jì)算位置參數(shù)

??????? CGFloat imageW = 200;

??????? CGFloat imageX = (320 - imageW) / 2;

??????? CGFloat imageH = 200;

??????? CGFloat imageY = 80;

??????? // 實(shí)例化圖像視圖

??????? _icon = [[UIImageView alloc] initWithFrame:CGRectMake(imageX, imageY, imageW, imageH)];

??????? // 將圖像視圖添加到主視圖

??????? [self.view addSubview:_icon];

??? }

??? return _icon;

}

四、使用plist文件

（1）使用Plist文件的目的：將數(shù)據(jù)與代碼分離

（2）加載方法：

復(fù)制代碼代碼如下:

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

_imageList = [NSArray arrayWithContentsOfFile:path];

提示：通常在方法中出現(xiàn)File字眼，通常需要傳遞文件的全路徑作為參數(shù)

（3）代碼示例

復(fù)制代碼代碼如下:

//
//? 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)NSArray *array;

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

復(fù)制代碼代碼如下:

@implementation YYViewController

- (void)viewDidLoad
{
??? [super viewDidLoad];
??? self.i=0;
??? //創(chuàng)建一個(gè)用來顯示序號(hào)的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;
???
???
???
??? //創(chuàng)建一個(gè)裝載圖片的控件
??? 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;
???
??? //創(chuàng)建最下邊的描述圖片的lable控件
??? UILabel *desclab=[[UILabel alloc]initWithFrame:CGRectMake(20, 400, 300, 30)];
?? // [desclab setText:@"表情弱爆了！"];
??? [desclab setTextAlignment:NSTextAlignmentCenter];
??? [self.view addSubview:desclab];
??? self.lastlab=desclab;
???
???
??? //創(chuàng)建兩個(gè)方向鍵按鈕
??? //設(shè)置為自定義類型
??? //1.使用類創(chuàng)建對(duì)象
??? UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];
???
??? //2.設(shè)置對(duì)象的屬性（不要忘記設(shè)置坐標(biāo)）
??? 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.提交對(duì)象到視圖
??? [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(@"需要獲取數(shù)組");
??? //只實(shí)例化一次
??? if (_array==nil) {
????
??????? NSString *path=[[NSBundle mainBundle] pathForResource:@"data" ofType:@"plist"];
??????? //數(shù)組的數(shù)據(jù)從文件獲取
?????? // _array=[NSArray arrayWithContentsOfFile:path];
??????? _array=[[NSArray alloc]initWithContentsOfFile:path];
??????? //打印查看包的位置
??????? NSLog(@"%@",path);
???????
?????? NSLog(@"實(shí)例化數(shù)組");
??? }

??? 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文件

201611392221000.png (868×338)