小型企业商务应用程序设计及开发系列(3)：自定义视图

教程说明

• 技术工具: iOS SDK
• 操作难度: 普通
• 执行时间: 30 到60分钟

【51CTO译文】欢迎大家阅读小型企业商务应用程序设计及开发系列教程的最后一部分。在第三篇文章中，我们将共同学习如何设计并创建出饱含构思与灵感的视图，进而让公司服务以更鲜活的方式呈现在用户面前。

教程概述

在本篇文章中，我将与大家共同探讨如何设计商务应用程序的最后一环——企业服务信息界面，并尝试以美观简洁的方式向用户展示更详尽的内容。

在本节内容完成后，我们的应用程序将如下图所示：

屏幕内容在外观及使用感受上与网站专题非常相似，包含了标题、图片、作者等一系列除内容之外的描述信息。这一设计灵感源自BizApp iPhone应用设计模板。全部内容都将由UIWebView实现，我们可以在其中添加丰富的内容链接以及排版布局。

创建UI元素

首先在Xcode项目中添加一个新的视图控制器，并将其命名为DetailViewController。打开DetailViewController.h文件，并将以下域加入初始位置——这些就是我们要在视图中使用到的UI元素。

@interface DetailViewController : UIViewController 
  
@property (nonatomic, strong) UILabel *titleLabel; 
  
@property (nonatomic, strong) UIImageView *articleImageView; 
  
@property (nonatomic, strong) UILabel* metaLabel; 
  
@property (nonatomic, strong) UILabel* nameLabel; 
  
@property (nonatomic, strong) UIWebView* articleWebView; 
  
@property (nonatomic, strong) UIScrollView* scrollView; 
@end 

在DetailViewController文件中，我们需要创建这些域并将其插入视图当中。现在ViewDidLoad方法中已经一切就绪。

别忘了将这些域添加到文件开头。

@synthesize titleLabel, articleWebView, articleImageView, metaLabel, nameLabel, scrollView; 

首先要插入到ViewDidLoad方法当中的两个元素分别是滚视图及标签。UI标签与滚动视图相结合，用户才能通过滑动操作阅读屏幕下方尚未显示出来的信息。

self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)]; 
[self.view addSubview:scrollView]; 
      
self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 0, 300, 61)]; 
[titleLabel setFont:[UIFont boldSystemFontOfSize:20]]; 
[titleLabel setNumberOfLines:2]; 
[scrollView addSubview:titleLabel]; 

接下来要插入的元素是本章本身的图像：

self.articleImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 58, 320, 109)]; 
[articleImageView setContentMode:UIViewContentModeScaleAspectFill]; 
[articleImageView setClipsToBounds:YES]; 
[scrollView addSubview:articleImageView]; 

SetContentMode属性能够确保图像始终保持原始状态（不会被拉伸），而SetClipsToBounds属性则用来保证图像不会超过对应区块的边界。完成之后，我们要处理的是图像下方的两个标签：

self.nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 169, 170, 21)]; 
[nameLabel setFont:[UIFont systemFontOfSize:13]]; 
[nameLabel setText:@"By John Doe / Posted under: "]; 
[scrollView addSubview:nameLabel]; 
  
self.metaLabel = [[UILabel alloc] initWithFrame:CGRectMake(183, 169, 117, 21)]; 
[metaLabel setFont:[UIFont systemFontOfSize:13]]; 
[metaLabel setTextColor:[UIColor colorWithRed:30.0/255 green:144.0/255 blue:224.0/255 alpha:1.0]]; 
[scrollView addSubview:metaLabel]; 

标签本身为蓝色，文本内容则使用系统中默认的13号字体。

然后是分隔线和web视图，这里是显示信息内容的重点区域。

self.articleWebView = [[UIWebView alloc] initWithFrame:CGRectMake(10, 204, 300, 700)]; 
[scrollView addSubview:articleWebView]; 
      
UIView* dividerView = [[UIView alloc] initWithFrame:CGRectMake(10, 194, 300, 2)]; 
[dividerView setBackgroundColor:[UIColor lightGrayColor]]; 
[scrollView addSubview:dividerView]; 

到这里，我们已经完成了所有基本UI元素。现在把新的视图控制器与Storyboard相关联，这样我们就能实现浏览操作了。

将视图控制器添加到Storyboard当中

在MainStoryboard_iPhone文件中添加一个新的视图控制器，选择该视图控制器并将类变更为DetailViewController。这样才能确保我们在DetailViewController文件中执行的任何代码都与新的视图机制在Storyboard上保持匹配。

为了保证新的视图控制器能够在用户触摸网络中的对应服务项目时生效，我们可以使用segue功能。这是iOS 5 SDK中新加入的功能，只需选择Storyboard文件，按住Ctrl键并将其从GridViewController拖拽到DetailViewController即可。这时屏幕上会弹出几个选项，选择其中的“push”，这意味着新的视图控制器将以普通UI界面视图的形式显示在屏幕中。

完成以上步骤后，为两套视图控制器建立链接（segue）。点击segue图标并将其命名为“detail”。

为了将最后一部分连接内容加入进来，我们需要打开GridViewController.m文件并添加以下代码段：

-(void)gridView:(AQGridView *)gridView didSelectItemAtIndex:(NSUInteger)index 
{ 
    [self performSegueWithIdentifier:@"detail" sender:self]; 
} 

当网格中的项目被选定时，方法会执行名为“detail”的segue操作（我们在前面的步骤中刚刚创建完成）。

现在如果大家在模拟器运行应用程序并点击网格中的项目，就会看到新的视图从屏幕右侧切入并替换掉当前界面。

不过现在切入的新界面还是一片空白，因为我们还没有为其添加任何数据。

从模型中添加数据

下一步工作是从我们的数据模型中（在第二部分文章中创建完成）提取信息，并发往Detail视图控制器。要做到这一点，我们首先需要用需要的数据扩展模型。

现在我们为模型文件DataModel.h添加三个额外的域，分别为标题、图像以及文章内容。

@interface Model : NSObject 
  
@property (nonatomic, copy) NSString* name; 
  
@property (nonatomic, retain) UIImage* image; 
  
@property (nonatomic, copy) NSString* webContentTitle; 
  
@property (nonatomic, copy) NSString* webContent; 
  
@property (nonatomic, retain) UIImage* webContentImage; 
  
-(id)initWithName:(NSString*)theName andImage:(UIImage*)theImage andWebContentTitle:(NSString*)theTitle andWebContent:(NSString*)theWebContent andWebContentImage:(UIImage*)theWebImage; 
  
@end 

然后将初始化方法引入DataModel.m文件。

@synthesize name, image, webContent, webContentTitle, webContentImage; 
 
-(id)initWithName:(NSString*)theName andImage:(UIImage*)theImage andWebContentTitle:(NSString*)theTitle andWebContent:(NSString*)theWebContent andWebContentImage:(UIImage*)theWebImage 
{ 
    self = [super init]; 
      
    if(self) 
    { 
        self.name= theName; 
        self.image = theImage; 
        self.webContent = theWebContent; 
        self.webContentTitle = theTitle; 
        self.webContentImage = theWebImage; 
    } 
      
    return self; 
} 

接下来就是向其中添加样本数据。最好的办法当然是从网络服务端载入信息，但这就超出本文的讨论范围了，因此先放下不谈。

为了节约字数，我只列出模型中的一条样本数据。其它数据的形式都是一样的，只是内容上有所不同。

NSString *content = @"<p>Corporate law is the study of how shareholders, directors, employees, creditors, and other stakeholders such as consumers, the community and the environment interact with one another. </p><p>The four defining characteristics of the modern corporation are:</p> <ul><li>Separate Legal Personality of the corporation (access to tort and contract law in a manner similar to a person)</li><li>Limited Liability of the shareholders</li><li>Shares (if the corporation is a public company, the shares are traded on a stock exchange)</li><li>Delegated Management; the board of directors delegates day-to-day management</li><ul>"; 
 
      
 
BusinessService *service1 = [[BusinessService alloc] initWithCaption:@"Litigation" andImage:[UIImage imageNamed:@"service-1.jpg"] andWebContentTitle:@"Litigation: Peace of mind with the experts" andWebContent:content andWebContentImage:[UIImage imageNamed:@"service-1.jpg"]]; 

至于要添加进来的图片，我们必须将其命名为“service-1.jpg”到“service-6.jpg”，并保存在项目中的样本文件夹里。现在样本数据就处理完成了，让我们将其关联到UI元素上，看看能不能正确显示出来。

在屏幕上显示数据

在DetailViewController.h文件中添加新的域，它的作用是担当BuisinessService类的实例。别忘了把BusinessService头文件也加进来，并付诸执行。

@property (nonatomic, retain) BusinessService* service; 

在DetailViewController的ViewDidLoad方法中添加声明，以保证所有UI元素及其对应的服务信息都被正确选中。

[titleLabel setText:service.webContentTitle]; 
[articleImageView setImage:service.webContentImage]; 
[articleWebView loadHTMLString:service.webContent baseURL:nil]; 
[metaLabel setText:service.caption]; 

现在我们可以运行应用程序了，点击网格中的项目可以进入详细视图。最终显示结果如下图所示。

大家可以看到，现在我们的详细视图几乎算是完成了。惟一的缺憾在于后退按钮实在是太难看了，默认样式与自定义导航栏实在是格格不入。

添加自定义UI菜单栏按钮

为了解决这个问题，我们将使用资源文件夹中的“back.png”文件。要将该图片设置为后退按钮样式，我们需要将以下代码段添加到AppDelegate.m文件中的didFinishLaunchingWihOptions方法处。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
    UIImage *navBarImage = [UIImage imageNamed:@"menubar.png"]; 
      
    [[UINavigationBar appearance] setBackgroundImage:navBarImage 
                                       forBarMetrics:UIBarMetricsDefault]; 
      
      
    UIImage* backButtonImage = [UIImage imageNamed:@"back.png"]; 
      
    [[UIBarButtonItem appearance] setBackButtonBackgroundImage:backButtonImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; 
      
    return YES; 
} 

上述代码的作用是让应用程序利用iOS 5 SDK改变后退按钮的外观。现在运行应用程序，我们会发现显示效果如下所示。

总结

这个系列的三篇文章到此终于全部告一段落。

希望大家现在对于应用程序设计有更深刻的理解，并以此为基础在未来的开发工作中制作出独一无二的精彩作品。

感谢大家的支持与耐心，如果还有什么问题或者意见，不妨在评论栏中共同探讨。

原文链接：

http://mobile.tutsplus.com/tutorials/iphone/design-build-a-small-business-app-custom-detail-views/