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

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

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

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

设置背景图片:

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

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

@property (weak, nonatomic) IBOutlet UILabel *pageLabel;

@end

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

定义一个图片数组:

@interface ViewController ()
@property NSArray *imageArr;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
     [email protected][@"girl0.jpg",@"girl1.jpg",@"girl2.jpg"];
}

上一张的代码:

//显示上一张
- (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];

}

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

 5.最终效果如下:

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

ViewController.m中的代码:

//
//  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.
     [email protected][@"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
时间: 2024-08-17 00:29:22

iOS开发-简单的图片查看器的相关文章

Qt项目实战2:简单的图片查看器(1)

在博文http://www.cnblogs.com/hancq/p/5817108.html中介绍了使用空的Qt项目创建带有菜单栏.工具栏的界面. 这里,使用一个简单的图片查看器项目,来熟悉一下Qt的图片显示和基本操作. 该项目分为两部分: (1)实现图片的打开.关闭.居中显示.上一张/下一张切换 (2)实现图片的放大.缩小.左旋.右旋.另存为等操作 需要用的Qt类: QFileDialog QImage QPixmap QFileInfo 使用空的Qt项目创建带有菜单栏和工具栏的界面的操作参考

最简单的图片查看器

最简单的图片查看器,支持放大.缩小.鼠标拖动. 下面是代码,非常简单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pic view</title> </head> <body> <div id="pic" class="pic"

iOS开发------简单实现图片多选功能(AssetsLibrary篇)

AssetsLibrary.framework是iOS7.0之前用来获取手机所有的媒体资源的一个静态库,在iOS8.0之后完全可以用Photo.framework来代替,但因为涉及到适配iOS7,所以这个库用的还是比较多的. 实际上,多选图片有很多很好用的第三方,但找到一个完全符合自己需求的第三方也不是那么容易,就算找到,如果不懂,也不是很好修改代码才对,所以了解一下这个库也是很有必要的,这里就记录一下过程中的认识与问题. 如果小伙伴有什么好玩的库,还请介绍一下,很希望能和喜欢钻研技术的你们一起

iOS学习 - scrollView(图片查看器)

// // YJViewController.m // 07-scrollView-查看大图 // // Created by JACKY-MAC on 15-6-17. // Copyright (c) 2015年 www.train.com. All rights reserved. // #import "YJViewController.h" @interface YJViewController ()<UIScrollViewDelegate> @property

制作手机使用的网页图片查看器

这几天抽空在为项目开发一个量身的图片查看器,目前已初步完成需求 开发场景是:在一个多文件下载展示列表中,如检测某些文件为图片时,则点击该文件时打开图片查看器展示该图片,并将列表内其它图片同时展示查看器队列内,可供前后滑动查看及其它附带功能 乍一听功能点似乎有点多而且有些复杂,需要梳理一下 功能点整理 首先,我们要获得点击的图片文件对象及符合条件的图片文件对象集 其次,图片查看器的制作及图片队列展示 然后,图片友好加载方式 最后,图片查看器触摸滑动及滑动后相关功能的实现 简单整理了一下,好像也不多

Android笔记二十七.Bitmap之简易图片查看器

转载请表明出处:http://blog.csdn.net/u012637501(嵌入式_小J的天空) 为了增强用户之间的交互,Android系统中提供了一些API和部件给我们开发美观有趣的应用.比如Android系统提供了ImageView来显示静态图片.AnimationDrawble来开发逐帧动画以及通过Animation对普通图片使用不减动画等.另外,Android应用中的图片不仅包括*.png.*.jpg.*.gif等格式的位图,也包括使用XML资源文件定义的各种Drawable对象.关

发布两款JQ小插件(图片查看器 + 分类选择器),开源

图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer(".viewer-item"); 它的实现其实也没啥复杂的原理,唯一觉得可说的地方是图片展开的过程 —— 从小变大动态过程的实现.主要是靠这一段代码实现的: $(this).css({"top": win_h / 2 + sroll_t, "margin-l

require、backbone等重构手机图片查看器

本文是对之前的部分补充,也是对最近学习require.backbone的一次实例化的实践,希望对正在学习理解中的同学们有帮助 前文请前往:制作手机使用的网页图片查看器 新手机图片查看器 网页部分 require引入是重点,指明了主函数所在文件路径 <!doctype html> <html lang="zh-cn"> <head> <title>webapp图片查看器</title> <meta charset=&quo

WPF下的仿QQ图片查看器

本例中的大图模式使用图片控件展示,监听控件的鼠标滚轮事件和移动事件,缩略图和鹰眼模式采用装饰器对象IndicatorObject和Canvas布局.百分比使用一个定时器,根据图片的放大倍数计算具体的数值显示. 首先看看效果图: 以下开始绘制图片 定义缩略图上白色的矩形,这其实是一个Indicator,它的外围是一个Canvas,然后缩略图是一个Image控件 internal class IndicatorObject : ContentControl { private MaskCanvas