ios 图片合成幻灯片_为iPad构建iOS幻灯片应用程序

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
浏览器中XML文件(Lisitng 1)的屏幕截图

图1显示了清单1中 XML格式的文本。 结果因浏览器而异,因为这只是简单的XML(浏览器之间没有标准)。

要测试URL是否正确:

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

您应该看到类似于图2的内容

图2.服务器上的一张照片
示例照片CRW_1488.jpg的屏幕截图,显示了年轻女孩的脸

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
Image View控件的属性屏幕的屏幕截图

您需要对“模式”和“背景”进行两个修改。 将“模式”设置为“ 宽高比适合”,以便缩放图像,但仍保留原始的宽高比。 如果您不使用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.来自服务器的第一张图片
在浏览器中显示的图像(女孩的脸)的屏幕截图

如果看不到图像,则可能是对imgViewsetImage方法调用造成了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函数将查看标签名称,以查看其是否为照片标签。 如果是,则didStartElementurl属性的值添加到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/opensource/library/x-iosslideshow/index.html

ios 图片合成幻灯片

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值