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;

}
时间: 2024-08-01 16:55:43

iOS开发那些事-表视图UI设计模式的相关文章

iOS开发入门:表视图UI设计模式

软件设计中有设计模式,在UI设计方面也有设计模式.由于表视图的应用在iOS中极其广泛,本节向大家介绍表视图中两个UI设计模式:分页模式和下拉刷新(Pull-to-Refresh)模式.这两种模式已经成为移动平台开发的标准. 分页模式 分页模式规范了移动平台进行大量数据请求的处理方式 . 下拉刷新模式 下拉刷新(Pull-to-Refresh)是重新刷新表视图或列表,重新加载数据,这种模式广泛用于移动平台.下拉刷新与分页相反,当翻动屏幕到 顶部时候,再往下拉屏幕程序就开始重新请求数据,表视图表头部

iOS开发之多表视图滑动切换示例(仿&quot;头条&quot;客户端)

好长时间没为大家带来iOS开发干货的东西了,今天给大家分享一个头条新闻客户端各个类别进行切换的一个示例.在Demo中对所需的组件进行的简单封装,在封装的组件中使用的是纯代码的形式,如果想要在项目中进行使用,稍微进行修改即可. 废话少说,先介绍一下功能点,下图是整个Demo的功能点,最上面左边的TabBarButtonItem是用来减少条目的,比如下图有三个按钮,点击减号会减少一个条目.右边的为增加一个条目.点击相应的按钮是切换到对应的表视图上,下方红色的是滑动的指示器,同时支持手势滑动.运行具体

iOS开发那些事-iOS网络编程同步GET方法请求编程

iOS SDK为HTTP请求提供了同步和异步请求两种不同的API,而且可以使用GET或POST等请求方法.我们先了解其中最为简单的同步GET方法请求. 为了学习这些API的使用MyNotes"备忘录"应用实例,数据来源于服务器端,而不是本地的Notes.xml(或Notes.json)文件. 首先实现查询业务,查询业务请求可以在主视图控制器MasterViewController类中实现,其中MasterViewController.h代码如下: #import <UIKit/U

iOS开发那些事--简单表视图

表视图是iOS开发中使用最频繁的视图,我们一般都会选择以表的形式来展现数据,比如通讯录.频道列表等.表视图分段.分组.索引等功能使我们所展示的数据看起来更规整更有调理,更令人兴奋的是表视图还可以利用细节展示等功能多层次的展示数据,正所谓一表胜千言. 不过,相较于其它控件表视图的使用比较复杂,但是对比于表视图各种灵活多变的功能,我们在使用上花费的努力还是相当值得的. 简单表视图 表视图的形式灵活多变,本着由浅入深的原则,我们先从简单表视图开始学习.本节讲的简单表视图是动态表,(iOS 5之前全部是

iOS开发那些事-iOS常用设计模式–委托模式

对于iOS开发,举例Cocoa框架下的几个设计模式为大家分析.当然,Cocoa框架下关于设计模式的内容远远不止这些,我们选择了常用的几种:单例模式.委托模式.观察者模式.MVC模式. 委托模式 委托模式从GoF 设计装饰(Decorator).适配器(Adapter)和模板方法(Template Method)等模式演变而来.几乎每一个应用都会或多或少地使用到委托模式.不只是CocoaTouch框架,在Cocoa框架中委托模式也得到了广泛的应用. 问题提出 对于应用生命周期的非运行状态--应用启

ios 类似qq-ios 小表视图的实现??????????

问题描述 ios 小表视图的实现?????????? 请看图,这样的小视图咋实现啊?求大神指点,要是有demo就最好不过了.网上都搜了,没搞定. 解决方案 IOS:表视图IOS表视图动态高度实现实例IOS 带搜索栏表视图 解决方案二: 可以写个viewcontroller然后用presentviewcontroller方式加载 就像是UIAlertView差不多的方法 解决方案三: 其实那是一个viewController上面一个小的tableView而已 解决方案四: 简单一点就写个table

iOS开发那些事-Passbook详解与开发案例(附视频)

Passbook是iOS 6的新功能,只能在iPhone和iPod touch设备中使用.它可以帮助我们管理商家发放的电子会员卡.积分卡.优惠券等.这将对未来电子商务产生深远的影响.商家通过发放会员卡.积分卡.优惠券等,提高与消费者的互动,吸引人们更多消费.Passbook的诞生,正是为了将所有这些"卡"和"券"电子化,存放在iPhone或iPod touch里. Passbook与Pass iOS 6中的Passbook能够帮助我们集中管理电子"卡&qu

iOS开发那些事--自定义单元格实现

自定义单元格 当苹果公司提供给的单元格样式不能我们的业务需求的时候,我们需要自定义单元格.在iOS 5之前,自定义单元格可以有两种实现方式:代码实现和用xib技术实现.用xib技术实现相对比较简单,创建一个xib文件,然后定义一个继承UITableViewCell类单元格类即可.在iOS 5之后我们又有了新的选择,故事板实现方式,这种方式比xib方式更简单一些. 我们把简单表视图案例的原型图修改一下,这种情况下四种内置的单元格样式就不合适了.       采用"Single View Appli

iOS开发那些事-iOS网络编程异步GET方法请求编程

上篇博客提到同步请求,同步请求用户体验不好,并且介绍了在同步方法上实现异步,事实上iOS SDK也提供了异步请求的方法.异步请求会使用NSURLConnection委托协议NSURLConnectionDelegate.在请求不同阶段会回调委托对象方法.NSURLConnectionDelegate协议的方法有: connection:didReceiveData: 请求成功,开始接收数据,如果数据量很多,它会被多次调用: connection:didFailWithError: 加载数据出现异