在這個兩部分的系列教程中，您將探索如何使用以下工具和技術來建立自己的App：

本教程專為熟悉基本知識的、但還沒有接觸到太多高階主題的中級開發者而設計。本教程也是想要去探索Objective-C函式程式設計一個很好的開始。

開始

開啟Xcode並執行File\New\Project。選擇Application\Empty Application。將專案命名為SimpleWeather，單擊下一步，選擇一個目錄去儲存你的專案，然後點選Create。 現在，你的基礎專案已經完成。下一步是整合你的第三方工具。但首先你要關閉Xcode，確保他不會影響下一步。

Cocoapods

你將要下載Cocoapods

的程式碼，在Xcode專案中新增檔案來使用，並配置專案需要的設定。

Mantle

Mantle是由於Github團隊開發的，目的是去除Objective-C把JSON資料轉為NSObject子類的所有樣板程式碼。Mantle也能做資料轉換，通過一種神奇的方式把JSON原始資料(strings, ints, floats)轉換為複雜資料，比如NSDate, NSURL, 甚至是自定義類。

LBBlurredImage

LBBlurredImage是一個繼承自UIImageView，輕而易舉使影象模糊的專案。你將僅僅用一行程式碼來建立一個神奇的模糊效果。

TSMessages

TSMessages

 是另一個非常簡單的庫，用來顯示浮層警告和通知。當出現錯誤資訊而不直接影響使用者的時候，最好使用浮層來代替模態視窗(例如UIAlertView)，這樣你將盡可能減少對使用者的影響。

你將只用TSMessages，在網路失去連線或API錯誤的時候。如果發生錯誤，你將看到類似這樣的一個浮層：

ReactiveCocoa

最後，你將使用到ReactiveCocoa，他也來自於GitHub團隊。ReactiveCocoa給Objective-C帶來了函式程式設計，類似與.NET的Reactive Extensions。你將在第二部分花費大部分時間去實現ReactiveCocoa。

設定你的Cocoapods

設定你的Cocoapods，先要確保你已經安裝了Cocoapods。為此，開啟命令列程式，並輸入。

Objective-C which pod

1

which pod

你將會看到類似這樣的輸出：

Objective-C /usr/bin/pod

1	/usr/bin/pod

這決定於你如何管理Ruby gems，例如你使用rbenv或RVM,路徑可能有所不同。

如果命令列簡單的返回提示，或顯示pod not found，表示Cocoapods未安裝在你的機器上。可以檢視我們的Cocoapods教程作為安裝說明。這也是一個很好的資源，如果你想更多得了解Cocoapods的話。

Objective-C sjpsega注:Cocoapods中文安裝教程可以看這篇 http://geeklu.com/2013/06/cocoapods-101/

1	sjpsega注:Cocoapods中文安裝教程可以看這篇http://geeklu.com/2013/06/cocoapods-101/

Podfiles是用來告訴Cocoapods哪些開源專案需要匯入。

要建立你的第一個Cocoapod，首先在命令列中用cd命令導航到你的XCode專案所在的資料夾，在命令列中啟動編輯器，輸入

Objective-C platform :ios, '7.0' pod 'Mantle' pod 'LBBlurredImage' pod 'TSMessages' pod 'ReactiveCocoa'

123456

platform :ios,'7.0'pod'Mantle'pod'LBBlurredImage'pod'TSMessages'pod'ReactiveCocoa'

這檔案做了兩件事情：

• 告訴Cocoapods你的目標平臺與版本，這裡的你目標是iOS 7.0。
• 列給Cocoapods一個專案所有需要引入和安裝的三方庫清單。

在命令列中輸入pod install進行安裝。

這可能需要花一到兩分鐘的時間去安裝各種包。你的命令列應該輸出如下所示：

Objective-C $ pod install Analyzing dependencies CocoaPods 0.28.0 is available. Downloading dependencies Installing HexColors (2.2.1) Installing LBBlurredImage (0.1.0) Installing Mantle (1.3.1) Installing ReactiveCocoa (2.1.7) Installing TSMessages (0.9.4) Generating Pods project Integrating client project [!] From now on use `SimpleWeather.xcworkspace`.

12345678910111213141516

$pod installAnalyzingdependenciesCocoaPods0.28.0is available.DownloadingdependenciesInstallingHexColors(2.2.1)InstallingLBBlurredImage(0.1.0)InstallingMantle(1.3.1)InstallingReactiveCocoa(2.1.7)InstallingTSMessages(0.9.4)GeneratingPodsprojectIntegratingclient project[!] Fromnow on use`SimpleWeather.xcworkspace`.

Objective-C sjpsega注:若你之前安裝過Cocoapods的話，這裡安裝報錯的話，可以看看http://blog.cocoapods.org/Repairing-Our-Broken-Specs-Repository/ 修復問題

1	sjpsega注:若你之前安裝過Cocoapods的話，這裡安裝報錯的話，可以看看http://blog.cocoapods.org/Repairing-Our-Broken-Specs-Repository/ 修復問題

Cocoapods會在你的專案目錄中建立一堆新檔案，但是，只有一個需要你關心，SimpleWeather.xcworkspace。

用Xcode開啟SimpleWeather.xcworkspace。看看你的專案設定，現在有一個Pods專案在你的專案工作區，以及在Pods資料夾放著每一個你引入的庫，如下所示：

確保你已經選擇SimpleWeather專案，如圖所示：

構建並執行您的App，以確保一切工作正常：

Objective-C 提示：您可能會注意到有一些專案生成警告。因為Cocoapods引入的專案，是由不同的開發者開發，並且不同的開發者對生成警告有不同的態度。通常，你應該可以忽略它們。只要確保沒有任何編譯器錯誤！

1	提示：您可能會注意到有一些專案生成警告。因為Cocoapods引入的專案，是由不同的開發者開發，並且不同的開發者對生成警告有不同的態度。通常，你應該可以忽略它們。只要確保沒有任何編譯器錯誤！

建立你的主檢視控制器

雖然這個App看起來複雜，但它還會通過一個單一的View Controller完成。現在，你將新增他。

選中SimpleWeather專案，單擊File\New\File，並且選擇Cocoa Touch\Objective-C class. 命名為WXController，並設定為UIViewController的子類。

確保Targeted for iPad和With XIB for user interface都沒有選中，如下圖所示：

開啟WXController.m然後用如下所示替換-viewDidLoad方法：

Objective-C - (void)viewDidLoad { [super viewDidLoad]; // Remove this later self.view.backgroundColor = [UIColor redColor]; }

123456

-(void)viewDidLoad{[superviewDidLoad];// Remove this laterself.view.backgroundColor=[UIColorredColor];}

現在開啟AppDelegate.m，並且引入如下兩個class:

Objective-C #import "WXController.h" #import <TSMessage.h>

12	#import "WXController.h"#import <TSMessage.h>

眼尖的讀者會注意到WXController使用引號引入，TSMessage使用單括號引入。

回頭看下當你建立Podfile的時候，你使用Cocoapods引入TSMessage。Cocoapods建立TSMessage專案，並把它加入到工作空間。既然你從工作區的其他專案匯入，可以使用尖括號代替引號。

代替-application:didFinishLaunchingWithOptions的內容：

Objective-C - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // 1 self.window.rootViewController = [[WXController alloc] init]; self.window.backgroundColor = [UIColor whiteColor]; [self.window makeKeyAndVisible]; // 2 [TSMessage setDefaultViewController: self.window.rootViewController]; return YES; }

12345678910

-(BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary*)launchOptions{self.window=[[UIWindowalloc] initWithFrame:[[UIScreenmainScreen] bounds]];// 1self.window.rootViewController=[[WXControlleralloc] init];self.window.backgroundColor=[UIColorwhiteColor];[self.window makeKeyAndVisible];// 2[TSMessage setDefaultViewController: self.window.rootViewController];returnYES;}

標號註釋的解釋：

1. 初始化並設定WXController例項作為App的根檢視控制器。通常這個控制器是一個的UINavigationController或UITabBarController，但在當前情況下，你使用WXController的單個例項。
2. 設定預設的檢視控制器來顯示你的TSMessages。這樣做，你將不再需要手動指定要使用的控制器來顯示警告。

構建並執行，看看你的新檢視控制器起作用了。

在紅色背景下，狀態列有點不夠清晰。幸運的是，有一個簡單的方法，使狀態列更清晰易讀。

在iOS7，UIViewController有一個新的API，用來控制狀態列的外觀。開啟WXController，直接新增下面的程式碼到-viewDidLoad:方法下：

Objective-C - (UIStatusBarStyle)preferredStatusBarStyle { return UIStatusBarStyleLightContent; }

123	-(UIStatusBarStyle)preferredStatusBarStyle{returnUIStatusBarStyleLightContent;}

再次構建並執行，你將看到狀態列如下的變化:

設定你的App檢視

現在是時候讓你的App接近生活。下載這個專案的圖片，並解壓縮到一個合適的位置。這個壓縮包的背景圖片出自Flickr使用者idleformat之手，天氣圖片出自Dribbble使用者heeyeun之手。

切換回Xcode，單擊File\Add Files to “SimpleWeather”….定位到你剛剛解壓縮的圖片資料夾並選擇它。選擇Copy items into destination group’s folder (if needed)，然後單擊Add。

開啟WXController.h, 新增如下委託協議：

Objective-C <UITableViewDataSource, UITableViewDelegate, UIScrollViewDelegate>

1	<UITableViewDataSource,UITableViewDelegate,UIScrollViewDelegate>

現在開啟WXController.m。 小提示：你可以使用Control-Command-Up的快捷鍵來實現.h和.m檔案之間的快速切換。

新增如下程式碼到WXController.m頂部:

Objective-C #import <LBBlurredImage/UIImageView+LBBlurredImage.h>

1	#import <LBBlurredImage/UIImageView+LBBlurredImage.h>

LBBlurredImage.h包含在Cocoapods引入的LBBlurredImage專案，你會使用這個庫來模糊背景圖片。

應該有一個空的私有介面樣板在WXController imports的下方。它具有以下屬性：

Objective-C @interface WXController () @property (nonatomic, strong) UIImageView *backgroundImageView; @property (nonatomic, strong) UIImageView *blurredImageView; @property (nonatomic, strong) UITableView *tableView; @property (nonatomic, assign) CGFloat screenHeight; @end

12345678

@interfaceWXController()@property(nonatomic,strong)UIImageView*backgroundImageView;@property(nonatomic,strong)UIImageView*blurredImageView;@property(nonatomic,strong)UITableView*tableView;@property(nonatomic,assign)CGFloatscreenHeight;@end

現在，是時候在專案中建立並設定檢視。

下面是你App的分解圖，記住，table view將是透明的：

為了實現動態模糊效果，在你的App中，你會根據App的滾動來改變模糊影象的alpha值。

開啟WXController.m，使用如下程式碼來，替換掉-viewDidLoad中設定背景色的程式碼：

Objective-C // 1 self.screenHeight = [UIScreen mainScreen].bounds.size.height; UIImage *background = [UIImage imageNamed:@"bg"]; // 2 self.backgroundImageView = [[UIImageView alloc] initWithImage:background]; self.backgroundImageView.contentMode = UIViewContentModeScaleAspectFill; [self.view addSubview:self.backgroundImageView]; // 3 self.blurredImageView = [[UIImageView alloc] init]; self.blurredImageView.contentMode = UIViewContentModeScaleAspectFill; self.blurredImageView.alpha = 0; [self.blurredImageView setImageToBlur:background blurRadius:10 completionBlock:nil]; [self.view addSubview:self.blurredImageView]; // 4 self.tableView = [[UITableView alloc] init]; self.tableView.backgroundColor = [UIColor clearColor]; self.tableView.delegate = self; self.tableView.dataSource = self; self.tableView.separatorColor = [UIColor colorWithWhite:1 alpha:0.2]; self.tableView.pagingEnabled = YES; [self.view addSubview:self.tableView];

12345678910111213141516171819202122232425

// 1self.screenHeight=[UIScreenmainScreen].bounds.size.height;UIImage*background=[UIImage imageNamed:@"bg"];// 2self.backgroundImageView=[[UIImageViewalloc] initWithImage:background];self.backgroundImageView.contentMode=UIViewContentModeScaleAspectFill;[self.view addSubview:self.backgroundImageView];// 3self.blurredImageView=[[UIImageViewalloc] init];self.blurredImageView.contentMode=UIViewContentModeScaleAspectFill;self.blurredImageView.alpha=0;[self.blurredImageView setImageToBlur:background blurRadius:10 completionBlock:nil];[self.view addSubview:self.blurredImageView];// 4self.tableView=[[UITableViewalloc] init];self.tableView.backgroundColor=[UIColorclearColor];self.tableView.delegate=self;self.tableView.dataSource=self;self.tableView.separatorColor=[UIColor colorWithWhite:1 alpha:0.2];self.tableView.pagingEnabled=YES;[self.view addSubview:self.tableView];

這是非常簡單的程式碼：

1. 獲取並存儲螢幕高度。之後，你將在用分頁的方式來顯示所有天氣​​資料時，使用它。
2. 建立一個靜態的背景圖，並新增到檢視上。
3. 使用LBBlurredImage來建立一個模糊的背景影象，並設定alpha為0，使得開始backgroundImageView是可見的。
4. 建立tableview來處理所有的資料呈