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
来源:oschina
链接:https://my.oschina.net/u/657361/blog/86837