1 創建集合視圖，設置相關屬性以滿足要求

1.1 問題

集合視圖控制器UIConllectionViewController是一個展示大量數據的控制器，系統默認管理著一個集合視圖UICollectionView，功能幾乎和UITableViewController差不多，能夠以多行多列的形式展示數據。

集合視圖UICollectionView繼承至UIScrollView，也同tableView一樣有兩個協議，分別是UICollectionViewDataSource數據源協議和UICollectionViewDelegate委托協議，本案例將學習如何使用UICollectionView來展示數據，如圖-1所示：

圖-1

1.2 方案

首先創建一個SingleViewApplication項目，然后創建一個TRMyCollectionViewController集合視圖控制器，該視圖控制器繼承至UICollectionViewController，然后在TRAppDelegate中創建一個帶有導航的TRMyCollectionViewController集合視圖控制作為根視圖控制器。

其次在xib文件刪除自動生成的View視圖，增加一個CollectionView視圖，并將File’s Owner的view屬性連線到CollectionView，同時也將collectionView的dataSource和delegate進行連線。

在xib中選中collectionView在右邊欄的檢查器中設置collectionView的各種屬性，包括單元格的寬高、分區的邊距，單元格之間的間距，滾動方向等。

然后創建一個帶有xib文件的TRMyCell類，該類繼承至UICollectionViewCell，UICollectionViewCell是集合視圖的單元格類，是集合視圖的重要組成部分，與表視圖的單元格不同，由于集合視圖的單元格沒有系統定義好的內容視圖和輔助視圖，所以集合視圖的單元格通常都需要自定義。

最后在TRMyCollectionViewController中注冊集合視圖的單元格，然后實現集合視圖的協議方法，給集合視圖加載數據。

1.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建TRMyCollectionViewController類

在Xcode項目中創建一個TRMyCollectionViewController集合視圖控制器，該視圖控制器繼承至UICollectionViewController，然后在TRAppDelegate中創建一個帶有導航的TRMyCollectionViewController集合視圖控制作為根視圖控制器，代碼如下所示：

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions

{

self.window?=?[[UIWindow?alloc] initWithFrame:[[UIScreen?mainScreen] bounds]];

self.window.backgroundColor?=?[UIColor?whiteColor];

TRMyCollectionViewController?*myCVC?=?[[TRMyCollectionViewController?alloc]initWithNibName:@"TRMyCollectionViewController" bundle:nil];

UINavigationController?*navi?=?[[UINavigationController?alloc]initWithRootViewController:myCVC];

self.window.rootViewController?= navi;

[self.window?makeKeyAndVisible];

return YES;

}

步驟二：在xib文件中設置集合視圖

將xib文件中的view視圖刪除，從對象庫中拖拽一個CollectionView到xib中，注意不要選成了CollectionViewController，如圖-2所示：

圖-2

然后將File’s Owner的view屬性連線到CollectionView，同時也將collectionView的dataSource和delegate進行連線，如圖-3所示：

圖-3

最后在右邊欄的第五個檢查器中設置collectionView的相關屬性，包括單元格的寬高，分區的邊距以及單元格之間的間距等，如圖-4所示：

圖-4

由于UICollectionView是繼承至UIScrollView，所以也可以滾動，默認的滾動方向是垂直的，也可以通過右邊欄的第四個檢查器將滾動方向設置為水平的，如圖-5所示：

圖-5

步驟三：創建單元格類TRMyCell，自定義集合視圖單元格

創建一個帶有xib文件的TRMyCell類，該類繼承至UICollectionViewCell，在xib文件中拖放一個Label控件到CollectionViewCell中，并設置Label的相關屬性，如圖-6所示：

圖-6

將Label控件關聯成TRMyCell的公開屬性displayLabel，代碼如下所示：

@interface?TRMyCell?: UICollectionViewCell

@property?(weak, nonatomic)?IBOutlet?UILabel?*displayLabel;

@end

然后在TRMyCollectionViewController中導入頭文件“TRMyCell.h”，并且在viewDidLoad方法里面注冊cell，代碼如下所示：

//定義個cell標識

static?NSString?*cellIdentifier?= @"MyCell";

-?(void)viewDidLoad

{

[super viewDidLoad];

self.title?= @"CollectionView";

//注冊cell

[self.collectionView?registerNib:[UINib?nibWithNibName:@"TRMyCell" bundle:nil] forCellWithReuseIdentifier:cellIdentifier];

}

步驟四：實現集合視圖的協議方法，加載數據

首先實現集合視圖的協議方法numberOfSectionsInCollectionView:告訴集合視圖需要顯示的分區數，代碼如下所示：

-?(NSInteger)numberOfSectionsInCollectionView:(UICollectionView?*)collectionView

{

return?15;

}

然后實現協議方法告訴集合視圖每個分區需要顯示的單元格數，如圖-6所示：

-(NSInteger)collectionView:(UICollectionView?*)collectionView?

numberOfItemsInSection:(NSInteger)section

{

return?10;

}

最后實現協議方collectionView:cellForItemAtIndexPath：告訴集合視圖需要顯示的內容。同表視圖一樣在該方法里面使用dequeueReusableCellWithReuseIdentifier:forIndexPath:方法創建cell對象，并且根據indexPath參數設置每個cell的顯示內容，代碼如下所示：

-(UICollectionViewCell?*)collectionView:(UICollectionView?*)collectionView?

cellForItemAtIndexPath:(NSIndexPath?*)indexPath

{

TRMyCell?*cell?=?[collectionView?dequeueReusableCellWithReuseIdentifier:cellIdentifier?forIndexPath:indexPath];

cell.displayLabel.text?=?[NSString?stringWithFormat:@"%d",indexPath.row];

cell.backgroundColor?=?[UIColor?colorWithRed:0 green:1 blue:0 alpha:indexPath.row?*?0.1];

return cell;

}

1.4 完整代碼

本案例中，TRAppDelegate.m文件中的完整代碼如下所示：

?

#import?"TRAppDelegate.h"

#import?"TRCustomLayoutCollectionViewController.h"

@implementation TRAppDelegate

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc] initWithFrame:[[UIScreen?mainScreen] bounds]];

self.window.backgroundColor?=?[UIColor?whiteColor];

TRCustomLayoutCollectionViewController?*myCVC?=?[[TRCustomLayoutCollectionViewController?alloc]initWithNibName:@"TRCustomLayoutCollectionViewController" bundle:nil];

UINavigationController?*navi?=?[[UINavigationController?alloc]initWithRootViewController:myCVC];

self.window.rootViewController?= navi;

[self.window?makeKeyAndVisible];

return YES;

}

@end

?

本案例中，TRMyCollectionViewController.m文件中的完整代碼如下所示：

?

#import?"TRMyCollectionViewController.h"

#import?"TRMyCell.h"

@implementation TRMyCollectionViewController

//定義個cell標識

static?NSString?*cellIdentifier?= @"MyCell";

-?(void)viewDidLoad

{

[super viewDidLoad];

self.title?= @"CollectionView";

//注冊cell

[self.collectionView?registerNib:[UINib?nibWithNibName:@"TRMyCell" bundle:nil] forCellWithReuseIdentifier:cellIdentifier];

}

-?(NSInteger)numberOfSectionsInCollectionView:(UICollectionView?*)collectionView

{

return?15;

}

-(NSInteger)collectionView:(UICollectionView?*)collectionView?

numberOfItemsInSection:(NSInteger)section

{

return?10;

}

-?(UICollectionViewCell?*)collectionView:(UICollectionView?*)collectionView?

cellForItemAtIndexPath:(NSIndexPath?*)indexPath

{

TRMyCell?*cell?=?[collectionView?dequeueReusableCellWithReuseIdentifier:cellIdentifier?forIndexPath:indexPath];

cell.displayLabel.text?=?[NSString?stringWithFormat:@"%d",indexPath.row];

cell.backgroundColor?=?[UIColor?colorWithRed:0 green:1 blue:0 alpha:indexPath.row?*?0.1];

return cell;

}

@end

?

本案例中，TRMyCell.h文件中的完整代碼如下所示：

?

#import<UIKit/UIKit.h>

@interface?TRMyCell?: UICollectionViewCell

@property?(weak, nonatomic)?IBOutlet?UILabel?*displayLabel;

@end

?

2 使用布局創建集合視圖

2.1 問題

CollectionView的布局是其精髓，相當于CollectionView的大腦和中樞，負責設置CollectionView的一些屬性，包括位置、尺寸、透明度、層級關系、形狀等，本案例將使用集合視圖的布局用代碼創建一個集合視圖，如圖-7所示：

圖-7

2.2 方案

UICollectionViewFlowLayout布局類是UICollectionViewLayout類的子類，稱為流式布局類，所有的單元格都依次挨著擺放。

首先創建一個SingleViewApplication項目，然后創建一個帶有導航的TRCustomLayoutCollectionViewController視圖控制器作為根視圖控制器，該視圖繼承至UIViewController。

其次在viewDidLoad方法里面創建一個UICollectionViewFlowLayout布局對象，設置布局對象的各種屬性。

然后在viewDidLoad方法里面創建集合視圖對象collectionView，使用初始化方法initWithFrame:collectionViewLayout:進行初始化，collectionViewLayout:所傳遞的參數就是上一步所創建的布局對象。

最后注冊集合視圖的cell，TRCustomLayoutCollectionViewController遵守集合視圖協議，并且實現協議方法給集合視圖加載數據。

2.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建集合視圖項目

在Xcode項目中創建一個TRCustomLayoutCollectionViewController視圖控制器類，繼承至UIViewController。然后在TRAppDelegate中創建一個帶有導航的TRCustomLayoutCollectionViewController視圖控制器作為根視圖控制器，代碼如下所示：

?

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions

{

self.window?=?[[UIWindow?alloc] initWithFrame:[[UIScreen?mainScreen] bounds]];

self.window.backgroundColor?=?[UIColor?whiteColor];

TRCustomLayoutCollectionViewController?*myCVC?=?[[TRCustomLayoutCollectionViewController?alloc]initWithNibName:@"TRCustomLayoutCollectionViewController" bundle:nil];

UINavigationController?*navi?=?[[UINavigationController?alloc]initWithRootViewController:myCVC];

self.window.rootViewController?= navi;

[self.window?makeKeyAndVisible];

return YES;

}

步驟二：創建UICollectionViewFlowLayout布局對象

首先在viewDidLoad方法里面創建集合視圖對象collectionView，使用初始化方法initWithFrame:collectionViewLayout:進行初始化，frame：所傳遞的參數就是屏幕的大小，collectionViewLayout:所傳遞的參數就是上一步所創建的布局對象，代碼如下所示：

?

//創建集合視圖的布局對象

UICollectionViewFlowLayout?*layout?=?[[UICollectionViewFlowLayout?alloc]init];

//設置每個cell的大小

layout.itemSize?=?CGSizeMake(150,?150);

//設置每個cell之間的間距

layout.minimumInteritemSpacing?=?10;

//設置每個分局的邊距

layout.sectionInset?=?UIEdgeInsetsMake(150,?20,?150,?20);

//設置滾動方向為水平方向

layout.scrollDirection?= UICollectionViewScrollDirectionHorizontal;

步驟三：創建集合視圖對象collectionView

在xib界面上拖拽一個UISlider控件，在右邊欄的第四個檢查器中將miniMum、maxiMum和current分別設置為0、1和0，然后將slider關聯成TRViewController的方法sliderValueChange:，該方法主要實現功能是拖動滑塊能控制tableView1在界面中的顯示第幾行單元格，在方法里面根據slider的value值計算出tableView的contentOffset即可，代碼如下所示：

//創建集合視圖對象

CGSize?screenSize?=?[[UIScreen?mainScreen] bounds].size;

UICollectionView?*collectionView?=?[[UICollectionView?alloc]initWithFrame:CGRectMake(0,?0, screenSize.width, screenSize.height) collectionViewLayout:layout];

然后設置collectionView的數據源對象和委托對象，并添加到父視圖中，代碼如下所示：

?

//設置collectionView的委托對象

collectionView.dataSource?= self;

collectionView.delegate?= self;

//將集合視圖添加到父視圖中

[self.view?addSubview:collectionView];

步驟四：遵守委托協議，實現協議方法

首先在viewDidLoad方法里面注冊集合視圖的單元格，本案例沒有使用自定義的cell，而是直接使用系統提供的UICollectionViewCell，所以使用方法registerClass:forCellWithReuseIdentifier:進行注冊，registerClass:參數傳遞的是UICollectionViewCell類，代碼如下所示：

?

//在viewDidLoad方法外面定義cell的注冊標識

static?NSString?*cellIdentifier?= @"MyCell";

//在viewDidLoad方法里面進行cell的注冊

[collectionView?registerClass:[UICollectionViewCell?class] forCellWithReuseIdentifier:cellIdentifier];

然后TRCustomLayoutCollectionViewController遵守集合視圖協議，并且實現協議方法給集合視圖加載數據，代碼如下所示：

?

//遵守集合視圖的數據源協議和委托協議

@interface?TRCustomLayoutCollectionViewController?()?<UICollectionViewDataSource, UICollectionViewDelegate>

@end

-?(NSInteger)numberOfSectionsInCollectionView:(UICollectionView?*)collectionView

{

return?10;

}

-(NSInteger)collectionView:(UICollectionView?*)collectionView?

numberOfItemsInSection:(NSInteger)section

{

return?6;

}

-(UICollectionViewCell?*)collectionView:(UICollectionView?*)collectionView?

cellForItemAtIndexPath:(NSIndexPath?*)indexPath

{

UICollectionViewCell?*cell?=?[collectionView?dequeueReusableCellWithReuseIdentifier:cellIdentifier?forIndexPath:indexPath];

cell.backgroundColor?=?[UIColor?grayColor];

return cell;

}

2.4 完整代碼

本案例中，TRAppDelegate.m文件中的完整代碼如下所示：

?

#import?"TRAppDelegate.h"

#import?"TRViewController.h"

@implementation TRAppDelegate

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions

{

self.window?=?[[UIWindow?alloc] initWithFrame:[[UIScreen?mainScreen] bounds]];

self.window.backgroundColor?=?[UIColor?whiteColor];

TRViewController?*vc?=?[[TRViewController?alloc]initWithNibName:@"TRViewController" bundle:nil];

UINavigationController?*navi?=?[[UINavigationController?alloc]initWithRootViewController:vc];

self.window.rootViewController?= navi;

[self.window?makeKeyAndVisible];

return YES;

}

@end

?

本案例中，TRCustomLayoutCollectionViewController.m文件中的完整代碼如下所示：

?

#import?"TRCustomLayoutCollectionViewController.h"

//遵守集合視圖的數據源協議和委托協議

@interface?TRCustomLayoutCollectionViewController?()?<UICollectionViewDataSource, UICollectionViewDelegate>

@end

@implementation TRCustomLayoutCollectionViewController

//在viewDidLoad方法外面定義cell的注冊標識

static?NSString?*cellIdentifier?= @"MyCell";

-?(void)viewDidLoad

{

[super viewDidLoad];

UICollectionViewFlowLayout?*layout?=?[[UICollectionViewFlowLayout?alloc]init];

//設置每個cell的大小

layout.itemSize?=?CGSizeMake(150,?150);

//設置每個cell之間的間距

layout.minimumInteritemSpacing?=?10;

//設置每個分局的邊距

layout.sectionInset?=?UIEdgeInsetsMake(150,?20,?150,?20);

//設置滾動方向為水平方向

layout.scrollDirection?= UICollectionViewScrollDirectionHorizontal;

//創建集合視圖對象

CGSize?screenSize?=?[[UIScreen?mainScreen] bounds].size;

UICollectionView?*collectionView?=?[[UICollectionView?alloc]initWithFrame:CGRectMake(0,?0, screenSize.width, screenSize.height) collectionViewLayout:layout];

//設置collectionView的委托對象

collectionView.dataSource?= self;

collectionView.delegate?= self;

//將集合視圖添加到父視圖中

[self.view?addSubview:collectionView];

//由于直接使用的系統的UICollectionViewCell，注冊cell使用registerClass:方法

[collectionView?registerClass:[UICollectionViewCell?class] forCellWithReuseIdentifier:cellIdentifier];

}

-?(NSInteger)numberOfSectionsInCollectionView:(UICollectionView?*)collectionView

{

return?10;

}

-(NSInteger)collectionView:(UICollectionView?*)collectionView?

numberOfItemsInSection:(NSInteger)section

{

return?6;

}

-(UICollectionViewCell?*)collectionView:(UICollectionView?*)collectionView?

cellForItemAtIndexPath:(NSIndexPath?*)indexPath

{

UICollectionViewCell?*cell?=?[collectionView?dequeueReusableCellWithReuseIdentifier:cellIdentifier?forIndexPath:indexPath];

cell.backgroundColor?=?[UIColor?grayColor];

return cell;

}

@end

3 使用TabBar管理多個VC及Navi

3.1 問題

UITabbarController同導航控制器一樣是一個控制器的控制器，標簽欄位于屏幕下方，占有49個像素，本案例將學習如何使用標簽控制器來管理視圖控制器，如圖-8所示：

圖-8

3.2 方案

首先同樣創建一個SingleViewApplication項目，然后創建三個帶有xib的視圖控制器類TRFirstViewController、TRSecondViewController，TRThirdViewController，作為標簽控制器所管理的子控制器。

然后在TRAppDelegate的程序入口方法中分別創建三個帶有導航子視圖控制器對象，再創建一個UITabbarController對象tabbar，將三個視圖控制器對象設置為tabbar的子視圖控制器，屏幕下方的標簽欄就回有三個按鈕對應三個子視圖控制。

通常為了點擊方便一般管理的子視圖控制器不超過五個，如果超過五個則最后一個標簽欄按鈕顯示為更多，點擊更多標簽按鈕會出現一個更多列表。

最后將tabbar設置為根視圖控制器，分別在三個子視圖控制器類中設置title和tabBarItem的顯示內容。

3.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建TRTableViewController視圖控制器

首先在Xcode項中創建三個帶有xib的視圖控制器類TRFirstViewController、TRSecondViewController，TRThirdViewController，全都繼承至UIViewController，并在xib中給三個控制器的視圖設置不同的背景顏色。

這三個視圖控制器將作為標簽控制器所管理的子控制器，如圖-9所示：

圖-9

步驟二：創建UITabbarController對象

在TRAppDelegate的程序入口方法中分別創建三個帶有導航子視圖控制器對象，代碼如下所示：

?

TRFirstViewController?*firstVC?=?[[TRFirstViewController?alloc]initWithNibName:@"TRFirstViewController" bundle:nil];

UINavigationController?*navi1?=?[[UINavigationController?alloc]initWithRootViewController:firstVC];

TRSecondViewController?*secondVC?=?[[TRSecondViewController?alloc]initWithNibName:@"TRSecondViewController" bundle:nil];

UINavigationController?*navi2?=?[[UINavigationController?alloc]initWithRootViewController:secondVC];

TRThirdViewController?*thirdVC?=?[[TRThirdViewController?alloc]initWithNibName:@"TRThirdViewController" bundle:nil];

UINavigationController?*navi3?=?[[UINavigationController?alloc]initWithRootViewController:thirdVC];

然后再創建一個UITabbarController對象tabbar，將三個視圖控制器對象設置為tabbar的子視圖控制器，屏幕下方的標簽欄就回有三個按鈕對應三個子視圖控制，代碼如下所示：

?

//創建UITabBarController對象

UITabBarController?*tabbar?=?[[UITabBarController?alloc]init];

//設置tabbar的子控制器

tabbar.viewControllers?= @[navi1, navi2, navi3];

最后將tabbar設置為根視圖控制器，運行程序顯示的第一個界面為標簽控制器所管理的第一個子控制器的視圖，代碼如下所示：

?

self.window.rootViewController?= tabbar;

步驟三：設置title和tabBarItem

分別在三個子視圖控制器類中的initWithNibName:bundle:初始化方法中設置title和tabBarItem的顯示內容，代碼如下所示：

?

//TRFirstViewController類中

-?(id)initWithNibName:(NSString?*)nibNameOrNil?bundle:(NSBundle?*)nibBundleOrNil

{

self?=?[super initWithNibName:nibNameOrNil?bundle:nibBundleOrNil];

if?(self)?{

self.title?= @"FirstVC";

self.tabBarItem.image?=?[UIImage?imageNamed:@"tabbar_item_selected.png"];

}

return self;

}

//TRSecondViewController類中

-?(id)initWithNibName:(NSString?*)nibNameOrNil?bundle:(NSBundle?*)nibBundleOrNil

{

self?=?[super initWithNibName:nibNameOrNil?bundle:nibBundleOrNil];

if?(self)?{

self.title?= @"@"SecondVC"";

self.tabBarItem.image?=?[UIImage?imageNamed:@"tabbar_item_music.png"];

}

return self;

}

//TRThirdViewController類中

-?(id)initWithNibName:(NSString?*)nibNameOrNil?bundle:(NSBundle?*)nibBundleOrNil

{

self?=?[super initWithNibName:nibNameOrNil?bundle:nibBundleOrNil];

if?(self)?{

self.title?= @"ThirdVC"";

self.tabBarItem.image = [UIImage imageNamed:@"tabbar_item_store.png"];

}

return self;

}

運行程序可見標簽按鈕都添加了標題和圖片，如圖-10所示：

圖-10

3.4 完整代碼

本案例中，TRAppDelegate.m文件中的完整代碼如下所示：

?

#import?"TRAppDelegate.h"

#import?"TRFirstViewController.h"

#import?"TRSecondViewController.h"

#import?"TRThirdViewController.h"

@implementation TRAppDelegate

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions

{

self.window?=?[[UIWindow?alloc] initWithFrame:[[UIScreen?mainScreen] bounds]];

self.window.backgroundColor?=?[UIColor?whiteColor];

//創建tabbar所管理的子控制器，每個子控制器都帶有一個導航

TRFirstViewController?*firstVC?=?[[TRFirstViewController?alloc]initWithNibName:@"TRFirstViewController" bundle:nil];

UINavigationController?*navi1?=?[[UINavigationController?alloc]initWithRootViewController:firstVC];

TRSecondViewController?*secondVC?=?[[TRSecondViewController?alloc]initWithNibName:@"TRSecondViewController" bundle:nil];

UINavigationController?*navi2?=?[[UINavigationController?alloc]initWithRootViewController:secondVC];

TRThirdViewController?*thirdVC?=?[[TRThirdViewController?alloc]initWithNibName:@"TRThirdViewController" bundle:nil];

UINavigationController?*navi3?=?[[UINavigationController?alloc]initWithRootViewController:thirdVC];

//創建UITabBarController對象

UITabBarController?*tabbar?=?[[UITabBarController?alloc]init];

//設置tabbar的子控制器

tabbar.viewControllers?= @[navi1, navi2, navi3];

//將標簽控制器設置為根視圖控制器，程序的第一個界面默認為標簽控制器所管理的第一個子控制器的視圖

self.window.rootViewController?= tabbar;

[self.window?makeKeyAndVisible];

return YES;

}

@end

?

本案例中，TRFirstViewController.m文件中的完整代碼如下所示：

?

#import?"TRFirstViewController.h"

@implementation TRFirstViewController

-?(id)initWithNibName:(NSString?*)nibNameOrNil?bundle:(NSBundle?*)nibBundleOrNil

{

self?=?[super initWithNibName:nibNameOrNil?bundle:nibBundleOrNil];

if?(self)?{

self.title?= @"FirstVC";

self.tabBarItem.image?=?[UIImage?imageNamed:@"tabbar_item_selected.png"];

}

return self;

}

@end

?

本案例中，TRSecondViewController.m文件中的完整代碼如下所示：

?

#import?"TRSecondViewController.h"

@implementation TRFirstViewController

-?(id)initWithNibName:(NSString?*)nibNameOrNil?bundle:(NSBundle?*)nibBundleOrNil

{

self?=?[super initWithNibName:nibNameOrNil?bundle:nibBundleOrNil];

if?(self)?{

self.title?= @"SecondVC";

self.tabBarItem.image?=?[UIImage?imageNamed:@"tabbar_item_music.png"];

}

return self;

}

@end

本案例中，TRThirdViewController.m文件中的完整代碼如下所示：

?

#import?"TRFirstViewController.h"

@implementation TRFirstViewController

-?(id)initWithNibName:(NSString?*)nibNameOrNil?bundle:(NSBundle?*)nibBundleOrNil

{

self?=?[super initWithNibName:nibNameOrNil?bundle:nibBundleOrNil];

if?(self)?{

self.title?= @"ThirdVC";

self.tabBarItem.image?=?[UIImage?imageNamed:@"tabbar_item_store.png"];

}

return self;

}

@end

隱藏

4 分段選擇展示

4.1 問題

IOS提供了分段選擇控件，分段控件由兩段或更多段構成，每一段都相當于一個獨立的按鈕。分段控件通常只能激活其中一個按鈕。本案例將學習如何使用分段選擇控件，根據不同的選擇改變label的顯示內容，如圖-11所示：

圖-11

4.2 方案

首先同樣創建一個SingleViewApplication項目，然后創建一個帶有xib的視圖控制器類TRViewController，作為本案例的根視圖控制器。

其次在xib文件中拖放一個SegmentedControl控件和一個標簽控件。

然后在右邊欄的第四個檢查器中設置SegmentedControl控件的各屬性，包括樣式、每個分段按鈕的顯示標題、背景樣色以及渲染顏色。

最后將xib中的label關聯成屬性，將SegmentedControl關聯成方法，在TRViewController.m文件中實現SegmentedControl的事件響應方法。

4.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建TRViewController視圖控制器

首先在Xcode項中創建一個帶有xib的視圖控制器類TRViewController，繼承至UIViewController，并在TRAppDelegate的程序入口方法中創建根視圖控制器對象，代碼如下所示：

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[[UIScreen?mainScreen]bounds]];

TRViewController?*vc?=?[[TRViewController?alloc]initWithNibName:@"TRViewController" bundle:nil];

self.window.rootViewController?= vc;

[self.window?makeKeyAndVisible];

return YES;

}

步驟二：在xib文件中拖放控件

在xib文件中拖放一個SegmentedControl控件和一個標簽控件，如圖-12所示：

圖-12

然后在右邊欄的第四個檢查器中設置日期檢查器的相關屬性，將分段數設置為3個，并以此設置每個分段的標題，如圖-13所示：

圖-13

步驟三：關聯代碼，實現方法

首先將xib中的label關聯成私用屬性label，代碼如下所示：

@interface?TRDatePickerViewController?()

@property?(weak, nonatomic)?IBOutlet?UILabel?*label;

@end

然后將SegmentedControl關聯成事件方法segmentedControlAction:，此時SegmentedControl的事件應選擇valueChanged，segmentedControlAction:方法的功能是根據不同的選擇修改label的顯示內容，代碼如下所示：

?

-(IBAction)segmentedControlAction:(UISegmentedControl?*)sender?{

NSInteger?*index?=?[sender?selectedSegmentIndex];

NSString?*title?=?[sender?titleForSegmentAtIndex:index];

self.label.text?=?[NSString?stringWithFormat:@"用戶選中%@",title];

}

4.4 完整代碼

本案例中，TRAppDelegate.m文件中的完整代碼如下所示：

?

#import?"TRAppDelegate.h"

#import?"TRViewController.h"

@implementation TRAppDelegate

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[UIScreen?mainScreen].bounds];

TRViewController?*vc?=?[[TRViewController?alloc]initWithNibName:@"TRViewController" bundle:nil];

self.window.rootViewController?= vc;

[self.window?makeKeyAndVisible];

return YES;

}

@end

?

本案例中，TRViewController.m文件中的完整代碼如下所示：

?

#import?"TRViewController.h"

@interface?TRViewController?()

@property?(weak, nonatomic)?IBOutlet?UILabel?*label;

@end

@implementation TRViewController

-?(IBAction)segmentedControlAction:(UISegmentedControl?*)sender?{

NSInteger?*index?=?[sender?selectedSegmentIndex];

NSString?*title?=?[sender?titleForSegmentAtIndex:index];

self.label.text?=?[NSString?stringWithFormat:@"用戶選中%@",title];

}

@end

5 下載進度指示

5.1 問題

活動指示器UIActivityIndicatorView是UIKit框架提供的一個用于提示用戶等待的指示圖，是一個標準的旋轉進度輪。本案例使用活動指示器和進度條模擬實現下載進度指示，如圖-14所示：

圖-14

5.2 方案

首先同樣創建一個SingleViewApplication項目，然后創建一個帶有xib的視圖控制器類TRViewController，作為本案例的根視圖控制器。

其次在xib文件中拖放一個ActivityIndicatorView控件和一個ProgressView控件。

然后在右邊欄的第四個檢查器中設置ActivityIndicatorView和ProgressView各屬性。

最后將xib中的ActivityIndicatorView和ProgressView關聯成私用屬性，在viewDidLoad方法里面創建一個計時器，模擬下載進度。

5.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建TRViewController視圖控制器

首先在Xcode項中創建一個帶有xib的視圖控制器類TRViewController，繼承至UIViewController，并在TRAppDelegate的程序入口方法中創建根視圖控制器對象，代碼如下所示：

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[[UIScreen?mainScreen]bounds]];

TRViewController?*vc?=?[[TRViewController?alloc]initWithNibName:@"TRViewController" bundle:nil];

self.window.rootViewController?= vc;

[self.window?makeKeyAndVisible];

return YES;

}

步驟二：在xib文件中拖放控件

在xib文件中拖放一個ActivityIndicatorView控件和一個ProgressView控件，如圖-15所示：

圖-15

然后在右邊欄的第四個檢查器中設置ActivityIndicatorView控件的相關屬性，將Hides When Stopped選項勾上，表示當ActivityIndicatorView停止旋轉時隱藏，如圖-16所示：

圖-16

最后在右邊欄的第四個檢查器中設置ProgressView控件的相關屬性，將Progress的值設置為0，progress是UIProgressView的一個重要屬性，是float類型，默認的取值范圍為0~1，如圖-17所示：

圖-17

步驟三：關聯代碼，實現方法

首先將xib中的ActivityIndicatorView和ProgressView關聯成私用屬性activityIndicatorView和progressView，代碼如下所示：

?

@interface?TRDatePickerViewController?()

@property?(weak, nonatomic)?IBOutletUIActivityIndicatorView?*activityIndicatorView;

@property?(weak, nonatomic)?IBOutlet?UIProgressView?*progressView;

@end

然后在viewDidLoad方法里面創建一個NSTimer類型的計時器對象，計時器可以設定固定的時間間隔反復調用某個方法，本案例使用計時器模擬實現一個下載進度狀態，每隔一定的時間修改progressView的progress值，當progress的值為1時，activityIndicatorView停止旋轉并隱藏，代碼如下所示：

?

-?(void)viewDidLoad?{

[super viewDidLoad];

//timeInterval參數是時間間隔，以秒為單位，target:參數是目標，selector參數是調用的方法，repeats參數表示是否重復調用該方法

[NSTimer?scheduledTimerWithTimeInterval:1 target:self?selector:@selector(download：) userInfo:nil?repeats:YES];

}

最后實現download:方法，該方法實現功能修改progressView的progress值，當progress的值為1時，activityIndicatorView停止旋轉并隱藏，該方法傳遞過來的參數就是計時器對象，代碼如下所示：

?

//download方法的參數就是計時器對象

-(void)download:(NSTimer*)timer?{

//活動指示器開始旋轉

[self.activityIndicatorView?startAnimating];

//每次調用進度條的progress都加0.1

self.progressView.progress+=0.1;

if?(self.progressView.progress?==1)?{

//當進度條的progress==1時，表示下載完成，活動指示器停止旋轉

[self.activityIndicatorView?stopAnimating];

//彈出提示對話框

UIAlertView?*av?=?[[UIAlertView?alloc]initWithTitle:@"提示" message:@"下載完成" delegate:nil?cancelButtonTitle:@"確定" otherButtonTitles:nil, nil];

[av?show];

//計時器停止

[timer?invalidate];

}

}

5.4 完整代碼

本案例中，TRAppDelegate.m文件中的完整代碼如下所示：

?

#import?"TRAppDelegate.h"

#import?"TRViewController.h"

@implementation TRAppDelegate

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[UIScreen?mainScreen].bounds];

TRViewController?*vc?=?[[TRViewController?alloc]initWithNibName:@"TRViewController" bundle:nil];

self.window.rootViewController?= vc;

[self.window?makeKeyAndVisible];

return YES;

}

@end

本案例中，TRViewController.m文件中的完整代碼如下所示：

?

#import?"TRViewController.h"

@interface?TRViewController?()

@property?(weak, nonatomic) IBOutlet

UIActivityIndicatorView?*activityIndicatorView;

@property?(weak, nonatomic)?IBOutlet?UIProgressView?*progressView;

@end

@implementation TRViewController

-?(void)viewDidLoad?{

[super viewDidLoad];

[NSTimer?scheduledTimerWithTimeInterval:1 target:self?selector:@selector(download:) userInfo:nil?repeats:YES];

}

//download方法的參數就是計時器對象

-(void)download:(NSTimer*)timer?{

//活動指示器開始旋轉

[self.activityIndicatorView?startAnimating];

//每次調用進度條的progress都加0.1

self.progressView.progress+=0.1;

if?(self.progressView.progress?==1)?{

//當進度條的progress==1時，表示下載完成，活動指示器停止旋轉

[self.activityIndicatorView?stopAnimating];

//彈出提示對話框

UIAlertView?*av?=?[[UIAlertView?alloc]initWithTitle:@"提示" message:@"下載完成" delegate:nil?cancelButtonTitle:@"確定" otherButtonTitles:nil, nil];

[av?show];

//計時器停止

[timer?invalidate];

}

}

@end

6 使用DatePicker控件選擇日期

6.1 問題

IOS提供了日期選擇器控件，可以提供對日期的選擇，本案例將學習如何使用日期選擇器來選擇時間，如圖-18所示：

圖-18

6.2 方案

首先同樣創建一個SingleViewApplication項目，然后創建一個帶有xib的視圖控制器類TRDatePickerViewController，作為本案例的根視圖控制器。

其次在xib文件中拖放一個DatePicker控件、一個標簽控件以及一個按鈕控件。日期選擇器提供四種模式：日期、日期和時間、時間以及倒計時，本案例使用日期和時間模式。

然后在右邊欄的第四個檢查器中設置日期選擇器的各屬性，包括Mode模式、Local設定本地化、Interval設定時間間隔、Date開始時間、Constraints顯示的最大和最小日期。

最后將xib中的日期選擇器和label關聯成屬性，將日期選擇器和按鈕關聯成方法，在TRDatePickerViewController.m文件中實現日期選擇器和按鈕的事件響應方法。

6.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建TRDatePickerViewController視圖控制器

首先在Xcode項中創建一個帶有xib的視圖控制器類TRDatePickerViewController，繼承至UIViewController，并在TRAppDelegate的程序入口方法中創建根視圖控制器對象，代碼如下所示：

?

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[[UIScreen?mainScreen]bounds]];

TRDatePickerViewController?*dpVC?=?[[TRDatePickerViewController?alloc]initWithNibName:@"TRDatePickerViewController" bundle:nil];

UINavigationController?*navi?=?[[UINavigationController?alloc]initWithRootViewController:dpVC];

self.window.rootViewController?= navi;

[self.window?makeKeyAndVisible];

return YES;

}

步驟二：在xib文件中拖放控件

在xib文件中拖放一個DatePicker控件、一個標簽控件以及一個按鈕控件，如圖-19所示：

圖-19

然后在右邊欄的第四個檢查器中設置日期檢查器的相關屬性，將模式選擇為Date and Time，如圖-20所示：

圖-20

步驟三：關聯代碼，實現方法

首先將xib中的日期選擇器和label關聯成私用屬性datePicker和dateLabel，代碼如下所示：

?

@interface?TRDatePickerViewController?()

@property?(weak, nonatomic)?IBOutlet?UIDatePicker?*datePicker;

@property?(weak, nonatomic)?IBOutlet?UILabel?*dateLabel;

@end

然后將日期選擇器關聯成事件方法datePickerValueChanged:，此時日期選擇器的的事件應選擇valueChanged，datePickerValueChanged:方法的功能是將日期選擇器所表示的時間顯示到dateLabel上，代碼如下所示：

?

-?(IBAction)datePickerValueChanged:(UIDatePicker?*)sender

{

NSDateFormatter?*df?=?[[NSDateFormatter?alloc]init];

[df?setDateFormat:@"YYYY-MM-dd HH:mm:ss"];

self.dateLabel.text?=?[df?stringFromDate:sender.date];

}

最后將按鈕關聯成事件方法launch:，該方法的功能是讓日期選擇器獲取當前日期，代碼如下所示：

?

-?(IBAction)launch:(id)sender

{

NSDate?*date?= self.datePicker.date;

NSDateFormatter?*df?=?[[NSDateFormatter?alloc]init];

[df?setDateFormat:@"YYYY-MM-dd HH:mm:ss"];

self.dateLabel.text?=?[df?stringFromDate:self.datePicker.date]；

date?=?[NSDate?date];

[self.datePicker?setDate:date?animated:YES]?

}

6.4 完整代碼

本案例中，TRAppDelegate.m文件中的完整代碼如下所示：

?

#import?"TRAppDelegate.h"

#import?"TRDatePickerViewController.h"

@implementation TRAppDelegate

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[[UIScreen?mainScreen]bounds]];

TRDatePickerViewController?*dpVC?=?[[TRDatePickerViewController?alloc]initWithNibName:@"TRDatePickerViewController" bundle:nil];

UINavigationController?*navi?=?[[UINavigationController?alloc]initWithRootViewController:dpVC];

self.window.rootViewController?= navi;

[self.window?makeKeyAndVisible];

return YES;

}

@end

?

本案例中，TRDatePickerViewController.m文件中的完整代碼如下所示：

?

#import?"TRDatePickerViewController.h"

@interface?TRDatePickerViewController?()

@property?(weak, nonatomic)?IBOutlet?UIDatePicker?*datePicker;

@property?(weak, nonatomic)?IBOutlet?UILabel?*dateLabel;

@end

@implementation TRDatePickerViewController

-?(id)initWithNibName:(NSString?*)nibNameOrNil?bundle:(NSBundle?*)nibBundleOrNil

{

self?=?[super initWithNibName:nibNameOrNil?bundle:nibBundleOrNil];

if?(self)?{

self.title?= @"Date";

}

return self;

}

-?(IBAction)launch:(id)sender

{

NSDate?*date?= self.datePicker.date;

NSDateFormatter?*df?=?[[NSDateFormatter?alloc]init];

[df?setDateFormat:@"YYYY-MM-dd HH:mm:ss"];

self.dateLabel.text?=?[df?stringFromDate:self.datePicker.date];

date?=?[NSDate?date];

[self.datePicker?setDate:date?animated:YES];

}

-?(IBAction)datePickerValueChanged:(UIDatePicker?*)sender

{

NSDateFormatter?*df?=?[[NSDateFormatter?alloc]init];

[df?setDateFormat:@"YYYY-MM-dd HH:mm:ss"];

self.dateLabel.text?=?[df?stringFromDate:sender.date];

}

@end

?

7 使用PickerView控件實現火車起始地點選擇

7.1 問題

有時候我們還需要選擇日期以外的內容，IOS提供了普通的視圖選擇器控件，可以滿足用戶的需要，本案例將學習如何使用PickerView控件實現火車起始地點選擇，如圖-21所示：

圖-21

7.2 方案

首先同樣創建一個SingleViewApplication項目，然后創建一個帶有xib的視圖控制器類TRPickerViewViewController，作為本案例的根視圖控制器。

其次在xib文件中拖放一個PickerView控件、一個標簽控件以及一個按鈕控件，并在右邊欄的第四個檢查器中設置各個控件的相關屬性。

然后將xib中的PickerView控件和label關聯成屬性，將按鈕關聯成方法。并以拉線的形式設置PickerView的委托對象為TRPickerViewViewController，TRPickerViewViewController類需要遵守協議UIPickerViewDataSource和 UIPickerViewDelegate。

最后在TRPickerViewViewController類中定義兩個NSArray的屬性formCity和toCity，用來存放PickerView顯示的數據。

在TRPickerViewViewController類中實現按鈕的事件響應方法和PickerView的協議方法，完成數據加載。

7.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建TRPickerViewViewController視圖控制器

首先在Xcode項中創建一個帶有xib的視圖控制器類TRPickerViewViewController，繼承至UIViewController，并在TRAppDelegate的程序入口方法中創建根視圖控制器對象，代碼如下所示：

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[[UIScreen?mainScreen]bounds]];

TRPickerViewViewController?*pvVC?=?[[TRPickerViewViewController?alloc]initWithNibName:@"TRPickerViewViewController" bundle:nil];

UINavigationController?*navi?=?[[UINavigationController?alloc]initWithRootViewController:pvVC]; self.window.rootViewController?= navi;

[self.window?makeKeyAndVisible];

return YES;

}

步驟二：在xib文件中拖放控件

在xib文件中拖放一個PickerView控件、一個標簽控件以及一個按鈕控件，并在右邊欄的第四個檢查器中設置各個控件的相關屬性，如圖-22所示：

圖-22

然后將xib中的PickerView控件和label關聯成私有屬性pickerView和label，將按鈕關聯成方法luanch:，代碼如下所示：

@interface?TRPickerViewViewController?()

@property?(weak, nonatomic)?IBOutlet?UIPickerView?*pickerView;

@property?(weak, nonatomic)?IBOutlet?UILabel?*label;

@end

最后以拉線的形式設置PickerView的dataSource和delegate兩個委托對象為File‘s Owner，即TRPickerViewViewController，如圖-23所示：

圖-23

步驟三：遵守協議，實現方法

在TRPickerViewViewController類中定義兩個NSArray類型的公開屬性formCity和toCity，用來存放PickerView顯示的數據，并重寫setter方法初始化數據，代碼如下所示：

@interface?TRPickerViewViewController?: UIViewController

@property?(nonatomic, strong)NSArray?*fromCitys;

@property?(nonatomic, strong)NSArray?*toCitys;

@end

//重寫setter方法，初始化數據

-?(NSArray?*)fromCitys

{

if(!_fromCitys)_fromCitys?= @[@"北京",@"上海",@"廣州",@"深圳",@"成都"];

return _fromCitys;

}

-?(NSArray?*)toCitys

{

if(!_toCitys)_toCitys?= @[@"上海",@"廣州",@"深圳",@"成都", @"杭州"];

return _toCitys;

}

然后TRPickerViewViewController類需要遵守協議UIPickerViewDataSource和 UIPickerViewDelegate，并且實現相關的協議方法，完成數據加載，代碼如下所示：

//遵守協議

@interface?TRPickerViewViewController?()?<UIPickerViewDataSource, UIPickerViewDelegate>

//告訴pickerView顯示多少組

-?(NSInteger)numberOfComponentsInPickerView:(UIPickerView?*)pickerView

{

return?2;

}

//告訴pickerView每組顯示多少行

-(NSInteger)pickerView:(UIPickerView?*)pickerView?

numberOfRowsInComponent:(NSInteger)component

{

if?(component==0)?{

return self.fromCitys.count;

}else?if(component==1){

return self.toCitys.count;

}

return?0;

}

//告訴pickerView每行顯示的標題

-(NSString?*)pickerView:(UIPickerView?*)pickerView?

titleForRow:(NSInteger)row?

forComponent:(NSInteger)component

{

if(component==0){

return self.fromCitys[row];

}else{

return self.toCitys[row];

}

}

最后在TRPickerViewViewController類中實現按鈕的事件響應方法luanch:，當點擊按鈕時label上顯示用戶選擇的起始地點信息，代碼如下所示：

-?(IBAction)luanch:(id)sender

{

NSInteger?fromIndex?=?[self.pickerView?selectedRowInComponent:0];

NSInteger?toIndex?=?[self.pickerView?selectedRowInComponent:1];

self.label.text?=?[NSString?stringWithFormat:@"用戶想從%@到%@", self.fromCitys[fromIndex], self.toCitys[toIndex]];

}

7.4 完整代碼

本案例中，TRAppDelegate.m文件中的完整代碼如下所示：

?

#import?"TRAppDelegate.h"

#import?"TRDatePickerViewController.h"

@implementation TRAppDelegate

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[[UIScreen?mainScreen]bounds]];

TRPickerViewViewController?*pvVC?=?[[TRPickerViewViewController?alloc]initWithNibName:@"TRPickerViewViewController" bundle:nil];

UINavigationController?*navi?=?[[UINavigationController?alloc]initWithRootViewController:pvVC];

self.window.rootViewController?= navi;

[self.window?makeKeyAndVisible];

return YES;

}

@end

本案例中，TRPickerViewViewController.h文件中的完整代碼如下所示：

?

#import<UIKit/UIKit.h>

@interface?TRPickerViewViewController?: UIViewController

@property?(nonatomic, strong)NSArray?*fromCitys;

@property?(nonatomic, strong)NSArray?*toCitys;

@end

?

本案例中，TRPickerViewViewController.m文件中的完整代碼如下所示：

?

#import?"TRPickerViewViewController.h"

@interface?TRPickerViewViewController?()?<UIPickerViewDataSource, UIPickerViewDelegate>

@property?(weak, nonatomic)?IBOutlet?UIPickerView?*pickerView;

@property?(weak, nonatomic)?IBOutlet?UILabel?*label;

@end

@implementation TRPickerViewViewController

-?(id)initWithNibName:(NSString?*)nibNameOrNil?bundle:(NSBundle?*)nibBundleOrNil

{

self?=?[super initWithNibName:nibNameOrNil?bundle:nibBundleOrNil];

if?(self)?{

self.title?= @"起始地點";

}

return self;

}

-?(NSArray?*)fromCitys

{

if(!_fromCitys)_fromCitys?= @[@"北京",@"上海",@"廣州",@"深圳",@"成都"];

return _fromCitys;

}

-?(NSArray?*)toCitys

{

if(!_toCitys)_toCitys?= @[@"上海",@"廣州",@"深圳",@"成都", @"杭州"];

return _toCitys;

}

//告訴pickerView顯示多少組

-?(NSInteger)numberOfComponentsInPickerView:(UIPickerView?*)pickerView

{

return?2;

}

//告訴pickerView每組顯示多少行

-?(NSInteger)pickerView:(UIPickerView?*)pickerView?numberOfRowsInComponent:(NSInteger)component

{

if?(component==0)?{

return self.fromCitys.count;

}else?if(component==1){

return self.toCitys.count;

}

return?0;

}

//告訴pickerView每行顯示的標題

-?(NSString?*)pickerView:(UIPickerView?*)pickerView?titleForRow:(NSInteger)row?forComponent:(NSInteger)component

{

if(component==0){

return self.fromCitys[row];

}else{

return self.toCitys[row];

}

}

-?(IBAction)luanch:(id)sender

{

NSInteger?fromIndex?=?[self.pickerView?selectedRowInComponent:0];

NSInteger?toIndex?=?[self.pickerView?selectedRowInComponent:1];

self.label.text?=?[NSString?stringWithFormat:@"用戶想從%@到%@", self.fromCitys[fromIndex], self.toCitys[toIndex]];

}

@end

?

8 網頁瀏覽

8.1 問題

網頁控件UIWebView是UIKit框架提供的用于訪問網頁的視圖控件，它有一個內置的瀏覽器。本案例將學習如何使用UIWebView控件實現一個簡易的瀏覽器，并且具有網頁的前進、后退和刷新功能，如圖-24所示：

圖-24

8.2 方案

首先同樣創建一個SingleViewApplication項目，然后創建一個帶有xib的視圖控制器類TRViewController，作為本案例的根視圖控制器。

其次在xib文件中拖放一個UIWebView控件用于加載網頁、一個ActivityIndicatorView控件用于加載等待、一個TextField控件用于用戶輸入網址以及三個Button控件用于控制前進、后退和刷新。

然后在右邊欄的第四個檢查器中設置各控件的相關屬性。

最后將xib中的UIWebView控件、ActivityIndicatorView控件和TextField關聯成私有屬性。

再分別將三個Button控件和TextField控件關聯成方法，在TRViewController.m文件中實現TextField控件和按鈕事件的響應方法。

8.3 步驟

實現此案例需要按照如下步驟進行。

步驟一：創建TRViewController視圖控制器

首先在Xcode項中創建一個帶有xib的視圖控制器類TRViewController，繼承至UIViewController，并在TRAppDelegate的程序入口方法中創建根視圖控制器對象，代碼如下所示：

?

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[[UIScreen?mainScreen]bounds]];

TRViewController?*vc?=?[[TRViewController?alloc]initWithNibName:@"TRViewController" bundle:nil];

self.window.rootViewController?= vc;

[self.window?makeKeyAndVisible];

return YES;

}

步驟二：在xib文件中拖放控件

在xib文件中拖放一個UIWebView控件、一個ActivityIndicatorView控件、一個TextField控件以及三個Button控件，如圖-25所示：

圖-25

然后在右邊欄的第四個檢查器中設置個控件的相關屬性，將WebView控件的Scales Page To Fit選項勾上，表示會根據WebView的大小顯示所訪問的網頁，如圖-26所示：

圖-26

步驟三：關聯代碼，實現方法

首先將xib中UIWebView控件、ActivityIndicatorView控件和TextField關聯成私有屬性webView、tf和activityIndicatorView，代碼如下所示：

?

@interface?TRDatePickerViewController?()

@property?(weak, nonatomic)?IBOutlet?UIWebView?*webView;

@property?(weak, nonatomic)?IBOutlet?UITextField?*tf;

@property?(weak, nonatomic)?IBOutlet?UIActivityIndicatorView?*activityIndicatorView;

@end

其次將TextField控件的Did End On Exit事件關聯方法go:，當點擊鍵盤右下角的按鈕時就訪問所輸入的網址，代碼如下所示：

?

-?(IBAction)go:(UITextField?*)sender

{

//tf退出第一響應

[sender?resignFirstResponder];

//創建一個url請求

NSString?*urlString?=?[NSString?stringWithFormat:@"http://%@",sender.text];

sender.text?= urlString;

NSURL?*url?=?[NSURL?URLWithString:urlString];

NSURLRequest?*request?=?[NSURLRequest?requestWithURL:url];

//webView發送請求

[self.webView?loadRequest:request];

}

然后分別將三個按鈕關聯成事件方法goBack:、goForward以及reload：，三個方法分別實現網頁的后退、前進和刷新，代碼如下所示：

?

-?(IBAction)goBack:(UIButton?*)sender?{

[self.webView?goBack];

}

-?(IBAction)gouForward:(UIButton?*)sender?{

[self.webView?goForward];

}

-?(IBAction)reLoad:(UIButton?*)sender?{

[self.webView?reload];

}

最后根據webView的屬性loading的值，控制activityIndicatorView的旋轉和顯示，代碼如下所示：

?

-(void)viewDidLoad?{

[super viewDidLoad];

[NSTimer?scheduledTimerWithTimeInterval:0.1 target:self?selector:@selector(isActivity) userInfo:nil?repeats:YES];

}

-(void)isActivity?{

if?(self.webView.isLoading==YES)?{

//當網頁正在加載時，活動指示器開始旋轉

[self.activityIndicatorView?startAnimating];

}else?{

//當網頁加載完成，活動指示器停止旋轉

[self.activityIndicatorView?stopAnimating];

}

}

8.4 完整代碼

本案例中，TRAppDelegate.m文件中的完整代碼如下所示：

?

#import?"TRAppDelegate.h"

#import?"TRViewController.h"

@implementation TRAppDelegate

-(BOOL)application:(UIApplication?*)application?

didFinishLaunchingWithOptions:(NSDictionary?*)launchOptions?{

self.window?=?[[UIWindow?alloc]initWithFrame:[[UIScreen?mainScreen]bounds]];

TRViewController?*vc?=?[[TRViewController?alloc]initWithNibName:@"TRViewController" bundle:nil];

self.window.rootViewController?= vc;

[self.window?makeKeyAndVisible];

return YES;

}

@end

?

本案例中，TRViewController.m文件中的完整代碼如下所示：

?

#import?"TRViewController.h"

@interface?TRViewController?()

@property?(weak, nonatomic)?IBOutlet?UIWebView?*webView;

@property?(weak, nonatomic)?IBOutlet?UITextField?*tf;

@property?(weak, nonatomic)?IBOutlet?UIActivityIndicatorView?*activityIndicatorView;

@end

@implementation TRViewController

-(void)viewDidLoad?{

[super viewDidLoad];

[NSTimer?scheduledTimerWithTimeInterval:0.1 target:self?selector:@selector(isActivity) userInfo:nil?repeats:YES];

}

-(void)isActivity?{

if?(self.webView.isLoading==YES)?{

[self.activityIndicatorView?startAnimating];

}else?{

[self.activityIndicatorView?stopAnimating];

}

}

-?(IBAction)go:(UITextField?*)sender

{

[sender?resignFirstResponder];

NSString?*urlString?=?[NSString?stringWithFormat:@"http://%@",sender.text];

sender.text?= urlString;

NSURL?*url?=?[NSURL?URLWithString:urlString];

NSURLRequest?*request?=?[NSURLRequest?requestWithURL:url];

[self.webView?loadRequest:request];

}

-?(IBAction)goBack:(UIButton?*)sender?{

[self.webView?goBack];

}

-?(IBAction)gouForward:(UIButton?*)sender?{

[self.webView?goForward];

}

-?(IBAction)reLoad:(UIButton?*)sender?{

[self.webView?reload];

}

@end

轉載于:https://www.cnblogs.com/hytx/p/5049504.html

總結

以上是生活随笔為你收集整理的集合视图控制器(CollectionViewController) 、 标签控制器(TabBarController) 、 高级控件介绍...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。