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

十度 IOS 2015年12月01日 收藏

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

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

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

设置背景图片:

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

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

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

定义一个图片数组:

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

上一张的代码:

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

 下一张代码:

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

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

 5.最终效果如下:

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

ViewController.m中的代码:

  1. //
  2. // ViewController.m
  3. // MyPicture
  4. //
  5. // Created by keso on 15/1/17.
  6. // Copyright (c) 2015年 keso. All rights reserved.
  7. //
  8.  
  9. #import "ViewController.h"
  10.  
  11. @interface ViewController ()
  12. @property NSArray *imageArr;
  13. @end
  14.  
  15. @implementation ViewController
  16.  
  17. - (void)viewDidLoad {
  18. [super viewDidLoad];
  19. // Do any additional setup after loading the view, typically from a nib.
  20. _imageArr=@[@"girl0.jpg",@"girl1.jpg",@"girl2.jpg"];
  21. }
  22.  
  23. - (void)didReceiveMemoryWarning {
  24. [super didReceiveMemoryWarning];
  25. // Dispose of any resources that can be recreated.
  26. }
  27. //显示上一张
  28. - (IBAction)preview:(id)sender {
  29. NSInteger currentIndex=[[[_pageLabel text] substringToIndex:1] integerValue];
  30. NSInteger allCount=[_imageArr count];
  31. if (currentIndex==1) {
  32. currentIndex=allCount;
  33. }else{
  34. currentIndex=currentIndex-1;
  35. }
  36. //设置标签
  37. [_pageLabel setText:[NSString stringWithFormat:@"%ld/%ld",currentIndex,(long)allCount]];
  38. //获取图片的名称
  39. NSString *imageName=[NSString stringWithFormat:@"girl%ld.jpg",(long)currentIndex-1];
  40. UIImage *image=[UIImage imageNamed:imageName];
  41. [_imageView setImage:image];
  42. }
  43. //显示下一张
  44. - (IBAction)nextView:(id)sender {
  45. //截取标签上面的数字
  46. NSInteger currentIndex=[[[_pageLabel text] substringToIndex:1] integerValue];
  47. NSInteger allCount=[_imageArr count];
  48. if (currentIndex==allCount) {
  49. currentIndex=0;
  50. }
  51. NSString *imageName=[NSString stringWithFormat:@"girl%ld.jpg",(long)currentIndex];
  52. [_pageLabel setText:[NSString stringWithFormat:@"%ld/%ld",currentIndex+1,(long)allCount]];
  53. UIImage *image=[UIImage imageNamed:imageName];
  54. [_imageView setImage:image];
  55. }
  56.  
  57. @end