教程說明

• 技術(shù)工具: iOS SDK
• 操作難度: 普通
• 執(zhí)行時間: 30 到60分鐘

【51CTO譯文】歡迎大家閱讀小型企業(yè)商務(wù)應(yīng)用程序設(shè)計及開發(fā)系列教程的最后一部分。在第三篇文章中，我們將共同學(xué)習(xí)如何設(shè)計并創(chuàng)建出飽含構(gòu)思與靈感的視圖，進(jìn)而讓公司服務(wù)以更鮮活的方式呈現(xiàn)在用戶面前。

教程概述

在本篇文章中，我將與大家共同探討如何設(shè)計商務(wù)應(yīng)用程序的最后一環(huán)——企業(yè)服務(wù)信息界面，并嘗試以美觀簡潔的方式向用戶展示更詳盡的內(nèi)容。

在本節(jié)內(nèi)容完成后，我們的應(yīng)用程序?qū)⑷缦聢D所示：

屏幕內(nèi)容在外觀及使用感受上與網(wǎng)站專題非常相似，包含了標(biāo)題、圖片、作者等一系列除內(nèi)容之外的描述信息。這一設(shè)計靈感源自BizApp iPhone應(yīng)用設(shè)計模板。全部內(nèi)容都將由UIWebView實(shí)現(xiàn)，我們可以在其中添加豐富的內(nèi)容鏈接以及排版布局。

創(chuàng)建UI元素

首先在Xcode項(xiàng)目中添加一個新的視圖控制器，并將其命名為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文件中，我們需要創(chuàng)建這些域并將其插入視圖當(dāng)中?，F(xiàn)在ViewDidLoad方法中已經(jīng)一切就緒。

別忘了將這些域添加到文件開頭。

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

首先要插入到ViewDidLoad方法當(dāng)中的兩個元素分別是滾視圖及標(biāo)簽。UI標(biāo)簽與滾動視圖相結(jié)合，用戶才能通過滑動操作閱讀屏幕下方尚未顯示出來的信息。

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屬性能夠確保圖像始終保持原始狀態(tài)（不會被拉伸），而SetClipsToBounds屬性則用來保證圖像不會超過對應(yīng)區(qū)塊的邊界。完成之后，我們要處理的是圖像下方的兩個標(biāo)簽：

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]; 

標(biāo)簽本身為藍(lán)色，文本內(nèi)容則使用系統(tǒng)中默認(rèn)的13號字體。

然后是分隔線和web視圖，這里是顯示信息內(nèi)容的重點(diǎn)區(qū)域。

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]; 

到這里，我們已經(jīng)完成了所有基本UI元素。現(xiàn)在把新的視圖控制器與Storyboard相關(guān)聯(lián)，這樣我們就能實(shí)現(xiàn)瀏覽操作了。

將視圖控制器添加到Storyboard當(dāng)中

在MainStoryboard_iPhone文件中添加一個新的視圖控制器，選擇該視圖控制器并將類變更為DetailViewController。這樣才能確保我們在DetailViewController文件中執(zhí)行的任何代碼都與新的視圖機(jī)制在Storyboard上保持匹配。

為了保證新的視圖控制器能夠在用戶觸摸網(wǎng)絡(luò)中的對應(yīng)服務(wù)項(xiàng)目時生效，我們可以使用segue功能。這是iOS 5 SDK中新加入的功能，只需選擇Storyboard文件，按住Ctrl鍵并將其從GridViewController拖拽到DetailViewController即可。這時屏幕上會彈出幾個選項(xiàng)，選擇其中的“push”，這意味著新的視圖控制器將以普通UI界面視圖的形式顯示在屏幕中。

完成以上步驟后，為兩套視圖控制器建立鏈接（segue）。點(diǎn)擊segue圖標(biāo)并將其命名為“detail”。

為了將最后一部分連接內(nèi)容加入進(jìn)來，我們需要打開GridViewController.m文件并添加以下代碼段：

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

當(dāng)網(wǎng)格中的項(xiàng)目被選定時，方法會執(zhí)行名為“detail”的segue操作（我們在前面的步驟中剛剛創(chuàng)建完成）。

現(xiàn)在如果大家在模擬器運(yùn)行應(yīng)用程序并點(diǎn)擊網(wǎng)格中的項(xiàng)目，就會看到新的視圖從屏幕右側(cè)切入并替換掉當(dāng)前界面。

不過現(xiàn)在切入的新界面還是一片空白，因?yàn)槲覀冞€沒有為其添加任何數(shù)據(jù)。

從模型中添加數(shù)據(jù)

下一步工作是從我們的數(shù)據(jù)模型中（在第二部分文章中創(chuàng)建完成）提取信息，并發(fā)往Detail視圖控制器。要做到這一點(diǎn)，我們首先需要用需要的數(shù)據(jù)擴(kuò)展模型。

現(xiàn)在我們?yōu)槟Ｐ臀募﨑ataModel.h添加三個額外的域，分別為標(biāo)題、圖像以及文章內(nèi)容。

@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; 
} 

接下來就是向其中添加樣本數(shù)據(jù)。最好的辦法當(dāng)然是從網(wǎng)絡(luò)服務(wù)端載入信息，但這就超出本文的討論范圍了，因此先放下不談。

為了節(jié)約字?jǐn)?shù)，我只列出模型中的一條樣本數(shù)據(jù)。其它數(shù)據(jù)的形式都是一樣的，只是內(nèi)容上有所不同。

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"]]; 

至于要添加進(jìn)來的圖片，我們必須將其命名為“service-1.jpg”到“service-6.jpg”，并保存在項(xiàng)目中的樣本文件夾里?，F(xiàn)在樣本數(shù)據(jù)就處理完成了，讓我們將其關(guān)聯(lián)到UI元素上，看看能不能正確顯示出來。

在屏幕上顯示數(shù)據(jù)

在DetailViewController.h文件中添加新的域，它的作用是擔(dān)當(dāng)BuisinessService類的實(shí)例。別忘了把BusinessService頭文件也加進(jìn)來，并付諸執(zhí)行。

@property (nonatomic, retain) BusinessService* service; 

在DetailViewController的ViewDidLoad方法中添加聲明，以保證所有UI元素及其對應(yīng)的服務(wù)信息都被正確選中。

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

現(xiàn)在我們可以運(yùn)行應(yīng)用程序了，點(diǎn)擊網(wǎng)格中的項(xiàng)目可以進(jìn)入詳細(xì)視圖。最終顯示結(jié)果如下圖所示。

大家可以看到，現(xiàn)在我們的詳細(xì)視圖幾乎算是完成了。惟一的缺憾在于后退按鈕實(shí)在是太難看了，默認(rèn)樣式與自定義導(dǎo)航欄實(shí)在是格格不入。

添加自定義UI菜單欄按鈕

為了解決這個問題，我們將使用資源文件夾中的“back.png”文件。要將該圖片設(shè)置為后退按鈕樣式，我們需要將以下代碼段添加到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; 
} 

上述代碼的作用是讓應(yīng)用程序利用iOS 5 SDK改變后退按鈕的外觀。現(xiàn)在運(yùn)行應(yīng)用程序，我們會發(fā)現(xiàn)顯示效果如下所示。

總結(jié)

這個系列的三篇文章到此終于全部告一段落。

希望大家現(xiàn)在對于應(yīng)用程序設(shè)計有更深刻的理解，并以此為基礎(chǔ)在未來的開發(fā)工作中制作出獨(dú)一無二的精彩作品。

感謝大家的支持與耐心，如果還有什么問題或者意見，不妨在評論欄中共同探討。

原文鏈接：

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