iOS开发-简单的图片查看器

现在你只要拿着手机,不管你Android还是iOS,新闻类的App不可避免都有一个功能就是图片查看,做个专题,查看一下内容,App Store中也有专门针对图片浏览的App,鉴于目前所知有限,无法做到那么高大上的App,简单的做个美女查看的Demo。没有太多的功能,上一张,下一张,标签,图片,简简单的,深刻的感觉到知识就是力量,目前知识有限的结果就是Demo简单,且学且珍惜吧。

1.新建项目(如果不会可以参考本人之前的文章),然后在StoryBoard中进行布局,将Girl文件夹中的图片拖入项目中;

iOS开发-简单的图片查看器

2.将UIImageView,UILabel,UIButton拖入StoryBoard中,并且设置背景图片;

iOS开发-简单的图片查看器

设置背景图片:

iOS开发-简单的图片查看器

3.ViewController.h中定义成员变量:

1
2
3
4
5
6
7
8
9
10
#import <UIKit/UIKit.h>
 
@interface ViewController : UIViewController
 
@property (weak, nonatomicIBOutlet UIImageView *imageView;
 
 
@property (weak, nonatomicIBOutlet UILabel *pageLabel;
 
@end

4.上一张和下一张的事件代码:

定义一个图片数组:

1
2
3
4
5
6
7
8
9
10
11
@interface ViewController ()
@property NSArray *imageArr;
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
     _imageArr=@[@"girl0.jpg",@"girl1.jpg",@"girl2.jpg"];
}

上一张的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//显示上一张
- (IBAction)preview:(id)sender {
    NSInteger currentIndex=[[[_pageLabel text] substringToIndex:1] integerValue];
    NSInteger allCount=[_imageArr count];
    
    if (currentIndex==1) {
        currentIndex=allCount;
    }else{
        currentIndex=currentIndex-1;
    }
    //设置标签
    [_pageLabel setText:[NSString stringWithFormat:@"%ld/%ld",currentIndex,(long)allCount]];
    //获取图片的名称
    NSString *imageName=[NSString stringWithFormat:@"girl%ld.jpg",(long)currentIndex-1];
     
    UIImage *image=[UIImage imageNamed:imageName];
    [_imageView setImage:image];
     
}

 下一张代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//显示下一张
- (IBAction)nextView:(id)sender {
    //截取标签上面的数字
    NSInteger currentIndex=[[[_pageLabel text] substringToIndex:1] integerValue];
    NSInteger allCount=[_imageArr count];
    if (currentIndex==allCount) {
        currentIndex=0;
    }
    NSString *imageName=[NSString stringWithFormat:@"girl%ld.jpg",(long)currentIndex];
     
    [_pageLabel setText:[NSString stringWithFormat:@"%ld/%ld",currentIndex+1,(long)allCount]];
    UIImage *image=[UIImage imageNamed:imageName];
    [_imageView setImage:image];
     
}

以上的代码基本上都是OC基础,UIImage设置图片的时候只需要传递一下图片名称即可,不需要传递路径;

 5.最终效果如下:

iOS开发-简单的图片查看器

效果很简单,就是在上一张和下一张到临界点的时候判断一下,两者的代码类似,其实可以封装一下,周末愉快;

ViewController.m中的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
//
//  ViewController.m
//  MyPicture
//
//  Created by keso on 15/1/17.
//  Copyright (c) 2015年 keso. All rights reserved.
//
 
#import "ViewController.h"
 
@interface ViewController ()
@property NSArray *imageArr;
@end
 
@implementation ViewController
 
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
     _imageArr=@[@"girl0.jpg",@"girl1.jpg",@"girl2.jpg"];
}
 
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
//显示上一张
- (IBAction)preview:(id)sender {
    NSInteger currentIndex=[[[_pageLabel text] substringToIndex:1] integerValue];
    NSInteger allCount=[_imageArr count];
    
    if (currentIndex==1) {
        currentIndex=allCount;
    }else{
        currentIndex=currentIndex-1;
    }
    //设置标签
    [_pageLabel setText:[NSString stringWithFormat:@"%ld/%ld",currentIndex,(long)allCount]];
    //获取图片的名称
    NSString *imageName=[NSString stringWithFormat:@"girl%ld.jpg",(long)currentIndex-1];
     
    UIImage *image=[UIImage imageNamed:imageName];
    [_imageView setImage:image];
     
}
//显示下一张
- (IBAction)nextView:(id)sender {
    //截取标签上面的数字
    NSInteger currentIndex=[[[_pageLabel text] substringToIndex:1] integerValue];
    NSInteger allCount=[_imageArr count];
    if (currentIndex==allCount) {
        currentIndex=0;
    }
    NSString *imageName=[NSString stringWithFormat:@"girl%ld.jpg",(long)currentIndex];
     
    [_pageLabel setText:[NSString stringWithFormat:@"%ld/%ld",currentIndex+1,(long)allCount]];
    UIImage *image=[UIImage imageNamed:imageName];
    [_imageView setImage:image];
     
}
 
@end
本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/4230348.html,如需转载请自行联系原作者
上一篇:强大的jQuery图片查看器插件Viewer.js


下一篇:Zabbix 中文显示(学习笔记四)