教程說明

• 技術工具: iOS SDK
• 操作難度: 普通
• 執行時間: 30 到60分鐘

在本系列指南的三篇文章中，我將帶大家一同學習如何從零開始，設計并創建一款小型企業應用程序。

最終效果 

作為簡單的示例，我們不妨將這款預期作品稱為“商務應用”，其作用是向用戶展示小型企業提供的服務項目。希望大家能夠以此為起點，一步步操作并理解應用程序的設計過程，進而在未來的開發工作中制作出優秀且極具市場競爭力的產品。

準備好了嗎？咱們這就開始！

創建項目

創建一個新的Xcode項目，并使用選項卡應用程序模板。我們將項目命名為“商務應用指南”，同時勾選對話框中的“使用自動引用計數”以及“使用Storyboard”兩個選項。點擊“下一步”，選擇項目的保存位置，現在萬事俱備、只欠“開發”了。

為應用程序設計啟動畫面

選擇Sotryboard文件，調入MainStoryBoard_iPhone，現在大家看到的應該如下圖所示。這是Xcode為我們創建的初始視圖控制器，一切美化及提升都需要以此為基礎。

首先要做的是完成基礎視圖，先在Storyboard中選擇FirstViewController，然后刪除屏幕中作為范例存在的兩個標簽。接著選擇FirstViewController.h文件并聲明以下變量：

@property (nonatomic, strong) IBOutlet UILabel* logoLabel; 
@property (nonatomic, strong) IBOutlet UILabel* descriptionLabel; 
@property (nonatomic, strong) IBOutlet UIButton* callUsButton; 
@property (nonatomic, strong) IBOutlet UIButton* directionsButton; 
@property (nonatomic, strong) IBOutlet UILabel* copyrightLabel; 

以上是屏幕中已經存在的UI元素，我們之后還要有針對性地進行調整，借以讓應用程序更具個性。

現在讓我們將以上變量整合到FirstViewController.m文件當中。

@synthesize logoLabel, descriptionLabel, callUsButton, directionsButton, copyrightLabel; 

下一步要做的是創建標簽并將其添加到屏幕當中。下面列出的代碼用于定義函數，進而創建具備自定義特性的標簽。標簽上所設置的屬性包括顏色、陰影、陰影偏移以及排列狀態。

-(UILabel*)createLabelWithFrame:(CGRect)frame andFontSize:(float)fontSize andText:(NSString*)text 
{ 
    UILabel* label = [[UILabel alloc] initWithFrame:frame]; 
             
    [label setFont:[UIFont systemFontOfSize:fontSize]]; 
      
    [label setTextColor:[UIColor whiteColor]]; 
    [label setShadowColor:[UIColor blackColor]]; 
    [label setShadowOffset:CGSizeMake(0, -1)]; 
    [label setTextAlignment:UITextAlignmentCenter]; 
    [label setBackgroundColor:[UIColor clearColor]]; 
    [label setText:text]; 
      
    return label; 
} 

現在我們可以調用此方法并將返回值分配給兩個標簽，每次調用都要使用不同的參數值。如此數次之后，我們將標簽添加到ViewController當中。

- (void)viewDidLoad 
{ 
      
      
    self.descriptionLabel = [self createLabelWithFrame:CGRectMake(42, 91, 238, 55) andFontSize:19 andText:@"A short description goes here"]; 
      
    self.copyrightLabel = [self createLabelWithFrame:CGRectMake(22, 379, 269, 23) andFontSize:11 andText:@"Copyright 2012 Attorney Biz"]; 
         
    [self.view addSubview:descriptionLabel]; 
    [self.view addSubview:copyrightLabel]; 
      
      
    [super viewDidLoad]; 
    // Do any additional setup after loading the view, typically from a nib. 
} 

到這里如果大家嘗試運行應用程序，就會發現我們設定的標簽已經被正確添加到視圖當中，而且其位置及尺寸都會隨參數的變化而有所不同。

由于背景跟標簽都是白色，因此我們暫時還無法識別標簽的樣式。下面要做的是在視圖中添加背景紋理。這里我們要使用的是一款纖維質地的藍色紋理，是我在其它移動應用教程中制作出來的。但在這里，它將再次發揮作用。

這里我們將要使用的圖片命名為bg-splash.pngm，這樣就可以將其作為背景圖案添加到以下代碼中，進而作用于viewDidLoad方法了。整個過程相當于先根據圖片創建彩色圖案，再將該彩色圖案設定為背景。

UIColor *backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bg-splash.png"]]; 
[self.view setBackgroundColor:backgroundColor]; 

如果這時運行應用程序，我們會清楚看到藍色背景反襯下的標簽。到這一步，我們的應用程序已經逐漸成形了。

添加漸變標簽

現在我們需要在屏幕上添加一個漸變標簽，要實現這種效果，開源組件FXLabel是大家的最好選擇。由于蘋果公司對系統封閉性的堅持，我們很難直接利用輔助代碼為視圖添加漸變效果，一般只能手動畫一幅帶漸變效果的圖片。這里我們從Github網站上下載FXLabel.h和FXLabel.m兩個文件，并將其添加到項目當中。

將以下方法添加到viewDidLoad頂端：

self.logoLabel = [[FXLabel alloc] initWithFrame:CGRectMake(14, 11, 280, 87)]; 
  
[logoLabel setFont:[UIFont boldSystemFontOfSize:45]]; 
  
[logoLabel setTextColor:[UIColor whiteColor]]; 
[logoLabel setShadowColor:[UIColor blackColor]]; 
[logoLabel setShadowOffset:CGSizeMake(0, 2)]; 
[logoLabel setTextAlignment:UITextAlignmentCenter]; 
[logoLabel setBackgroundColor:[UIColor clearColor]]; 
[logoLabel setText:@"Attorney Biz"]; 
  
[logoLabel setGradientStartColor:[UIColor colorWithRed:163.0/255 green:203.0/255 blue:222.0/255 alpha:1.0]]; 
[logoLabel setGradientEndColor:[UIColor whiteColor]]; 
  
[self.view addSubview:logoLabel]; 

以上代碼的定制內容與前面提到的其它標簽相似，但在這款商務應用中，我們希望實現背景由藍色向白色的漸變效果。如果大家在模擬器中運行該應用，那么顯示結果如下圖所示：

添加按鈕

在下面的步驟中，我們要為應用程序添加按鈕。具體代碼內容如下：

-(UIButton*)createButtonWithFrame:(CGRect)frame andLabel:(NSString*)label 
{ 
    UIButton *button = [[UIButton alloc] initWithFrame:frame]; 
      
          
    UIColor* buttonColor = [UIColor colorWithRed:95.0/255 green:113.0/255 blue:126.0/255 alpha:1.0]; 
      
    [button setTitle:label forState:UIControlStateNormal]; 
    [button setTitleColor:buttonColor forState:UIControlStateNormal]; 
    [button setBackgroundImage:[UIImage imageNamed:@"button-splash.png"] forState:UIControlStateNormal]; 
  
    [button.titleLabel setFont:[UIFont boldSystemFontOfSize:18]]; 
      
    return button; 
} 

該函數將在特定位置以特定文本創建按鈕。在該方法中，我們同樣引入自定義元素：將文本內容顏色改為灰色，背景圖案也采用資源文件夾中的范例圖片。

在添加方法并定義頭文件之后，接下來就是調用該方法并將處理得到的圖像分配給“與我們聯系”以及“導航”按鈕。

self.callUsButton = [self createButtonWithFrame:CGRectMake(22, 259, 276, 52) andLabel:@"Call us"]; 
  
self.directionsButton = [self createButtonWithFrame:CGRectMake(22, 319, 276, 52) andLabel:@"Directions"]; 
  
  
[self.view addSubview:callUsButton]; 
[self.view addSubview:directionsButton]; 

將以上代碼段添加到FistViewController.m文件內的viewDidLoad方法中。由此新的createButton方法將正式生效，通過變更具體參數，我們就能實現按鈕及文本內容的位置移動。

這時按鈕已經被成功加入應用視圖。

如果這時啟動應用程序，大家會看到如下畫面，這就是我們的階段性設計成果。

進一步調整

細心的讀者朋友可能會發現，上圖所示的屏幕與我在文章開頭所展示的最終顯示效果并不完全一致。說明標簽的換行位置過于突兀，而且“Attorney Biz”字樣也缺乏漸變效果。

為了讓說明內容以開頭所示的形式分為兩行，我們要將以下代碼添加到viewDidLoad方法中創建descriptionLabel之后的位置。

[descriptionLabel setNumberOfLines:2]; 

為視覺元素賦予功能

現在，我們的屏幕視圖已經基本完成，但這只是視覺效果，還無法響應任何操作、按鈕也不會激活任何事件。這可不行，我們得通過以下代碼定義兩套方法。第一套方法將呼叫特定電話號碼，而第二套方法則打開地圖并顯示指定位置（在本范例中，指定位置為倫敦）。

-(void)callNumber 
{ 
    UIApplication *app = [UIApplication sharedApplication];   
    [app openURL:[NSURL URLWithString:[NSString stringWithFormat:@"tel:004-102-3929"]]];  
} 
  
-(void)openMap 
{ 
    UIApplication *app = [UIApplication sharedApplication];   
    [app openURL:[NSURL URLWithString:@"http://maps.google.com/maps?q=Paris"]];  
} 

下一步是將我們的按鈕與新方法關聯起來。

[self.callUsButton addTarget:self action:@selector(callNumber) forControlEvents:UIControlEventTouchUpInside]; 
  
[self.directionsButton addTarget:self action:@selector(openMap) forControlEvents:UIControlEventTouchUpInside]; 

現在當我們點擊對應按鈕，應用程序就會嘗試發起電話呼叫或者打開地圖應用。

注意：模擬器無法實現電話呼叫功能，因此這部分內容只能在iPhone實機上進行測試。

總結

商務應用系列文章的第一部分到此將告一段落。在第二及第三部分中，我們將學習更多應用程序設計內容并為作品添加更多精彩的要素，這些經驗相信會在大家未來的程序開發工作中起到重要作用。

如果大家還有什么問題，不妨在評論欄中留言并與其他朋友一同討論。

原文鏈接： http://mobile.tutsplus.com/tutorials/iphone/design-build-a-small-business-app-project-setup/