ios 图片合成幻灯片
为何为iOS设备(如iPad或iPhone)编写应用程序是一个非常受欢迎的活动,这并不奇怪:这些设备功能强大且易于使用。 拥有数百万用户的设备对于应用程序开发非常有利可图。 人们喜欢在iPad和iPhone的精美显示屏上观看照片。
在本文中,学习从头开始构建iOS照片幻灯片应用程序。 您将在服务器上放置一些XML代码和照片,构建iOS应用程序,添加图像视图,获取XML并进行幻灯片动画制作。
建立后端
示例幻灯片演示应用程序的后端实际上只是一个XML文件,您可以将其放在服务器上。 清单1显示了示例XML和一些示例图像。
清单1. photos.xml
<photos>
<photo url="http://localhost/photos/CRW_0675.jpg" />
<photo url="http://localhost/photos/CRW_1488.jpg" />
<photo url="http://localhost/photos/CRW_3273.jpg" />
<photo url="http://localhost/photos/CRW_3296.jpg" />
<photo url="http://localhost/photos/CRW_3303.jpg" />
<photo url="http://localhost/photos/CRW_3359.jpg" />
<photo url="http://localhost/photos/CRW_3445.jpg" />
<photo url="http://localhost/photos/CRW_3752.jpg" />
<photo url="http://localhost/photos/CRW_3754.jpg" />
<photo url="http://localhost/photos/CRW_4525.jpg" />
<photo url="http://localhost/photos/CRW_4547.jpg" />
<photo url="http://localhost/photos/CRW_4700.jpg" />
<photo url="http://localhost/photos/CRW_4860.jpg" />
</photos>
XML非常简单。 <photos>标签包含多个<photo>标签。 每个<photo>标签都有要显示的图像的URL。 该URL必须是完全限定且绝对的; 客户端应用程序将直接加载URL,而不是通过任何类型的处理相对URL的浏览器加载URL。
要完成后端,请修改XML以包括对照片的引用,然后将该XML上载到服务器上的已知位置。 如果一切按计划进行,那么您应该能够使用Safari(或选择的任何浏览器)浏览到XML,并看到如图1所示的内容 。
图1.服务器上的XML
图1显示了清单1中 XML格式的文本。 结果因浏览器而异,因为这只是简单的XML(浏览器之间没有标准)。
要测试URL是否正确:
- 选择一个URL。
- 将其复制并粘贴到浏览器URL区域。
- 按回车键。
您应该看到类似于图2的内容 。
图2.服务器上的一张照片
XML中的URL之一引用了服务器上的照片。 如果您看不到XML或照片,则需要检查Web服务器配置和URL。 如果在浏览器中看不到照片,则新的iOS应用程序也看不到照片。
构建客户端幻灯片应用程序
配置服务器并上传照片后,您可以开始构建iOS应用程序。 第一步是安装Apple Developer Tools(请参阅参考资料中的链接)。 如果你是:
- 在Pre-Lion中,您需要从Apple Developer Site下载开发人员工具(请参阅参考资料中的链接)。
- 运行Lion,您可以使用Mac App Store下载工具(请参阅参考资料中的链接)。
安装开发人员工具后,运行XCode环境,这是用于iOS和Mac OS X开发的Apple的IDE。 在XCode环境中,选择New Project的菜单选项。 您应该看到用于构建iOS或Mac OS X应用程序的应用程序向导的第一页, 如图3所示 。
图3.应用程序向导
您可以从几种不同的应用程序模板中进行选择。 对于此示例,选择基于视图的应用程序 ,然后单击下一步 。 您应该看到向导的最后一页, 如图4所示 。
图4.项目选项
在向导的第二页上,命名您的应用程序,然后选择默认设备系列(iPad或iPhone)。 示例应用程序的产品名称为slideshow
。 公司标识符字段中的值指示该应用程序位于com.jherrington
命名空间中。 (当然,你可以标识你想选择的任何名称和公司。)选择iPad的器件系列,然后单击下一步 。
项目已创建。 此时,最好总是选择界面左上方的大播放按钮来首次运行您的应用程序。 此步骤将编译所有内容并启动iPad仿真器。
添加图像视图
下一步是添加用于显示图像的图像视图。 iOS框架带有一组丰富的内置控件,可用于构建应用程序。 对于示例,您将使用UIImageView控件。 使用UIImageView,您可以显示已编译到应用程序中,本地存储在设备上或从网站下载的图像。
要添加UIImageView,请打开slideshowControllerView.XIB文件,该文件是slideshowControllerView的用户界面定义文件。 在XIB打开的情况下,转到对象面板,然后选择Image View , 如图5所示 。
图5.将UIImageView对象添加到视图控制器XIB
选择图像视图后,将其拖放到slideshowControllerView上。 通常,IDE会自动缩放控件以适应可用空间。 如果不是,只需拖动控件以调整其大小,直到它填满整个显示区域。
控件在视图上后,设置一些参数以获得应用程序的最佳外观。 图6显示了“图像视图”控件的“属性”屏幕上的设置。
图6.配置UIImageView
您需要对“模式”和“背景”进行两个修改。 将“模式”设置为“ 宽高比适合”,以便缩放图像,但仍保留原始的宽高比。 如果您不使用Aspect Fit,您的图像将进行拉伸和缩放以匹配图像视图的显示区域-最终看起来会很时髦。
因为图像可能并不总是适合可用区域,所以还需要将Background属性设置为Dark Text Color或使用颜色选择器选择深黑色。 默认情况下,此值为白色。 用明亮的白色包围时,大多数照片看起来都不好看。
保存XIB文件,然后移至SlideshowViewController.h文件。 在清单2中进行小的修改。
清单2. SlideshowViewController.h
#import <UIKit/UIKit.h>
@interface slideshowViewController : UIViewController {
IBOutlet UIImageView *imgView;
}
@end
您需要将Outlet
添加到slideshowViewController
,以允许XIB中定义的控件连接到视图控制器类。
添加插座后,返回到XIB文件,选择UIImageView,然后使用连接检查器将UIImageView对象挂钩到slideshowViewController
类中的imgView
变量。
建立连接后,请对幻灯片视图控制器类本身进行代码修改以加载图像。 清单3显示了该类的完整第一个版本。
清单3. SlideshowViewController.m
#import "slideshowViewController.h"
@implementation slideshowViewController
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
NSURL *imageURL = [NSURL URLWithString:@"http://localhost/photos/CRW_0675.jpg"];
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage *image = [UIImage imageWithData:imageData];
[imgView setImage:image];
}
- (void)viewDidUnload
{
[super viewDidUnload];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
@end
slideshowViewController
类中的重要工作在viewDidLoad
方法中完成,该方法现在:
- 从URL加载数据。
- 将其变成图像。
- 在图像视图上使用
setImage
方法显示图像。
此时,您应该运行该应用程序以测试是否出现了图像。 您应该看到类似于图7的内容 ,该图显示了iPad仿真器中显示的图像。
图7.来自服务器的第一张图片
如果看不到图像,则可能是对imgView
的setImage
方法调用造成了imgView
。 验证UIImageView
对象是否已正确连接到imgView
变量。 如果在此之前应用程序失败,则您可能没有正确的URL,或者服务器上的内容不正确。
解析XML
现在,您已经可以在iPad上显示图像了,下一步是加载XML以获取要显示的所有图像的列表。 iOS框架具有内置的XML解析器,因此您只需要创建解析器对象并侦听各种标签的回调。
使用NSXMLParserDelegate
接口扩展该类本身,该接口告诉iOS框架该类能够接收来自XML解析器的回调。 您还需要添加一个名为photos
的数组,其中包含从XML提取的URL列表。 清单4显示了更新。
清单4.带照片的SlideshowViewController.h
#import <UIKit/UIKit.h>
@interface slideshowViewController : UIViewController<NSXMLParserDelegate> {
IBOutlet UIImageView *imgView;
NSMutableArray *photos;
}
@end
在编写更多iOS应用程序时,您会发现使用越来越多的委托来连接各种API。 有用于表,UI元素,GPS回调等的数据回调。 您甚至可以为自己的库创建自己的自定义接口。
要使用XML解析器,请扩展视图控制器类,如清单5所示 。
清单5.带照片的SlideshowViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
photos = [[NSMutableArray alloc] init];
NSXMLParser *photoParser = [[[NSXMLParser alloc]
initWithContentsOfURL:
[NSURL URLWithString:@"http://localhost/photos/index.xml"]] autorelease];
[photoParser setDelegate:self];
[photoParser parse];
NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:0]];
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
UIImage *image = [UIImage imageWithData:imageData];
[imgView setImage:image];
}
- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName
namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName
attributes:(NSDictionary *)attributeDict {
if ( [elementName isEqualToString:@"photo"]) {
[photos addObject:[attributeDict objectForKey:@"url"]];
}
}
现在,该类在viewDidLoad
方法中创建一个解析器,并请求该解析器并从服务器解析XML。 它还将解析器的委托设置回自身,以便获取回调。
在该示例中,您想监听每当遇到标签时都会触发的didStartElement
回调。 然后, didStartElement
函数将查看标签名称,以查看其是否为照片标签。 如果是,则didStartElement
将url
属性的值添加到photos数组。
照片阵列完成后, viewDidLoad
方法继续并将图像设置为阵列中的第一张图像。
运行该应用程序以测试您的进度。 您应该看到在XML中指定的第一个图像出现在模拟器中。 如果没有看到第一张图像,则可能是服务器上的XML有问题。 在didStartElement
方法中设置一个断点,以查看是否被调用。 如果不是,那么您就不会从服务器中获取任何有效的XML。
动画幻灯片
最后一步是使用照片阵列为幻灯片制作动画。 您将需要两件事:
- 计时器
- 用于保存幻灯片中当前位置的变量
将这两项都添加到类定义中,如清单6所示 。
清单6. SlideshowViewController.h完成
#import <UIKit/UIKit.h>
@interface slideshowViewController : UIViewController<NSXMLParserDelegate> {
IBOutlet UIImageView *imgView;
NSMutableArray *photos;
NSTimer *timer;
int currentImage;
}
@end
timer
是一个对象,它将以您指定的时间间隔触发事件。 currentImage
只是对photos数组的索引,您将使用它来遍历所有图像。
清单7显示了幻灯片应用程序代码的最终版本。
清单7. SlideshowViewController.m完成
#import "slideshowViewController.h"
@implementation slideshowViewController
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
#pragma mark - View lifecycle
- (void)viewDidLoad
{
[super viewDidLoad];
photos = [[NSMutableArray alloc] init];
NSXMLParser *photoParser = [[[NSXMLParser alloc]
initWithContentsOfURL:[NSURL URLWithString:
@"http://localhost/photos/index.xml"]] autorelease];
[photoParser setDelegate:self];
[photoParser parse];
currentImage = 0;
NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:0]];
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
[imgView setImage:[UIImage imageWithData:imageData]];
timer = [NSTimer scheduledTimerWithTimeInterval: 5.0
target: self
selector: @selector(handleTimer:)
userInfo: nil
repeats: YES];
}
- (void) handleTimer: (NSTimer *) timer {
currentImage++;
if ( currentImage >= photos.count )
currentImage = 0;
NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:currentImage]];
NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
[imgView setImage:[UIImage imageWithData:imageData]];
}
- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName
namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName
attributes:(NSDictionary *)attributeDict {
if ( [elementName isEqualToString:@"photo"]) {
[photos addObject:[attributeDict objectForKey:@"url"]];
}
}
- (void)viewDidUnload
{
[super viewDidUnload];
}
- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
return YES;
}
@end
清单7中的两个新元素是在viewDidLoad
方法中创建计时器,并添加了handleTimer
方法,该方法在计时器触发时调用。 handleTimer
方法只是增加currentImage
,然后在索引到达数组末尾时滚动索引。 它还使用标准的图像提取逻辑来获取给定索引处的图像并显示它。
计时器有两种模式:它们可以触发一次,也可以连续触发。 在viewDidLoad
方法中,该示例为重复指定YES,以便在应用程序的生命周期中反复调用handleTimer
方法。
结论
在本文中,您创建了一个基本的iOS应用程序。 现在,您可以在几个不同的方向上使用该应用程序。 iOS CoreGraphics框架提供了一组丰富的过渡,您可以使用这些过渡为图像之间的变化设置动画。 您可以在后端使用PHP来动态生成XML。 或者,您甚至可以使用CoreAudio API在整个幻灯片播放后添加一些音乐。
翻译自: https://www.ibm.com/developerworks/web/library/x-iosslideshow/index.html
ios 图片合成幻灯片