Titanium UI之 Scrolling Views组件

ScrollView及ScrollableView

Objective

TI 中 有两种滚动视图组件，ScrollView 和 ScrollableView，尽管名称大体相同，可是使用方法和属性都是很大的不一样。

Contents

ScrollView vs. ScrollableView

上面两幅图显示:

•  ScrollView 是当内容太多时，出现的滚动条类组件，你能够拖拽滚动条来查看内容。

•  ScrollableView 是一个包含多个子Views的组件，跟web上面的焦点图比较相似，他只有横向滚动。

ScrollView

你能够像下面同样建立一个ScrollView

var 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处理。事件上浮

Android 特别提醒：

若是设置了width和contentWidth 也就是设置了scrollType为vertical.(设置了纵向滚动条)

若是设置了 height  和 contentHeight 也就是设置了scrollType为 horizontal .(设置了横向滚动条)

若是Titanium不可以肯定滚动条的方向，将会出现警告信息：

TiUIScrollView ... Scroll direction could not be determined..

ScrollView 的事件

你能够为ScrollView增长事件监听器，和其余组件同样。事件类型，请参考 API docs 

ScrollableView

你能够像下面同样建立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