iOS开发中实现一个简单的图片浏览器的实例讲解

程序员文章站 2023-11-14 10:20:34

一、程序实现要求 1.要求 2. 界面分析（1）需要读取或修改属性的控件需要设置属性序号标签图片图片描述左边按钮...

一、程序实现要求

1.要求

2. 界面分析

（1）需要读取或修改属性的控件需要设置属性

序号标签
图片
图片描述
左边按钮
右边按钮

（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

三、程序优化

复制代码代码如下:

//
// 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

复制代码代码如下:

@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];部分有很严格的顺序要求，并不人性化，可以考虑使用懒加载特性
//    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];
    //这是一个初始化方法，调用change可以完成初始化的工作
    [self change];
}

-(void)change
{
    //每次调用都需要创建？有没有什么解决办法？
//    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];


    //设置照片
    //先根据self.i取出数组中的元素，再取出元素（字典）中键值对应的值
//    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;
//    }
    //控制按钮的点击，如果为5则右键失效，如果为1，则左键失效
    self.leftbtn.enabled=(self.i!=0);
    self.rightbtn.enabled=(self.i!=4);

}

//array的get方法
-(nsarray *)array
{
    nslog(@"需要获取数组");
    //只实例化一次
    if (_array==nil) {
        nslog(@"实例化数组");
        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的，示例代码如下：

复制代码代码如下:

@property (nonatomic, strong) uiimageview *icon;

2> 在属性的getter方法中实现懒加载，示例代码如下：

复制代码代码如下:

- (uiimageview *)icon

{

if (!_icon) {

// 计算位置参数

cgfloat imagew = 200;

cgfloat imagex = (320 - imagew) / 2;

cgfloat imageh = 200;

cgfloat imagey = 80;

// 实例化图像视图

_icon = [[uiimageview alloc] initwithframe:cgrectmake(imagex, imagey, imagew, imageh)];

// 将图像视图添加到主视图

[self.view addsubview:_icon];

}

return _icon;

}

四、使用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)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文件

iOS开发中实现一个简单的图片浏览器的实例讲解

（5）实现效果

iOS开发中实现一个简单的图片浏览器的实例讲解

五、补充

开发思路：

1.完成基本功能

2.考虑性能

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

（2）因为要控制序号和图片两个变量，所以考虑使用字典代替掉switch

（3）每次点击，字典都需要创建一次，效率地下，可以考虑创建的这部分拿到初始化方法中去，这样就只需要创建一次就ok了。

（4）考虑缺点（对代码的顺序要求极其严格）

（5）懒加载（需要的时候才加载，那么什么时候是需要的时候，及调用get方法的时候）

（6）每次都来一下？效率低下—》只有第一次调用get方法时为空，此时实例化并建立数组，其他时候直接返回成员变量（仅仅执行一次）

注意点：

1.方法的调用堆栈（顺序）。

2.使用plist：让数据的操作更加灵活，把数据弄到外面去，解除耦合性，让耦合性不要太强。实际上是一个xml，是苹果定义的一种特殊格式的xml。

3.bundle-包（只读）

上一篇： bootstrap table表格插件使用详解

下一篇： IOS程序开发之跳转短信发送界面实现发送短信功能

iOS开发中实现一个简单的图片浏览器的实例讲解

实例讲解设计模式中的命令模式在iOS App开发中的运用

iOS开发中实现一个简单的图片浏览器的实例讲解

实例讲解如何在iOS应用开发中使用设计模式中的代理模式

实例讲解iOS应用的设计模式开发中的Visitor访问者模式

iOS开发中使用UIScrollView实现无限循环的图片浏览器

iOS开发中实现新闻图片的无限循环展示的方法

简单讲解iOS应用开发中的MD5加密的相关使用

在iOS开发的Quartz2D使用中实现图片剪切和截屏功能

讲解iOS开发中对音效和音乐播放的简单实现

ios开发中换肤的简单实现方案