小型企業(yè)商務(wù)應(yīng)用程序設(shè)計及開發(fā)系列(2):AQGrid View
譯文教程說明
- 技術(shù)工具: iOS SDK
- 操作難度: 普通
- 執(zhí)行時間: 30到60分鐘
【51CTO譯文】歡迎大家再次蒞臨本系列文章，我們將通過三篇指南幫助各位了解小型企業(yè)應(yīng)用程序的開發(fā)過程。在今天的課程中，我們一起來看看AQGrid View是如何化腐朽為神奇，給應(yīng)用項目帶來精彩設(shè)計的。閑話少敘，這就開始！
教程概述
在本篇教程中，我將帶大家一步步設(shè)計出如下圖所示的應(yīng)用程序視圖。屏幕中的內(nèi)容由網(wǎng)絡(luò)所分割，可以用來顯示公司提供的各項服務(wù)。AQGrid View是一款相當實用的開源組件，今天我們就來共同學習如何用它制作出精美的網(wǎng)格界面。
AQGrid View與UITableViewController相當類似，如果大家對于Table View比較熟悉，那么恭喜，這篇教程對你而言應(yīng)該輕而易舉。如果不熟悉也別擔心，我仍然會一步步引導各位完成任務(wù)。
添加網(wǎng)格單元
那么，首先要做的是從GitHub網(wǎng)站下載AQGrid View，并將AQGrid View文件夾添加到項目當中。由于AQGrid View需要QuartzCore庫才能運行，因此我們還要將其添加到項目中來。就這些，準備工作到此結(jié)束。
現(xiàn)在我們要做的是添加包含著各個標簽詳細信息的類。在項目中添加一個新文件，選擇Cocoa Touch中的Objective-C Class選項，再點選NSObject模板。我們將其命名為GridViewCell。
在GridViewCell頭文件中將繼承對象變更為AQGridViewCell，這相當于網(wǎng)格視圖組件中UITableViewCell的作用。另外，還要將圖像視圖與標簽添加到上述頭文件中。
- #import <UIKit/UIKit.h>
- #import "AQGridView.h"
- @interface GridViewCell : AQGridViewCell
- @property (nonatomic, retain) UIImageView * imageView;
- @property (nonatomic, retain) UILabel * captionLabel;
- @end
在GridViewCell.m執(zhí)行文件中，我們要寫入一套用于創(chuàng)建視圖、圖像視圖以及多標簽（以彌補初始狀態(tài)下的單標簽機制）功能的初始化方法。
- - (id) initWithFrame: (CGRect) frame reuseIdentifier: (NSString *) aReuseIdentifier
- {
- self = [super initWithFrame: frame reuseIdentifier: aReuseIdentifier];
- if ( self)
- {
- UIView* mainView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 160, 123)];
- [mainView setBackgroundColor:[UIColor clearColor]];
- UIImageView *frameImageView = [[UIImageView alloc] initWithFrame:CGRectMake(9, 4, 142, 117)];
- [frameImageView setImage:[UIImage imageNamed:@"tab-mask.png"]];
- self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(13, 8, 135, 84)];
- self.captionLabel = [[UILabel alloc] initWithFrame:CGRectMake(13, 92, 127, 21)];
- [captionLabel setFont:[UIFont systemFontOfSize:14]];
- [mainView addSubview:imageView];
- [mainView addSubview:frameImageView];
- [mainView addSubview:captionLabel];
- [self.contentView addSubview:mainView];
- }
- return self;
- }
該函數(shù)看起來與標準UITableViewCell中的init函數(shù)非常相近，而在本教程中二者惟一的不同在于，我們要在視圖及單元中加入一些基本布局方案。最終結(jié)果將以雙層圖案的形式顯示，一層是白色的邊框、反襯出服務(wù)圖像，另一層則用于描述服務(wù)本身。如果大家讀到這里感到有些迷惑，不妨回到文章開頭，相信最終效果圖會讓大家感到豁然開朗。
我們還要為選項卡配上說明用的標簽。
以上各視圖創(chuàng)建完成后，我們將其添加到UIView當中（以便于管理），再將UIView整體添加進單元本身。
創(chuàng)建網(wǎng)格控制器
接下來我們開始創(chuàng)建視圖控制器，它的作用是管理網(wǎng)格委托及其數(shù)據(jù)源。添加一個新文件，使用Cocoa Touch中的Objective –C Class選項，并點選NSObject模板，將其命名為GridViewController。然后修改GridViewController.h文件，使其成為AQGridViewController的一個子類。另外我們還要添加幾個域，用于容納GridView自身以及網(wǎng)格中將要用到的服務(wù)項目列表。
- #import <UIKit/UIKit.h>
- #import "AQGridView.h"
- @interface GridViewController : UIViewController <AQGridViewDelegate, AQGridViewDataSource>
- @property (nonatomic, retain) IBOutlet AQGridView * gridView;
- @property (nonatomic, retain) NSArray * services;
- @end
添加ViewDidLoad方法，在這里我們將對視圖及數(shù)據(jù)進行配置。不過我們首先來配置GridView。
- @synthesize gridView, services;
- - (void) viewDidLoad
- {
- [super viewDidLoad];
- self.gridView = [[AQGridView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];
- self.gridView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
- self.gridView.autoresizesSubviews = YES;
- self.gridView.delegate = self;
- self.gridView.dataSource = self;
- [self.view addSubview:gridView];
- [self.gridView reloadData];
- }
將委托生成器添加進來，接著初始化網(wǎng)格并加以配置。我們還必須確保當前類GridViewController已經(jīng)被正確指定為GridView的委托與數(shù)據(jù)源。把網(wǎng)格添加到當前視圖中并重新載入數(shù)據(jù)，保證整個流程從頭開始按順序進行。
現(xiàn)在我們需要執(zhí)行上述方法，如果一切順利，它們會包含在繼承自AQGridView數(shù)據(jù)源以及AQGridView委托協(xié)議的類中。
首先要確定的是網(wǎng)格中所包含的項目數(shù)量，現(xiàn)在我們可以先返回一個隨機數(shù)。以后當我們執(zhí)行各項服務(wù)時，該數(shù)字會根據(jù)實際情況發(fā)生變化。
- - (NSUInteger) numberOfItemsInGridView: (AQGridView *) aGridView
- {
- return 6;
- }
接下來要執(zhí)行的方法名為cellForItemAtIndex。該方法會在可能時通過CellIdentifier字符串提取一個單元，如果無法提取，它會根據(jù)我們之前的執(zhí)行情況創(chuàng)建一個新的GridViewCell版本。
- - (AQGridViewCell *) gridView: (AQGridView *) aGridView cellForItemAtIndex: (NSUInteger) index
- {
- static NSString * PlainCellIdentifier = @"PlainCellIdentifier";
- GridViewCell * cell = (GridViewCell *)[aGridView dequeueReusableCellWithIdentifier:@"PlainCellIdentifier"];
- if ( cell == nil )
- {
- cell = [[GridViewCell alloc] initWithFrame: CGRectMake(0.0, 0.0, 160, 123)
- reuseIdentifier: PlainCellIdentifier];
- }
- [cell.imageView setImage:[UIImage imageNamed:@"service-2.jpg"]];
- [cell.captionLabel setText:@"Sample service"];
- return cell;
- }
大家可以清楚地看到，每個單元都根據(jù)一些虛擬數(shù)據(jù)獲得了配置。
到這里，我們已經(jīng)執(zhí)行了很多代碼內(nèi)容，但仍然沒有看到任何執(zhí)行結(jié)果。感覺有點心慌，怕出什么問題？別急，咱們馬上嘗試運行已經(jīng)完成的部分。
要想在模擬器中獲得正確的顯示結(jié)果，我們需要先向Storyboard聲明這套新的ViewController。
選擇MainStoryboard_iPhone文件，將SeconVIewController nib文件變更為GridViewController類。另外，別忘了刪除視圖中的兩個選項卡。
現(xiàn)在我們已經(jīng)萬事俱備，可以開始在模擬器運行這款小應(yīng)用了。運行后的結(jié)果應(yīng)該是如下圖所示。
很失望吧？這跟咱們預想的效果根本不一樣嘛。別擔心，讓我們一起看看哪里出了問題。
執(zhí)行網(wǎng)格布局
第一步是改變背景顏色。為了實現(xiàn)該目標，我們將要使用纖維紋理素材，這在第一部分中已經(jīng)提到過了。
打開GridViewController.m文件，將以下兩行代碼添加到viewDidLoad方法當中：
- UIImage * backgroundPattern = [UIImage imageNamed:@"bg-app.png"];
- [self.view setBackgroundColor:[UIColor colorWithPatternImage:backgroundPattern]];
接下來我們需要執(zhí)行AQGridView數(shù)據(jù)源協(xié)議方法：
- - (CGSize) portraitGridCellSizeForGridView: (AQGridView *) aGridView
- {
- return ( CGSizeMake(160.0, 123) );
- }
該方法的作用是通知網(wǎng)格視圖每個單元的具體尺寸是多大。對應(yīng)尺寸來自我們之前所創(chuàng)建的GridViewCell。
現(xiàn)在再次嘗試用模擬器運行應(yīng)用程序，結(jié)果應(yīng)該如下圖所示。
沒錯，這才對嘛！
執(zhí)行數(shù)據(jù)模型
說到這里，我們的單元似乎還略顯單調(diào)，需要增添一些多樣性。嘗試將數(shù)據(jù)模型加入進來可以使服務(wù)項目與樣本數(shù)據(jù)相結(jié)合，進而令應(yīng)用程序更具說服力。這才是企業(yè)理想中的服務(wù)宣傳平臺，我們的應(yīng)用當然也得達到同樣的水準。除此之外，大家當然還可以在應(yīng)用中添加內(nèi)容管理系統(tǒng)等其它要素，進一步豐富應(yīng)用內(nèi)容，不過這就不是本系列教程所要討論的話題啦。
選擇Cocoa Touch中的NSObject選項在應(yīng)用程序中添加一個新文件，并將其命名為BusinessService。打開BuisinessService.h文件，然后添加以下代碼：
- #import <Foundation/Foundation.h>
- @interface BusinessService : NSObject
- @property (nonatomic, copy) NSString* caption;
- @property (nonatomic, retain) UIImage* image;
- -(id)initWithCaption:(NSString*)theCaption andImage:(UIImage*)theImage;
- +(NSArray*)getSampleData;
- @end
這個類非常簡單，其中只包含標題及一張圖像。它同時定義了兩套方法，這一點我會在稍后詳細解釋。
打開BusinessService.m文件，將以下代碼段添加進去：
- @synthesize caption, image;
- -(id)initWithCaption:(NSString*)theCaption andImage:(UIImage*)theImage
- {
- self = [super init];
- if(self)
- {
- self.caption = theCaption;
- self.image = theImage;
- }
- return self;
- }
- +(NSArray*)getSampleData
- {
- BusinessService* service1 = [[BusinessService alloc] initWithCaption:@"Litigation" andImage:[UIImage imageNamed:@"service-1.jpg"]];
- BusinessService* service2 = [[BusinessService alloc] initWithCaption:@"Family Law" andImage:[UIImage imageNamed:@"service-2.jpg"]];
- BusinessService* service3 = [[BusinessService alloc] initWithCaption:@"Conveyancing" andImage:[UIImage imageNamed:@"service-3.jpg"]];
- BusinessService* service4 = [[BusinessService alloc] initWithCaption:@"Corporate Law" andImage:[UIImage imageNamed:@"service-4.jpg"]];
- BusinessService* service5 = [[BusinessService alloc] initWithCaption:@"Solicitors" andImage:[UIImage imageNamed:@"service-5.jpg"]];
- BusinessService* service6 = [[BusinessService alloc] initWithCaption:@"Tax Law" andImage:[UIImage imageNamed:@"service-6.jpg"]];
- return [NSArray arrayWithObjects:service1, service2, service3, service4, service5, service6, nil];
- }
上述代碼的作用是執(zhí)行一套init方法，其中標題與圖像都通過函數(shù)中的參數(shù)進行了初始化。GetSampleData方法以不同的標題與圖像調(diào)用了六次init函數(shù)。
現(xiàn)在我們要做的是將模型與網(wǎng)格視圖關(guān)聯(lián)起來。打開GridViewController.m文件，并將以下代碼添加到ViewDidLoad方法當中（別忘了在#import部分補上‘BusinessService.h’文件）。
- self.services = [BusinessService getSampleData];
這樣樣本數(shù)據(jù)就會被載入到服務(wù)項目當中。
現(xiàn)在我們需要修改numberOfItemsInGridView內(nèi)容，以確保返回值與服務(wù)項目數(shù)量相吻合：
- - (NSUInteger) numberOfItemsInGridView: (AQGridView *) aGridView
- {
- return [services count];
- }
最后，修改cellForItemAtIndex方法，以使用特定索引中的服務(wù)項目。也就是說每個單元都要使用與之相對應(yīng)的服務(wù)信息（包括標題及圖像）。
- - (AQGridViewCell *) gridView: (AQGridView *) aGridView cellForItemAtIndex: (NSUInteger) index
- {
- static NSString * PlainCellIdentifier = @"PlainCellIdentifier";
- GridViewCell * cell = (GridViewCell *)[aGridView dequeueReusableCellWithIdentifier:@"PlainCellIdentifier"];
- if ( cell == nil )
- {
- cell = [[GridViewCell alloc] initWithFrame: CGRectMake(0.0, 0.0, 160, 123)
- reuseIdentifier: PlainCellIdentifier];
- }
- BusinessService* service = [services objectAtIndex:index];
- [cell.imageView setImage:service.image];
- [cell.captionLabel setText:service.caption];
- return cell;
- }
現(xiàn)在再次運行應(yīng)用程序，看看結(jié)果如何。
哈哈，頗具時代感，不是嗎:-) 現(xiàn)在我們只剩最后一項工作，那就是在屏幕頂部添加藍色的導航欄。
自定義導航欄
要顯示導航欄，我們必須先將其嵌入到導航控制器當中。打開MainStoryboard_iPhone文件并選擇GridViewController。接著打開Editor下拉菜單、點選Embed In中的Navigation Controller項。
如果現(xiàn)在就運行應(yīng)用，那么我們會看到默認狀態(tài)下的導航欄。這不夠好，還需要進一步調(diào)整完善。這里我們要用到iOS 5 Appearance SDK，這是一款專門處理外觀任務(wù)的工具，能夠設(shè)置應(yīng)用程序中出現(xiàn)的所有UI元素。
打開AppDelegate.m文件，并將didFinishLaunchingWithOptions變更為如下內(nèi)容：
- - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- UIImage *navBarImage = [UIImage imageNamed:@"menubar.png"];
- [[UINavigationBar appearance] setBackgroundImage:navBarImage
- forBarMetrics:UIBarMetricsDefault];
- // Override point for customization after application launch.
- return YES;
- }
這樣做是為了將應(yīng)用程序中所有UI導航欄的背景圖案變更為特定內(nèi)容（menubar.png）。
為導航欄添加“Services”標題，我們可以在Storyboard中雙擊文本內(nèi)容來進行編輯。
最后一步是為網(wǎng)格頂部添加漸變效果，這樣導航欄看起來將更富動感。
為了實現(xiàn)這一目標，我們需要將CALayer漸變層添加到GridViewController.m文件當中。
包括QuartzCore頭文件：
- #import <QuartzCore/QuartzCore.h>
然后將以下代碼添加到ViewDidLoad方法末尾：
- UIView* gradientView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 4)];
- CAGradientLayer *gradient = [CAGradientLayer layer];
- gradient.frame = gradientView.bounds;
- UIColor* lightColor = [[UIColor blackColor] colorWithAlphaComponent:0.0];
- UIColor* darkColor = [[UIColor blackColor] colorWithAlphaComponent:0.5];
- gradient.colors = [NSArray arrayWithObjects:(id)darkColor.CGColor, (id)lightColor.CGColor, nil];
- [gradientView.layer insertSublayer:gradient atIndex:0];
- [self.view addSubview:gradientView];
現(xiàn)在我們最后運行一次，看看應(yīng)用程序的執(zhí)行效果。
總結(jié)
到這里，系列指南文章的第二部分就結(jié)束了。在接下來的第三部分中，我將向大家展示如何為每項服務(wù)設(shè)計視圖細節(jié)。當用戶輕觸服務(wù)標簽時，應(yīng)用會直接在屏幕上切換出新的ViewController，而我們的后續(xù)設(shè)計工作也將就此展開。希望到時候大家還能來繼續(xù)捧場！
如果朋友們有疑問或者建議，不妨在評論欄中與大家分享并討論。
原文鏈接：
http://mobile.tutsplus.com/tutorials/iphone/design-build-a-small-business-app-aqgridview/
