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];

//初始化UIRefreshControl

UIRefreshControl *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;

}