iOS開發那些事-表視圖UI設計模式

軟體設計中有設計模式，在UI設計方面也有設計模式。由於表視圖的應用在iOS中極其廣泛，本節向大家介紹表視圖中兩個UI設計模式：分頁模式和下拉重新整理（Pull-to-Refresh）模式。這兩種模式已經成為移動平台開發的標準。

 

分頁模式

        分頁模式規範了移動平台進行大量資料請求的處理方式 。

下拉重新整理模式

下拉重新整理（Pull-to-Refresh）是重新重新整理表視圖或列表，重新載入資料，這種模式廣泛用於移動平台。下拉重新整理與分頁相反，當翻動螢幕到 頂部時候，再往下拉螢幕程式就開始重新請求資料，表視圖表頭部分會出現等待指標，請求結束表視圖表頭消失。下拉重新整理模式帶有箭頭動畫效果。

 

       在很多開源社區中都有下拉重新整理的實現代碼，Github上的git://github.com/leah/PullToRefresh.git有一個下拉重新整理的例子，可以供大家參考。

iOS6下拉重新整理控制項

隨著下拉重新整理模式影響力的越來越大，蘋果不得不考慮把它列入自己的規範之中，並在iOS 6 API中推出了下拉重新整理控制項。iOS 6中的下拉重新整理，有點像是在拉一個“膠皮糖”，當這個“膠皮糖”拉斷的時候之後會出現等待指標。

 

       iOS 6 之後UITableViewController添加了一個refreshControl屬性，這個屬性保持了一個UIRefreshControl的對 象指標。UIRefreshControl就是iOS 6為表視圖實現下拉重新整理而提供的。UIRefreshControl類目前只能應用於表視圖畫面，其它視圖不能使用。該屬性與 UITableViewController配合使用，關於下拉重新整理布局等問題可以不必考慮，UITableViewController會將其自動放置 於表視圖中。

我們通過一個例子來瞭解一下UIRefreshControl控制項的使用。參考建立簡單表視圖的案例，建立工程“RefreshControlSample”，然後修改代碼ViewController.h。

#import <UIKit/UIKit.h>@interface ViewController : UITableViewController@property (nonatomic,strong) NSMutableArray* Logs;@end

 

Logs屬性存放了NDate日期列表，用於在表視圖中顯示需要的資料，ViewController.m中的初始化代碼如下：

- (void)viewDidLoad{[super viewDidLoad];//初始設定變數和時間self.Logs = [[NSMutableArray alloc] init];NSDate *date = [[NSDate alloc] init];[self.Logs addObject:date];//初始化UIRefreshControlUIRefreshControl *rc = [[UIRefreshControl alloc] init];rc.attributedTitle = [[NSAttributedString alloc]initWithString:@”下拉重新整理”];[rc addTarget:self action:@selector(refreshTableView) forControlEvents:UIControlEventValueChanged];self.refreshControl = rc;}

 

viewDidLoad方法中初始化了一條目前時間的類比資料。UIRefreshControl的構造方式是init。 attributedTitle屬性用於下拉控制項顯示標題文本。UIRefreshControl的addTarget: forControlEvents:方法能夠通過編程方式為UIControlEventValueChanged事件添加處理方法。 refreshTableView是UIControlEventValueChanged事件的處理方法，refreshTableView方法的代碼 如下：

-(void) refreshTableView{if (self.refreshControl.refreshing) {self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@”載入中…”];//添加新的類比資料NSDate *date = [[NSDate alloc] init];//類比請求完成之後，回調方法callBackMethod[self performSelector:@selector(callBackMethod:) withObject:date afterDelay:3];}}

 

UIRefreshControl的refreshing屬性可以判斷控制項是否還處於重新整理中的狀態，重新整理中狀態的表徵圖是我們常見的等待指標，在這 個階段要將顯示標題文本設定為“載入中…”。接下來應該是進行網路請求或者資料庫查詢的操作。這些操作完成後應用會回調callBackMethod方 法，本案例涉及雲端的技術，我們使用[self performSelector:@selector(callBackMethod:) withObject:date afterDelay:3]語句延時調用callBackMethod方法來類比實現。

回調方法callBackMethod:的代碼如下。

-(void)callBackMethod:(id) obj{[self.refreshControl endRefreshing];self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@”下拉重新整理”];[self.Logs addObject:(NSDate*)obj];[self.tableView reloadData];}

 

 

在請求完成的時候endRefreshing方法可以停止下拉重新整理控制項，回到初始狀態，顯示的標題文本為“下拉重新整理”。[self.tableView reloadData]語句是重新載入表視圖。

實現UITableViewDataSource的兩個方法代碼如下：

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {return 1;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {return [self.Logs count];}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {static NSString *CellIdentifier = @”Cell”;UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];if (cell == nil) {cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier];}NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init];[dateFormat setDateFormat: @"yyyy-MM-dd HH:mm:ss zzz"];cell.textLabel.text = [dateFormat stringFromDate: [self.Logs objectAtIndex:[indexPath row]]];cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;return cell;}