温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

iOS开发那些事-表视图UI设计模式

发布时间:2020-06-30 17:05:28 来源:网络 阅读:735 作者:tony关东升 栏目:移动开发

软件设计中有设计模式,在UI设计方面也有设计模式。由于表视图的应用在iOS中极其广泛,本节向大家介绍表视图中两个UI设计模式:分页模式和下拉刷新(Pull-to-Refresh)模式。这两种模式已经成为移动平台开发的标准。

 

分页模式

iOS开发那些事-表视图UI设计模式

        分页模式规范了移动平台进行大量数据请求的处理方式 。

下拉刷新模式

下拉刷新(Pull-to-Refresh)是重新刷新表视图或列表,重新加载数据,这种模式广泛用于移动平台。下拉刷新与分页相反,当翻动屏幕到 顶部时候,再往下拉屏幕程序就开始重新请求数据,表视图表头部分会出现等待指示器,请求结束表视图表头消失。下拉刷新模式带有箭头动画效果。

 iOS开发那些事-表视图UI设计模式

       在很多开源社区中都有下拉刷新的实现代码,Github上的git://github.com/leah/PullToRefresh.git有一个下拉刷新的例子,可以供大家参考。

iOS6下拉刷新控件

随着下拉刷新模式影响力的越来越大,苹果不得不考虑把它列入自己的规范之中,并在iOS 6 API中推出了下拉刷新控件。iOS 6中的下拉刷新,有点像是在拉一个“胶皮糖”,当这个“胶皮糖”拉断的时候之后会出现等待指示器。

 iOS开发那些事-表视图UI设计模式

       iOS 6 之后UITableViewController添加了一个refreshControl属性,这个属性保持了一个UIRefreshControl的对 象指针。UIRefreshControl就是iOS 6为表视图实现下拉刷新而提供的。UIRefreshControl类目前只能应用于表视图画面,其它视图不能使用。该属性与 UITableViewController配合使用,关于下拉刷新布局等问题可以不必考虑,UITableViewController会将其自动放置 于表视图中。

我们通过一个例子来了解一下UIRefreshControl控件的使用。参考创建简单表视图的案例,创建工程“RefreshControlSample”,然后修改代码ViewController.h。

 

  1. #import <UIKit/UIKit.h> 
  2.  
  3. @interface ViewController : UITableViewController 
  4.  
  5. @property (nonatomic,strong) NSMutableArray* Logs; 
  6.  
  7. @end 

Logs属性存放了NDate日期列表,用于在表视图中显示需要的数据,ViewController.m中的初始化代码如下:

 

  1. - (void)viewDidLoad 
  2.  
  3.  
  4. [super viewDidLoad]; 
  5.  
  6. //初始化变量和时间 
  7.  
  8. self.Logs = [[NSMutableArray alloc] init]; 
  9.  
  10. NSDate *date = [[NSDate alloc] init]; 
  11.  
  12. [self.Logs addObject:date]; 
  13.  
  14. //初始化UIRefreshControl 
  15.  
  16. UIRefreshControl *rc = [[UIRefreshControl alloc] init]; 
  17.  
  18. rc.attributedTitle = [[NSAttributedString alloc]initWithString:@”下拉刷新”]; 
  19.  
  20. [rc addTarget:self action:@selector(refreshTableView) forControlEvents:UIControlEventValueChanged]; 
  21.  
  22. self.refreshControl = rc; 
  23.  

viewDidLoad方法中初始化了一条当前时间的模拟数据。UIRefreshControl的构造方式是init。 attributedTitle属性用于下拉控件显示标题文本。UIRefreshControl的addTarget: forControlEvents:方法能够通过编程方式为UIControlEventValueChanged事件添加处理方法。 refreshTableView是UIControlEventValueChanged事件的处理方法,refreshTableView方法的代码 如下:

 

  1. -(void) refreshTableView 
  2.  
  3.  
  4. if (self.refreshControl.refreshing) { 
  5.  
  6. self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@”加载中…”]; 
  7.  
  8. //添加新的模拟数据 
  9.  
  10. NSDate *date = [[NSDate alloc] init]; 
  11.  
  12. //模拟请求完成之后,回调方法callBackMethod 
  13.  
  14. [self performSelector:@selector(callBackMethod:) withObject:date afterDelay:3]; 
  15.  
  16.  

UIRefreshControl的refreshing属性可以判断控件是否还处于刷新中的状态,刷新中状态的图标是我们常见的等待指示器,在这 个阶段要将显示标题文本设置为“加载中…”。接下来应该是进行网络请求或者数据库查询的操作。这些操作完成后应用会回调callBackMethod方 法,本案例涉及云端的技术,我们使用[self performSelector:@selector(callBackMethod:) withObject:date afterDelay:3]语句延时调用callBackMethod方法来模拟实现。

回调方法callBackMethod:的代码如下。

 

  1. -(void)callBackMethod:(id) obj 
  2.  
  3.  
  4. [self.refreshControl endRefreshing]; 
  5.  
  6. self.refreshControl.attributedTitle = [[NSAttributedString alloc]initWithString:@”下拉刷新”]; 
  7.  
  8. [self.Logs addObject:(NSDate*)obj]; 
  9.  
  10. [self.tableView reloadData]; 
  11.  

在请求完成的时候endRefreshing方法可以停止下拉刷新控件,回到初始状态,显示的标题文本为“下拉刷新”。[self.tableView reloadData]语句是重新加载表视图。

实现UITableViewDataSource的两个方法代码如下:

 

  1. - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { 
  2.  
  3. return 1; 
  4.  
  5.  
  6. - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { 
  7.  
  8. return [self.Logs count]; 
  9.  
  10.  
  11. - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { 
  12.  
  13. static NSString *CellIdentifier = @”Cell”; 
  14.  
  15. UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; 
  16.  
  17. if (cell == nil) { 
  18.  
  19. cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:CellIdentifier]; 
  20.  
  21.  
  22. NSDateFormatter *dateFormat = [[NSDateFormatter alloc] init]; 
  23.  
  24. [dateFormat setDateFormat: @"yyyy-MM-dd HH:mm:ss zzz"]; 
  25.  
  26. cell.textLabel.text = [dateFormat stringFromDate: [self.Logs objectAtIndex:[indexPath row]]]; 
  27.  
  28. cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator; 
  29.  
  30. return cell; 
  31.  
向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI