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

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

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

分页模式

1

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

下拉刷新模式

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

 2

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

iOS6下拉刷新控件

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

 3

       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;

}


目录
相关文章
|
20天前
|
前端开发 编解码 数据格式
浅谈响应式编程在企业级前端应用 UI 开发中的实践
浅谈响应式编程在企业级前端应用 UI 开发中的实践
20 0
浅谈响应式编程在企业级前端应用 UI 开发中的实践
|
6月前
|
设计模式 测试技术 vr&ar
提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除(三)
提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除
|
6月前
|
人工智能 机器人 区块链
提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除(二)
提升你的Android开发技能:从AR/VR沉浸到UI设计和故障排除
|
4天前
|
调度 iOS开发 开发者
iOS 中的并发编程模式:理解 GCD 和 Operation Queues
【4月更文挑战第19天】 在现代 iOS 应用开发中,有效地管理线程和并发是至关重要的。为了确保用户界面的流畅性和后台任务的高效运行,开发者需要掌握并发编程技术。本文深入探讨了两种主要的并发模式:Grand Central Dispatch (GCD) 和 Operation Queues。我们将分析它们的工作原理,比较它们的特点,并通过实际代码示例说明如何在 iOS 应用中实现高效的并发处理。通过本文,读者将获得在 iOS 平台上进行多线程开发的实用知识,以及如何根据不同的应用场景选择最合适的并发工具。
|
16天前
|
XML 开发工具 Android开发
构建高效的安卓应用:使用Jetpack Compose优化UI开发
【4月更文挑战第7天】 随着Android开发不断进化,开发者面临着提高应用性能与简化UI构建流程的双重挑战。本文将探讨如何使用Jetpack Compose这一现代UI工具包来优化安卓应用的开发流程,并提升用户界面的流畅性与一致性。通过介绍Jetpack Compose的核心概念、与传统方法的区别以及实际集成步骤,我们旨在提供一种高效且可靠的解决方案,以帮助开发者构建响应迅速且用户体验优良的安卓应用。
QGS
|
3月前
|
前端开发 数据可视化 Java
手拉手JavaFX UI控件与springboot3+FX桌面开发(下)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
66 0
QGS
|
3月前
|
前端开发
手拉手JavaFX UI控件与springboot3+FX桌面开发(中)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
89 0
QGS
|
3月前
|
API 数据安全/隐私保护 索引
手拉手JavaFX UI控件与springboot3+FX桌面开发(上)
手拉手JavaFX UI控件与springboot3+FX桌面开发
QGS
67 1
|
4月前
|
设计模式
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
二十三种设计模式全面解析-桥接模式的高级应用:构建灵活的跨平台UI框架
|
5月前
|
JavaScript
vue老项目sass和element-ui开发踩坑
公司的一个各种依赖比较老的项目,习惯了之前的iview和stylus开发,刚接手还是有很多不习惯的地方
65 0