軟件設計中有設計模式,在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。
[cpp]
#import <UIKit/UIKit.h>
@interface ViewController : UITableViewController
@property (nonatomic,strong) NSMutableArray* Logs;
@end
#import <UIKit/UIKit.h>
@interface ViewController : UITableViewController
@property (nonatomic,strong) NSMutableArray* Logs;
@end
Logs屬性存放了NDate日期列表,用於在表視圖中顯示需要的數據,ViewController.m中的初始化代碼如下:
[cpp]
- (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;
}
- (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方法的代碼如下:
[cpp]
-(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];
}
}
-(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:的代碼如下。
[cpp]
-(void)callBackMethod:(id) obj
{
[self.refreshControl endRefreshing];
self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@”下拉刷新”];
[self.Logs addObject:(NSDate*)obj];
[self.tableView reloadData];
}
-(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的兩個方法代碼如下:
[cpp]
- (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;
}
- (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;
}