教程說(shuō)明

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

在本系列指南的三篇文章中，我將帶大家一同學(xué)習(xí)如何從零開(kāi)始，設(shè)計(jì)并創(chuàng)建一款小型企業(yè)應(yīng)用程序。

最終效果 

作為簡(jiǎn)單的示例，我們不妨將這款預(yù)期作品稱為“商務(wù)應(yīng)用”，其作用是向用戶展示小型企業(yè)提供的服務(wù)項(xiàng)目。希望大家能夠以此為起點(diǎn)，一步步操作并理解應(yīng)用程序的設(shè)計(jì)過(guò)程，進(jìn)而在未來(lái)的開(kāi)發(fā)工作中制作出優(yōu)秀且極具市場(chǎng)競(jìng)爭(zhēng)力的產(chǎn)品。

準(zhǔn)備好了嗎？咱們這就開(kāi)始！

創(chuàng)建項(xiàng)目

創(chuàng)建一個(gè)新的Xcode項(xiàng)目，并使用選項(xiàng)卡應(yīng)用程序模板。我們將項(xiàng)目命名為“商務(wù)應(yīng)用指南”，同時(shí)勾選對(duì)話框中的“使用自動(dòng)引用計(jì)數(shù)”以及“使用Storyboard”兩個(gè)選項(xiàng)。點(diǎn)擊“下一步”，選擇項(xiàng)目的保存位置，現(xiàn)在萬(wàn)事俱備、只欠“開(kāi)發(fā)”了。

為應(yīng)用程序設(shè)計(jì)啟動(dòng)畫(huà)面

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

首先要做的是完成基礎(chǔ)視圖，先在Storyboard中選擇FirstViewController，然后刪除屏幕中作為范例存在的兩個(gè)標(biāo)簽。接著選擇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; 

以上是屏幕中已經(jīng)存在的UI元素，我們之后還要有針對(duì)性地進(jìn)行調(diào)整，借以讓?xiě)?yīng)用程序更具個(gè)性。

現(xiàn)在讓我們將以上變量整合到FirstViewController.m文件當(dāng)中。

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

下一步要做的是創(chuàng)建標(biāo)簽并將其添加到屏幕當(dāng)中。下面列出的代碼用于定義函數(shù)，進(jìn)而創(chuàng)建具備自定義特性的標(biāo)簽。標(biāo)簽上所設(shè)置的屬性包括顏色、陰影、陰影偏移以及排列狀態(tài)。

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

現(xiàn)在我們可以調(diào)用此方法并將返回值分配給兩個(gè)標(biāo)簽，每次調(diào)用都要使用不同的參數(shù)值。如此數(shù)次之后，我們將標(biāo)簽添加到ViewController當(dāng)中。

- (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. 
} 

到這里如果大家嘗試運(yùn)行應(yīng)用程序，就會(huì)發(fā)現(xiàn)我們?cè)O(shè)定的標(biāo)簽已經(jīng)被正確添加到視圖當(dāng)中，而且其位置及尺寸都會(huì)隨參數(shù)的變化而有所不同。

由于背景跟標(biāo)簽都是白色，因此我們暫時(shí)還無(wú)法識(shí)別標(biāo)簽的樣式。下面要做的是在視圖中添加背景紋理。這里我們要使用的是一款纖維質(zhì)地的藍(lán)色紋理，是我在其它移動(dòng)應(yīng)用教程中制作出來(lái)的。但在這里，它將再次發(fā)揮作用。

這里我們將要使用的圖片命名為bg-splash.pngm，這樣就可以將其作為背景圖案添加到以下代碼中，進(jìn)而作用于viewDidLoad方法了。整個(gè)過(guò)程相當(dāng)于先根據(jù)圖片創(chuàng)建彩色圖案，再將該彩色圖案設(shè)定為背景。

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

如果這時(shí)運(yùn)行應(yīng)用程序，我們會(huì)清楚看到藍(lán)色背景反襯下的標(biāo)簽。到這一步，我們的應(yīng)用程序已經(jīng)逐漸成形了。

添加漸變標(biāo)簽

現(xiàn)在我們需要在屏幕上添加一個(gè)漸變標(biāo)簽，要實(shí)現(xiàn)這種效果，開(kāi)源組件FXLabel是大家的最好選擇。由于蘋(píng)果公司對(duì)系統(tǒng)封閉性的堅(jiān)持，我們很難直接利用輔助代碼為視圖添加漸變效果，一般只能手動(dòng)畫(huà)一幅帶漸變效果的圖片。這里我們從Github網(wǎng)站上下載FXLabel.h和FXLabel.m兩個(gè)文件，并將其添加到項(xiàng)目當(dāng)中。

將以下方法添加到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]; 

以上代碼的定制內(nèi)容與前面提到的其它標(biāo)簽相似，但在這款商務(wù)應(yīng)用中，我們希望實(shí)現(xiàn)背景由藍(lán)色向白色的漸變效果。如果大家在模擬器中運(yùn)行該應(yīng)用，那么顯示結(jié)果如下圖所示：

添加按鈕

在下面的步驟中，我們要為應(yīng)用程序添加按鈕。具體代碼內(nèi)容如下：

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

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

在添加方法并定義頭文件之后，接下來(lái)就是調(diào)用該方法并將處理得到的圖像分配給“與我們聯(lián)系”以及“導(dǎo)航”按鈕。

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文件內(nèi)的viewDidLoad方法中。由此新的createButton方法將正式生效，通過(guò)變更具體參數(shù)，我們就能實(shí)現(xiàn)按鈕及文本內(nèi)容的位置移動(dòng)。

這時(shí)按鈕已經(jīng)被成功加入應(yīng)用視圖。

如果這時(shí)啟動(dòng)應(yīng)用程序，大家會(huì)看到如下畫(huà)面，這就是我們的階段性設(shè)計(jì)成果。

進(jìn)一步調(diào)整

細(xì)心的讀者朋友可能會(huì)發(fā)現(xiàn)，上圖所示的屏幕與我在文章開(kāi)頭所展示的最終顯示效果并不完全一致。說(shuō)明標(biāo)簽的換行位置過(guò)于突兀，而且“Attorney Biz”字樣也缺乏漸變效果。

為了讓說(shuō)明內(nèi)容以開(kāi)頭所示的形式分為兩行，我們要將以下代碼添加到viewDidLoad方法中創(chuàng)建descriptionLabel之后的位置。

[descriptionLabel setNumberOfLines:2]; 

為視覺(jué)元素賦予功能

現(xiàn)在，我們的屏幕視圖已經(jīng)基本完成，但這只是視覺(jué)效果，還無(wú)法響應(yīng)任何操作、按鈕也不會(huì)激活任何事件。這可不行，我們得通過(guò)以下代碼定義兩套方法。第一套方法將呼叫特定電話號(hào)碼，而第二套方法則打開(kāi)地圖并顯示指定位置（在本范例中，指定位置為倫敦）。

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

下一步是將我們的按鈕與新方法關(guān)聯(lián)起來(lái)。

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

現(xiàn)在當(dāng)我們點(diǎn)擊對(duì)應(yīng)按鈕，應(yīng)用程序就會(huì)嘗試發(fā)起電話呼叫或者打開(kāi)地圖應(yīng)用。

注意：模擬器無(wú)法實(shí)現(xiàn)電話呼叫功能，因此這部分內(nèi)容只能在iPhone實(shí)機(jī)上進(jìn)行測(cè)試。

總結(jié)

商務(wù)應(yīng)用系列文章的第一部分到此將告一段落。在第二及第三部分中，我們將學(xué)習(xí)更多應(yīng)用程序設(shè)計(jì)內(nèi)容并為作品添加更多精彩的要素，這些經(jīng)驗(yàn)相信會(huì)在大家未來(lái)的程序開(kāi)發(fā)工作中起到重要作用。

如果大家還有什么問(wèn)題，不妨在評(píng)論欄中留言并與其他朋友一同討論。

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