iOS開發之UITabBarController和UICollectionView的使用

標籤：oar   art   fonts   weak   plist   res   war   blog   資料來源   

這一篇要記錄的是iOS開發中UITabBarController控制項和UICollectionView控制項的使用。APP跑起來之後的效果例如以：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >       

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

UITabBarController控制項，即中頁面下部能夠切換到不同頁面去的選項卡。UICollectionView即上右圖中的View。以格子的形式展現出來。

本篇主要用到了例如以下幾個知識點：

1、給ViewController加上UITabBarController控制項

2、給ViewController加上UINavigationController控制項

3、使用UITableView和UICollectionView展示列表

4、使用plist檔案，在代碼中讀取plist檔案並載入到UITableView和UICollectionView中

以下就一步步完畢這個項目：

1、首先在xcode中建立項目，取名為TabBarControllerTest

2、切換到Main.storyboard，然後選中ViewController視圖，在菜單條中選擇Editor-->Embed in-->Tab Bar Controller，這一步操作完畢後。故事板中的介面例如以下所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

3、以下給ViewController設定TabBar，在故事板中選中ViewController下方的TabBar。然後在xcode右側的屬性欄中。設定System item為Contacts，例如以所看到的：

4、給ViewController加上導覽列。

選中故事板中的ViewController，然後在菜單條中選擇Editor-->Embed in-->NavigationController，操作完畢後介面例如以下所看到的：

然後選中ViewController視圖頂部的Navigation，在xcode右側的屬性欄中配置title為“連絡人”。

5、新增一個代表近期連絡人的ViewController。

在控制項區拖入一個ViewController到故事板中。然後滑鼠右鍵按住。從Tab Bar Controller視圖拖到剛剛建立的ViewController視圖上，例如以所看到的：

鬆開滑鼠後。在出現的對話方塊中，選擇view controller，例如以所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

如今故事板中的視圖是以下這樣：

採用和上面的步驟同樣的方法，選中我們建立的那個ViewController視圖底部的TabBar。然後在xcode右側的視圖中配置System item為Recents。

6、為新增的那個ViewController加上導覽列。

選中故事板中我們新增的ViewController，然後在菜單中選擇Editor-->Embed in-->Navigation Controller，然後像前面的操作那樣設定導覽列的標題為“近期連絡人”。操作完畢後的故事板應該例如以所看到的：

到這裡能夠先執行程式看看效果。儘管沒有資料顯示，可是我們的TabBar還是能夠切換的，切換到不同的Tab之後。導覽列上的標題也會隨著切換。例如以所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >    

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" >

7、給頁面中增加資料。

首先是連絡人清單的資料，這個在前面的博文中已有說到，這裡就不具體說了，這裡我們須要建立一個單元格類ContactCell繼承自UITableViewCell，ContactCell.h的代碼例如以下：

#import <UIKit/UIKit.h>@interface ContactCell : UITableViewCell@property (weak, nonatomic) IBOutlet UIImageView *avatarImage;@property (weak, nonatomic) IBOutlet UILabel *nameLabel;@property (weak, nonatomic) IBOutlet UILabel *phoneLabel;@end

然後在ViewController中載入資料。ViewController.h檔案的代碼例如以下：

#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UITableViewDataSource, UITableViewDelegate>@property (weak, nonatomic) IBOutlet UITableView *tableView;@end

這裡主要是ViewController.m中的代碼。我們在當中載入了外部plist檔案中的資料，先貼上ViewController.m檔案的代碼：

#import "ViewController.h"#import "ContactCell.h"@interface ViewController ()@end@implementation ViewControllerNSArray *avatarArr;NSArray *nameArr;NSArray *phoneArr;static NSString *identifier = @"ContactCell";- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view, typically from a nib.    [self loadDataFromFile];    //設定tableView的代理和資料來源    self.tableView.delegate = self;    self.tableView.dataSource = self;}#pragma mark 從plist中載入資料- (void)loadDataFromFile {    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"contacts" ofType:@"plist"];    NSDictionary *dict = [[NSDictionary alloc] initWithContentsOfFile:filePath];    avatarArr = [dict objectForKey:@"avatars"];    nameArr = [dict objectForKey:@"names"];    phoneArr = [dict objectForKey:@"phones"];}#pragma mark 返回TableView的行數- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {    return [nameArr count];}#pragma mark 返回某個儲存格- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {    ContactCell *cell = [self.tableView dequeueReusableCellWithIdentifier:identifier forIndexPath:indexPath];    cell.avatarImage.image = [UIImage imageNamed:[avatarArr objectAtIndex:indexPath.row]];    cell.nameLabel.text = [nameArr objectAtIndex:indexPath.row];    cell.phoneLabel.text = [phoneArr objectAtIndex:indexPath.row];    return cell;}#pragma mark 返回儲存格的高度- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {    return 80;}#pragma mark 設定選中某個儲存格後。背景色恢複初始狀態- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {    [self.tableView deselectRowAtIndexPath:indexPath animated:YES];}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

從plist檔案裡載入資料。主要使用的NSBundle類的pathForResource方法。這裡我們的plist檔案名稱為contacts，檔案內容例如以下：

8、給CollectionView載入資料

為了給CollectionView載入資料，首先得建立一個代表CollectionView單元格的類，這裡取名為RecentCell，且這個類繼承自UICollectionViewCell，RecentCell.h代碼例如以下：

#import <UIKit/UIKit.h>@interface RecentCell : UICollectionViewCell @property (weak, nonatomic) IBOutlet UIImageView *avatarImage;@property (weak, nonatomic) IBOutlet UILabel *nameLabel;@end

然後還得建立一個裝載了CollectionView的ViewController，這裡取名為RecentViewController，RecentViewController.h代碼例如以下：

#import <UIKit/UIKit.h>@interface RecentViewController : UIViewController <UICollectionViewDataSource, UICollectionViewDelegate>@property (weak, nonatomic) IBOutlet UICollectionView *recentCollectionView;@end

裡面僅包括一個代表CollectionView的變數，RecentViewController.m檔案的代碼例如以下：

#import "RecentViewController.h"#import "RecentCell.h"@interface RecentViewController ()@end@implementation RecentViewControllerNSArray *recentAvatarArr;NSArray *recentNameArr;static NSString *identifier = @"RecentCell";- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view.    [self loadDataFromFile];    self.recentCollectionView.delegate = self;    self.recentCollectionView.dataSource = self;}#pragma mark 從檔案裡載入資料- (void)loadDataFromFile {    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"contacts" ofType:@"plist"];    NSDictionary *dict = [[NSDictionary alloc] initWithContentsOfFile:filePath];    recentAvatarArr = [dict objectForKey:@"avatars"];    recentNameArr = [dict objectForKey:@"names"];}#pragma mark 一個section中的item數目- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    return [recentAvatarArr count];}#pragma mark 返回某個儲存格- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {    RecentCell *cell = [self.recentCollectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];    cell.avatarImage.image = [UIImage imageNamed:[recentAvatarArr objectAtIndex:indexPath.row]];    cell.nameLabel.text = [recentNameArr objectAtIndex:indexPath.row];    return cell;}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

事實上UICollectionView的使用方法和UITableView的使用方法類似，都是須要在標頭檔裡實現資料來源和託付協議。然後在.m檔案裡實現協議裡的某幾個方法來處理視圖中顯示的資料。

以下總結下在項目過程中須要注意的點：

（1）要注意在xcode的屬性視圖中給單元格指定的標識一定要和代碼中的相應

（2）不要忘了將代碼中聲明的代表視圖對象的變數，和真正的視圖聯絡起來

（3）要給UITableView和UICollectionView等集合視圖加入資料。一定不要忘了在標頭檔裡實現協議

Demo代碼

iOS開發之UITabBarController和UICollectionView的使用