软件设计中有设计模式,在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; }
相关推荐
本书共分三篇,*篇为基础篇,主要介绍了iOS开发基础知识,包括iOS系统的历史、Swift 3.0语言、UI界面构建技术、视图控制器、常用的控件、表和集合视图、视图和层、声音、视频、动画等。第二篇为进阶篇,主要介绍了...
《Objective-C编程之道:iOS设计模式解析》适用于那些已经具备Objective-C基础、想利用设计模式来提高软件开发效率的中高级iOS开发人员。第一部分 设计模式初体验第1章 你好,设计模式1.1 这是一本什么书1.2 开始...
最后介绍表视图UI设计模式方面的内容。 第6章“视图控制器与导航模式”。如何判断应用是不是需要一个导航功能,并且知道在什么情况下选择平铺导航、标签导航、树形结构导航中的哪一种或者同时综合使用3种导航模式。 ...
- UIKit是iOS开发中用于构建用户界面的框架,包括按钮、标签、表格视图等UI组件。 - 熟悉UIKit的使用对于构建直观、交互友好的应用至关重要。 #### 3. **Auto Layout:** - Auto Layout是一种用于设计自适应界面...
iFactr iFactr是基于C#.NET的跨平台移动应用程序开发框架。 跨平台的UI控件适用于Android,iOS和Windows以及Compact Framework的绑定RESTful数据服务...科技类iFactr使用“模型-视图-控制器”设计模式和以Microsoft
使用本机语言和框架绘制视图(iOS时使用SwiftUI-或Storyboards,Android时使用Compose-或XML-)以实现最大的设计能力 Kotlin多平台概述(移动版) 该架构完全基于功能强大的Kotlin Multiplatform系统。 主要原理...
适用于iOS的Live Fit Food ...MVVM设计模式 使用导航,步进器,选择器和其他SwiftUI视图 核心位置 表格视图控制器和自定义表格视图单元 核心数据实体关系 使用属性包装器,例如StateObject,ObservedObject,Environm
RouteComposer是面向协议,基于Cocoa UI抽象的库,可帮助处理iOS应用程序中的视图控制器组成,导航和深层链接任务。 可以用作模式的通用替换。 目录 导航问题 安装 例子 要求 感言 用法 执行 工厂 发现者 行动 ...
屏幕截图特征100%原生并使用SwiftUI制作明暗模式控制和检查容器显示日志根据Apple的人机界面指南进行设计iPad应用程式如何使用安装克隆仓库。 在Xcode> = 11.4中打开项目。 将捆绑包标识符和签名身份更改为您自己的...
作为MVC设计模式中的C,Controller一直扮演着项目开发中最重要的角色,它是视图和数据的桥梁,通过它的管理,将数据有条有理的展示在我们的View层上。iOS中的UIViewController是UIKit框架中最基本的一个类。从第一个...
MVC路由器一个JavaScript库,用于使用模型视图控制器(MVC)设计模式构建单页应用程序(SPA)。安装要将MVC路由器添加到您的应用程序,请执行以下操作: npm install mvc-router-spa --save为什么选择MVC? MVC是一...
RxView模型 模型-视图-视图模型 Model-View-ViewModel (从... 它还可以大大提高代码重用的机会,并允许开发人员和UI设计人员在开发应用程序的各个部分时更轻松地进行协作。 它基本上增加了一个新的“分隔层”,以将M
我们将向您介绍移动设计模式的圣杯:模型视图控制器(MVC)模式。 设计模式只是针对常见软件问题的可重复且经过优化的解决方案,在本教程中使用时,您将学到更多有关此问题的信息。 您将创造什么 您将编写一个琐事...
SwiftUI具有易于阅读且易于编写的声明式Swift语法,可与新的Xcode设计工具无缝协作,以使您的代码和设计完美同步。 自动支持动态类型,暗模式,本地化和可访问性,这意味着您的SwiftUI代码的第一行已经是您编写过的...
它遵循MVC(模型-视图-控制器)模式,支持数据驱动的界面设计。 元对象系统与信号槽机制: Qt Meta-Object System(元对象系统)是Qt框架的一个重要特性,它引入了元对象编译器(moc),用于在编译时生成额外的...
专为聊天应用程序和常规视图控制器设计的演示文稿 纵向和横向模式(支持iPhone X) 捕获资产(照片,实时照片,视频) 将捕获的资产保存到照片库 翻转相机到前/后 打开/关闭实时照片 高度可定制的布局和UI 要求iOS ...
请作为问题提出项目详情这个项目是使用MVVM模式在SwiftUI中开发的,API客户端带有POP(面向协议的编程),用于进行服务器调用是本机的,并且使用URLSession。 使用当今的最佳实践,例如泛型,可编码,扩展,MVVM,...
7blur项目建立在这些框架上,以产生控制中心和通知中心,例如模糊效果,从而为iOS 7应用程序增强了深度的第三种设计模式。 请注意,iOS 7已达到GM(11A465)状态。 此特定的API在WWDC 2013上进行了公开讨论,并且7...