IOS基础UI之(二)图片预览

实现效果:

(1)点击按钮,更改显示的图片,描述和页码

(2)当显示第一张图片时,左按钮不能点击。最后一张时,右按钮不能点击(变灰)

掌握知识:

(1)学会获取plist资源。

(2)学会懒加载的使用。

效果如下:

实现思路:

(1)拖去相应的控件到界面,布局界面。

(2)拖线设置控件的属性和绑定按钮方法

(3)编写业务逻辑代码

首先我们设置好plist文件,plist文件作用是存放一定规则的数据。懂得java的同学应该知道,这家伙有点像xml文件,但是解析的时候比xml简单多了

下面看看plist到底长出什么样子的。可以看出,这里存放的是数组,数组里面是Dictionary集合

话不多说,马上看看程序中的实现代码

ViewController.m


//
//  ViewController.m
//  图片浏览器03-plist
//
//  Created by zxh on 15/8/21.
//  Copyright (c) 2015年 zxh. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
//页码
@property (weak, nonatomic) IBOutlet UILabel *noLable;
//显示图片
@property (weak, nonatomic) IBOutlet UIImageView *iconImage;
//描述
@property (weak, nonatomic) IBOutlet UILabel *descLable;
//左按钮
@property (weak, nonatomic) IBOutlet UIButton *leftBtn;
//右按钮
@property (weak, nonatomic) IBOutlet UIButton *rightBtn;
//存储资料数组
@property (strong,nonatomic) NSArray * array;
//下标
@property (assign,nonatomic) int index;

//上一张
- (IBAction)previous;
//下一张
- (IBAction)next;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.index = -1;
    [self next];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

/**
 *  array get 方法: 懒加载资源文件,并存储到数组中
 *
 *  @return  图片数组
 */
-(NSArray *)array{
    if (_array == nil) {
        //初始化数据
        //file:全路径
        //NSBundle:一个NSBundle代表一个文件夹
        //利用mianBundle就可以访问手机里面的任何资源
        NSBundle *bundle = [NSBundle mainBundle];

        //获取imageData.plist的全路径
        NSString *path = [bundle pathForResource:@"imageData" ofType:@"plist"];

        //图片自由存储到数组中
        _array = [NSArray arrayWithContentsOfFile:path];
    }
    return _array;
}

/**
 *  改变显示的方法
 */
-(void) changeData{
    //1.设置标题
    self.noLable.text = [NSString stringWithFormat:@"%d/%lu",self.index,self.array.count];

    //2.获取存储到数组中的数据
    NSMutableDictionary *imagedic = self.array[self.index];

    //3.设置图片
    self.iconImage.image = [UIImage imageNamed:imagedic[@"icon"]];

    //4.设置描述
    self.descLable.text = imagedic[@"desc"];

    //5.设置按钮状态
    self.leftBtn.enabled = (self.index!=0);
    self.rightBtn.enabled = (self.index != self.array.count-1);
}

/**
 *  上一张
 */
- (IBAction)previous {
    self.index --;
    [self changeData];
}

/**
 *  下一张
 */
- (IBAction)next {
    self.index ++;
    [self changeData];
}
@end

备注:

1.何为懒加载?

懒加载(在java中又称懒汉式),意思是没有用到时不会去加载资源(执行代码),用到的时候才去加载。 与懒加载对立的是饥汉式,饥汉式是程序启动的时候就去加载资源(执行代码)。

2. 查找模拟器手机安装app 的imageData.plis文件在什么地方?

可参考文章:找不到iphone simulator?

好久都找不到,目录太深了,最好的办法就是代码打印出来。我的xcode是6.4,路径如下:

/Users/username/Library/Developer/CoreSimulator/Devices/833F498A-D2E2-4E30-BD6C-E656056080EB/data/Containers/Bundle/Application/504E2C80-8C88-48D8-9FD9-D5EEB64A8A84/图片浏览器03-plist.app/imageData.plist

username是你的用户名,找到图片浏览器03-plist.app点击显示包内容,即可看到app里面的资源文件。

----------------------文章至此!

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-07-31 10:35:09

IOS基础UI之(二)图片预览的相关文章

html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

原文:html5 图片上传,支持图片预览.压缩.及进度显示,兼容IE6+及标准浏览器 以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上传组件添加了单独的图片上传UI,支持图片预览和缩放(通过调整图片的大小以实现图片压缩). 上传组件特点 轻量级,不依赖任何JS库,核心代码(Q.Uploader.js)仅约700行,min版本加起来不到12KB 纯

移动端图片操作(二)——预览、旋转、合成

在上一节中已经提到了预览,预览可以通过data: URL格式或URL对象. var file = upload.files[0]; //URL对象 var url = URL.createObjectURL(file); var img = new Image(); img.style.width = '100%'; img.src = url; img.onload = function(e) { window.URL.revokeObjectURL(this.src); //销毁 } //d

dropzonejs中文翻译手册 DropzoneJS是一个提供文件拖拽上传并且提供图片预览的开源类库.

http://wxb.github.io/dropzonejs.com.zh-CN/dropzonezh-CN/ 由于项目需要,完成一个web的图片拖拽上传,也就顺便学习和了解了一下前端的比较新的技术:HTML5的api,作为一名前端的菜鸟,没什么可说的,直接分享自己学习的资料: 关于HTML5 的这些新的特性大家可以到Mozilla的开发者社区MDN https://developer.mozilla.org/zh-CN/ 上查HTML5的资料 还有就是发掘到的比较牛逼的一篇博客:http:/

js实现移动端图片预览:手势缩放, 手势拖动,双击放大...

.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > .katex-html { display: block; } .katex-display > .katex > .katex-html > .tag { position: absolute; right: 0px; } .katex { font-style: normal; font

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture(){     var file = $('file_c').value;     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")        }else{      $('both_form')

纯前端的图片预览

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3925827.html ^_^肥仔John 一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前

文件上传之图片预览

一.业界现状分析 有时候我们需要在上传图片之前为用户提供图片预览的功能,HTML5规范出来之前,由于缺少原生的File API支持,我们需要借助Flash或者浏览器插件来满足这种需求.有了HTML5,我们可使用URL或者FileReader对象实现预览功能. 二.应用场景 图片分享类的应用,如Flickr,Facebook.相册应用,如:QQ相册. 虽然139邮箱没有合适的应用场景,但是可将技术预研的成果作为技术储备,好东西总有用得着的时候. 三.编码实现 方式一:window.URL (1).

dwz+jquery+fileupload+springmvc实现文件上传 及图片预览

1 前台jsp:文件的上传利用了iframe实现局部刷新功能.使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jarDiskFileItemFactory fac = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(fac);upload.setHeaderEncoding("utf-8"); Html代

JS魔法堂之实战:纯前端的图片预览

一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前端图片预览的相关资料,经过整理后记录下来以便日后查阅. 二.准备功夫1──FileReader FileReader是HTML5的新特性,用于读取