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是否正确：

1. 选择一个URL。
2. 将其复制并粘贴到浏览器URL区域。
3. 按回车键。

您应该看到类似于图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.0target: selfselector: @selector(handleTimer:)userInfo: nilrepeats: 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 图片合成幻灯片