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