返回博客首页
← 所有文章

Telerik UI for NativeScript 预览版 2 发布:推出 RadListView

2015年10月27日 — 作者:Deyan Ginev

Telerik UI for NativeScript 的第二个预览版本已经可以下载。主要亮点是 RadListView:一个基于成熟的 Android 版 RadListView 和 iOS 版 TKListView 的 UI 虚拟化数据列表控件。RadListView for NativeScript 建立在这些控件之上,继承了所有现代移动应用程序中用作构建块的熟悉且强大的功能。以下是亮点

按需加载

当您的数据来自远程源并且您不想一次性加载所有数据时,此功能特别有用。考虑一个列出特定类别应用程序的移动应用程序商店。通过向下滚动,列表项会不断添加,但永远不会一次性加载所有项。按需加载也可以调整为在可滚动列表的末尾显示“加载更多...”按钮,以便用户手动触发数据请求。

项目布局

RadListView 支持三种不同的项目布局

- 线性(堆叠)布局 - 项目根据滚动方向水平或垂直线性排序
- 网格布局 - 项目根据滚动方向以列或行排序。行数或列数必须预定义。
交错网格布局 - 这是最复杂的项目布局类型。此处项目排序类似于网格布局,而每个项目都直接位于其滚动方向前驱下方。以下是一个真实示例,展示了它的外观

RadListView staggered grid layout on Android

每个项目布局还支持两种不同的滚动方向:水平和垂直。

项目重新排序

“项目重新排序”功能有用的一个常见场景是待办事项列表,可以对其进行优先级排序。RadListView 通过设置单个属性即可开箱即用地实现此功能。您还可以获得一组专用事件,这些事件在每次项目重新排序时触发,并为您提供旧索引和新索引。

iOS 上的 RadListView 项目重新排序  Android 上的 RadListView 项目重新排序

滑动执行

滑动执行机制允许您为控件中可视化的每个项目实现特定操作。许多流行的电子邮件应用程序都实现了这种方法,以允许其用户通过向左或向右滑动来删除或归档项目。滑动执行功能高度可定制,允许将被滑动的项目粘贴到给定偏移量并显示一组预定义的操作,或者在用户释放项目时简单地执行操作。

iOS 上的 RadListView 滑动执行  Android 上的 RadListView 滑动执行

下拉刷新

一个非常流行的用户体验模式,允许您的最终用户通过下拉刷新数据列表
RadListView:iOS 上的下拉刷新  Android 上的 RadListView 下拉刷新

项目动画

项目动画可以通过使数据列表对数据源中的更改进行动画处理,为移动应用程序的用户体验增添一抹亮色。当添加或删除项目时,它们的视觉表示将优雅地动画进入或移出视口

Android 上的 RadListView 项目动画 

可观察数组

ObservableArray 模块是 NativeScript 核心框架的一部分,表示一个集合,该集合会触发有关其内部状态的通知。RadListView 知道如何与 ObservableArray 配合使用,因此一旦您拥有一个 ObservableArray 作为列表的源并且数据项发生更改,您就不需要执行任何操作。

总结

我们对 NativeScript 版 RadListView 的第一个版本感到非常兴奋,并且可以向您保证,未来还有更多功能。您绝对应该查看NPM 上提供的 Telerik UI for NativeScript 的新版本,并确保使用以下方式告诉我们您的想法

- Telerik 论坛: http://www.telerik.com/forums/nativescript-ui
- 我们的 GitHub 代码库: https://github.com/telerik/nativescript-ui-samples

此外,别忘了查看在线文档,了解操作方法和入门指南

http://docs.telerik.com/devtools/nativescript-ui

享受!