iOS開發(fā)那些事-表視圖UI設計模式

軟件設計中有設計模式，在UI設計方面也有設計模式。由于表視圖的應用在iOS中極其廣泛，本節(jié)向大家介紹表視圖中兩個UI設計模式：分頁模式和下拉刷新（Pull-to-Refresh）模式。這兩種模式已經(jīng)成為移動平臺開發(fā)的標準。

分頁模式

        分頁模式規(guī)范了移動平臺進行大量數(shù)據(jù)請求的處理方式 。

下拉刷新模式

下拉刷新（Pull-to-Refresh）是重新刷新表視圖或列表，重新加載數(shù)據(jù)，這種模式廣泛用于移動平臺。下拉刷新與分頁相反，當翻動屏幕到 頂部時候，再往下拉屏幕程序就開始重新請求數(shù)據(jù)，表視圖表頭部分會出現(xiàn)等待指示器，請求結束表視圖表頭消失。下拉刷新模式帶有箭頭動畫效果。

       在很多開源社區(qū)中都有下拉刷新的實現(xiàn)代碼，Github上的git://github.com/leah/PullToRefresh.git有一個下拉刷新的例子，可以供大家參考。

iOS6下拉刷新控件

隨著下拉刷新模式影響力的越來越大，蘋果不得不考慮把它列入自己的規(guī)范之中，并在iOS 6 API中推出了下拉刷新控件。iOS 6中的下拉刷新，有點像是在拉一個“膠皮糖”，當這個“膠皮糖”拉斷的時候之后會出現(xiàn)等待指示器。

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

我們通過一個例子來了解一下UIRefreshControl控件的使用。參考創(chuàng)建簡單表視圖的案例，創(chuàng)建工程“RefreshControlSample”，然后修改代碼ViewController.h。

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

Logs屬性存放了NDate日期列表，用于在表視圖中顯示需要的數(shù)據(jù)，ViewController.m中的初始化代碼如下：

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

viewDidLoad方法中初始化了一條當前時間的模擬數(shù)據(jù)。UIRefreshControl的構造方式是init。 attributedTitle屬性用于下拉控件顯示標題文本。UIRefreshControl的addTarget: forControlEvents:方法能夠通過編程方式為UIControlEventValueChanged事件添加處理方法。 refreshTableView是UIControlEventValueChanged事件的處理方法，refreshTableView方法的代碼 如下：

-(void) refreshTableView 
 
{ 
 
if (self.refreshControl.refreshing) { 
 
self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@”加載中…”]; 
 
//添加新的模擬數(shù)據(jù) 
 
NSDate *date = [[NSDate alloc] init]; 
 
//模擬請求完成之后，回調方法callBackMethod 
 
[self performSelector:@selector(callBackMethod:) withObject:date afterDelay:3]; 
 
} 
 
} 

UIRefreshControl的refreshing屬性可以判斷控件是否還處于刷新中的狀態(tài)，刷新中狀態(tài)的圖標是我們常見的等待指示器，在這 個階段要將顯示標題文本設置為“加載中…”。接下來應該是進行網(wǎng)絡請求或者數(shù)據(jù)庫查詢的操作。這些操作完成后應用會回調callBackMethod方 法，本案例涉及云端的技術，我們使用[self performSelector:@selector(callBackMethod:) withObject:date afterDelay:3]語句延時調用callBackMethod方法來模擬實現(xiàn)。

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

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

在請求完成的時候endRefreshing方法可以停止下拉刷新控件，回到初始狀態(tài)，顯示的標題文本為“下拉刷新”。[self.tableView reloadData]語句是重新加載表視圖。

實現(xiàn)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; 
 
}