Titanium UI之 Scrolling Views组件
2012-11-03 13:44
507 查看
ScrollView及ScrollableView
上面两幅图显示:
ScrollView 是当内容太多时,出现的滚动条类组件,你可以拖拽滚动条来查看内容。
ScrollableView 是一个包含多个子Views的组件,跟web上面的焦点图比较类似,他只有横向滚动。
Android 特别提醒:
如果设置了width和contentWidth 也就是设置了scrollType为vertical.(设置了纵向滚动条)
如果设置了 height 和 contentHeight 也就是设置了scrollType为 horizontal .(设置了横向滚动条)
如果Titanium不能够确定滚动条的方向,将会出现警告信息:
TiUIScrollView ... Scroll direction could not be determined..
一般是先定义一个Views数组,然后创建ScrollableView,向其添加数据。
Objective
TI 中 有两种滚动视图组件,ScrollView 和 ScrollableView,尽管名称大致相同,但是使用方法和属性都是很大的不同。Contents
ScrollView vs. ScrollableView
上面两幅图显示:
ScrollView 是当内容太多时,出现的滚动条类组件,你可以拖拽滚动条来查看内容。
ScrollableView 是一个包含多个子Views的组件,跟web上面的焦点图比较类似,他只有横向滚动。
ScrollView
你可以像下面一样创建一个ScrollViewvar sv = Ti.UI.createScrollView({ height:200,//ScrollView的高度 width:200,//其宽度 /* left & right work too */ contentHeight:'auto', contentWidth:'auto' })
ScrollView properties
一些属性:(具体参见API)Property | Description |
zoomScale, minZoomScale, maxZoomScale | You can control zooming of the content within the ScrollView with these properties. Each accepts a numeric value between 0 and 1. |
horizontalBounce, verticalBounce | (iOS only) These Boolean values control whether the ScrollView displays that "bounce" effect when the user has reached the end of the scrolling content. |
showHorizontalScrollIndicator, showVerticalScrollIndicator | Boolean值,控制Scroll的导航是否显示。 |
scrollType | 在Android中,你可以设置横向或者纵向滚动条 |
canCancelEvents | 在IOS中,如果设置为True,事件将被ScrollView处理,而不是其包含的Views处理。事件上浮 |
如果设置了width和contentWidth 也就是设置了scrollType为vertical.(设置了纵向滚动条)
如果设置了 height 和 contentHeight 也就是设置了scrollType为 horizontal .(设置了横向滚动条)
如果Titanium不能够确定滚动条的方向,将会出现警告信息:
TiUIScrollView ... Scroll direction could not be determined..
ScrollView 的事件
你可以为ScrollView增加事件监听器,和其他组件一样。事件类型,请参考 API docsScrollableView
你可以像下面一样创建ScrollableView。var view1 = Titanium.UI.createView({backgroundColor:'#123'}); var view2 = Titanium.UI.createView({backgroundColor:'#234'}); var view3 = Titanium.UI.createView({backgroundColor:'#345'}); var scrollable = Titanium.UI.createScrollableView({ views:[view1,view2,view3], showPagingControl: true }); win.add(scrollable); // 添加一个Views var view4 = Titanium.UI.createView({backgroundColor:'#456'}); scrollable.addView(view4); // 移除一个Views scrollable.removeView(view1);
一般是先定义一个Views数组,然后创建ScrollableView,向其添加数据。
一些属性:具体参见API
Property | Description |
showPagingControl | Boolean,是否显示导航,就是那些点 .... |
pagingControlColor | 设置一页的背景,但是你不能够设置导航点的颜色。 |
pagingControlHeight | 设置导航点的高度 |
currentPage | 一个索引值,决定显示那个页,从0开始。 |
cacheSize | This iOS-only property accepts an integer value to control the number of views pre-rendered. See the API docs for considerations when using this property. |
一些方法:
Method | Description |
scrollToView() | Accepts an integer or object reference of the sub-view to scroll into view within the ScrollableView. |
addView() | Adds a view to the ScrollableView, as shown in the code above. |
removeView() | Removes a view from the ScrollableView, as shown in the code above. |
ScrollableView events
其支持标准事件机制。 API docs相关文章推荐
- iPhone: Maintain visibility of form inputs – auto-scrolling views【保持表单输入的可视性 - 自动滚动】
- Perfect smooth scrolling in UITableViews
- Android的桌面组件App Widget的使用方法 AppWidgetProvider RemoteViews
- Perfect smooth scrolling in UITableViews
- Titanium UI之TableViews组件
- AndroidAnnotations——Enhance custom views 优化自定义组件
- Perfect smooth scrolling in UITableViews
- AndroidAnnotations——Enhance custom views 优化自定义组件
- Struts控制器组件
- 工作流的设计,业务流程图的绘制与编辑,工作流软件,工作流源代码组件库,开发平台,开发引擎
- Android基本组件及其交互
- 结巴分词 0.19 发布 Python 中文分词组件
- 组件设计原则之概念篇(一)
- List Widgets(3):Remote views Service和Factory
- javaweb 三大组件之Severlet
- spark组件之graphx函数方法(二)
- NPOI开源组件(操作Execl)创建Workbook和Sheet,创建单元格,设置行列样式等
- vue.2.0-自定义全局组件
- vue.js之动态组件
- 日志收集框架 Flume 组件之Source使用