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