| Platform | Since |
|---|---|
| Android | 0.8 |
| iPhone | 0.8 |
| iPad | 0.8 |
A view that encapsulates a horizontally-scrolling set of sub-views, navigable using its built-in horizontal swipe gestures.
Use the Titanium.UI.createScrollableView method to create a scrollable view.
ScrollableView supports a visual paging control that may be enabled to indicate on-screen that a view is visible.
Only the scroll event exists on Android. To support those that are missing, event listeners
may be added to its child views.
In a previous Titanium version for iOS, the maxZoomScale and minZoomScale properties were
removed for performance and parity reasons. As they still remain in Titanium.UI.ScrollView,
the equivalent functionality may be obtained by adding a ScrollView to ScrollableView. See the
"Simple Scrollable View with 2 Zoomable Images" example for a demonstration.
Create three views and place each into a scrollable view.
var win = Ti.UI.createWindow(); var view1 = Ti.UI.createView({ backgroundColor:'#123' }); var view2 = Ti.UI.createView({ backgroundColor:'#246' }); var view3 = Ti.UI.createView({ backgroundColor:'#48b' }); var scrollableView = Ti.UI.createScrollableView({ views:[view1,view2,view3], showPagingControl:true }); win.add(scrollableView); win.open();
Create two scroll views, each containing an image view, and place them in a scrollable view.
var img1 = Ti.UI.createImageView({ image:'http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/' + 'Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/' + '402px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg' }); var img1Wrapper = Ti.UI.createScrollView({ maxZoomScale:4.0, }); img1Wrapper.add(img1); var img2 = Ti.UI.createImageView({ image:'http://www.nasa.gov/images/content/' + '616903main_rover_comparison1600_1600-1200.jpg' }); var img2Wrapper = Ti.UI.createScrollView({ maxZoomScale:4.0, }); img2Wrapper.add(img2); var photosView = Ti.UI.createScrollableView({ showPagingControl:true, views:[img1Wrapper,img2Wrapper] }); win.add(photosView);
| Name | Summary |
|---|---|
| add |
Adds a child to this view's hierarchy. |
| addEventListener |
Adds the specified callback as an event listener for the named event. |
| addView |
Adds a new view to this Scrollable View. |
| animate |
Animates this view. |
| convertPointToView |
Translates a point from this view's coordinate system to another view's coordinate system. |
| fireEvent |
Fires a synthesized event to any registered listeners. |
| getAnchorPoint |
Gets the value of the anchorPoint property. (iPhone, iPad only.) |
| getAnimatedCenterPoint |
Gets the value of the animatedCenterPoint property. |
| getBackgroundColor |
Gets the value of the backgroundColor property. |
| getBackgroundDisabledColor |
Gets the value of the backgroundDisabledColor property. (Android only.) |
| getBackgroundDisabledImage |
Gets the value of the backgroundDisabledImage property. (Android only.) |
| getBackgroundFocusedColor |
Gets the value of the backgroundFocusedColor property. (Android only.) |
| getBackgroundFocusedImage |
Gets the value of the backgroundFocusedImage property. (Android only.) |
| getBackgroundGradient |
Gets the value of the backgroundGradient property. |
| getBackgroundImage |
Gets the value of the backgroundImage property. |
| getBackgroundLeftCap |
Gets the value of the backgroundLeftCap property. (iPhone, iPad only.) |
| getBackgroundRepeat |
Gets the value of the backgroundRepeat property. (iPhone, iPad only.) |
| getBackgroundSelectedColor |
Gets the value of the backgroundSelectedColor property. (Android, Mobile Web only.) |
| getBackgroundSelectedImage |
Gets the value of the backgroundSelectedImage property. (Android, Mobile Web only.) |
| getBackgroundTopCap |
Gets the value of the backgroundTopCap property. (iPhone, iPad only.) |
| getBorderColor |
Gets the value of the borderColor property. |
| getBorderRadius |
Gets the value of the borderRadius property. |
| getBorderWidth |
Gets the value of the borderWidth property. |
| getBottom |
Gets the value of the bottom property. |
| getCacheSize |
Gets the value of the cacheSize property. (iPhone, iPad only.) |
| getCenter |
Gets the value of the center property. |
| getChildren |
Gets the value of the children property. |
| getCurrentPage |
Gets the value of the currentPage property. |
| getDisableBounce |
Gets the value of the disableBounce property. (iPhone, iPad only.) |
| getFocusable |
Gets the value of the focusable property. (Android only.) |
| getHeight |
Gets the value of the height property. |
| getKeepScreenOn |
Gets the value of the keepScreenOn property. (Android only.) |
| getLayout |
Gets the value of the layout property. |
| getLeft |
Gets the value of the left property. |
| getOpacity |
Gets the value of the opacity property. |
| getPagingControlColor |
Gets the value of the pagingControlColor property. (iPhone, iPad only.) |
| getPagingControlHeight |
Gets the value of the pagingControlHeight property. (iPhone, iPad only.) |
| getPagingControlTimeout |
Gets the value of the pagingControlTimeout property. (Android only.) |
| getRight |
Gets the value of the right property. |
| getShowPagingControl |
Gets the value of the showPagingControl property. |
| getSize |
Gets the value of the size property. |
| getSoftKeyboardOnFocus |
Gets the value of the softKeyboardOnFocus property. (Android only.) |
| getTop |
Gets the value of the top property. |
| getTouchEnabled |
Gets the value of the touchEnabled property. |
| getTransform |
Gets the value of the transform property. |
| getViews |
Gets the value of the views property. |
| getVisible |
Gets the value of the visible property. |
| getWidth |
Gets the value of the width property. |
| getZIndex |
Gets the value of the zIndex property. |
| hide |
Hides this view. |
| moveNext |
Sets the current page to the next consecutive view in |
| movePrevious |
Sets the current page to the previous consecutive view in |
| remove |
Removes a child view from this view's hierarchy. |
| removeEventListener |
Removes the specified callback as an event listener for the named event. |
| removeView |
Removes an existing view from this Scrollable View. Does nothing if view proivded does not exist. |
| scrollToView |
Scrolls to the specified view in |
| setAnchorPoint |
Sets the value of the anchorPoint property. (iPhone, iPad only.) |
| setBackgroundColor |
Sets the value of the backgroundColor property. |
| setBackgroundDisabledColor |
Sets the value of the backgroundDisabledColor property. (Android only.) |
| setBackgroundDisabledImage |
Sets the value of the backgroundDisabledImage property. (Android only.) |
| setBackgroundFocusedColor |
Sets the value of the backgroundFocusedColor property. (Android only.) |
| setBackgroundFocusedImage |
Sets the value of the backgroundFocusedImage property. (Android only.) |
| setBackgroundGradient |
Sets the value of the backgroundGradient property. |
| setBackgroundImage |
Sets the value of the backgroundImage property. |
| setBackgroundLeftCap |
Sets the value of the backgroundLeftCap property. (iPhone, iPad only.) |
| setBackgroundRepeat |
Sets the value of the backgroundRepeat property. (iPhone, iPad only.) |
| setBackgroundSelectedColor |
Sets the value of the backgroundSelectedColor property. (Android, Mobile Web only.) |
| setBackgroundSelectedImage |
Sets the value of the backgroundSelectedImage property. (Android, Mobile Web only.) |
| setBackgroundTopCap |
Sets the value of the backgroundTopCap property. (iPhone, iPad only.) |
| setBorderColor |
Sets the value of the borderColor property. |
| setBorderRadius |
Sets the value of the borderRadius property. |
| setBorderWidth |
Sets the value of the borderWidth property. |
| setBottom |
Sets the value of the bottom property. |
| setCacheSize |
Sets the value of the cacheSize property. (iPhone, iPad only.) |
| setCenter |
Sets the value of the center property. |
| setCurrentPage |
Sets the value of the currentPage property. |
| setDisableBounce |
Sets the value of the disableBounce property. (iPhone, iPad only.) |
| setFocusable |
Sets the value of the focusable property. (Android only.) |
| setHeight |
Sets the value of the height property. |
| setKeepScreenOn |
Sets the value of the keepScreenOn property. (Android only.) |
| setLayout |
Sets the value of the layout property. |
| setLeft |
Sets the value of the left property. |
| setOpacity |
Sets the value of the opacity property. |
| setPagingControlColor |
Sets the value of the pagingControlColor property. (iPhone, iPad only.) |
| setPagingControlHeight |
Sets the value of the pagingControlHeight property. (iPhone, iPad only.) |
| setRight |
Sets the value of the right property. |
| setShowPagingControl |
Sets the value of the showPagingControl property. |
| setSoftKeyboardOnFocus |
Sets the value of the softKeyboardOnFocus property. (Android only.) |
| setTop |
Sets the value of the top property. |
| setTouchEnabled |
Sets the value of the touchEnabled property. |
| setTransform |
Sets the value of the transform property. |
| setViews |
Sets the value of the views property. |
| setVisible |
Sets the value of the visible property. |
| setWidth |
Sets the value of the width property. |
| setZIndex |
Sets the value of the zIndex property. |
| show |
Makes this view visible. |
| toImage |
Returns an image of the rendered view, as a Blob. |
| Name | Type | Summary |
|---|---|---|
| anchorPoint | Point |
Anchor point where animation should occur, relative to the view's boundaries. (iPhone, iPad only.) |
| animatedCenterPoint | Point |
Current position of the view during an animation. read-only |
| backgroundColor | String |
Background color of the view. |
| backgroundDisabledColor | String |
Disabled background color of the view. (Android only.) |
| backgroundDisabledImage | String |
Disabled background image for the view, specified as a local file path or URL. (Android only.) |
| backgroundFocusedColor | String |
Focused background color of the view. (Android only.) |
| backgroundFocusedImage | String |
Focused background image for the view, specified as a local file path or URL. (Android only.) |
| backgroundGradient | Gradient |
A background gradient for the view. |
| backgroundImage | String |
Background image for the view, specified as a local file path or URL. |
| backgroundLeftCap | Number |
Size of the left end cap. (iPhone, iPad only.) |
| backgroundRepeat | Boolean |
Toggle for whether or not to tile a background across a view. (iPhone, iPad only.) |
| backgroundSelectedColor | String |
Selected background color of the view. (Android, Mobile Web only.) |
| backgroundSelectedImage | String |
Selected background image url for the view, specified as a local file path or URL. (Android, Mobile Web only.) |
| backgroundTopCap | Number |
Size of the top end cap. (iPhone, iPad only.) |
| borderColor | String |
Border color of the view. |
| borderRadius | Number |
Border radius of the view. |
| borderWidth | Number |
Border width of the view. |
| bottom | Number or String |
View's bottom position, in platform-specific units. |
| cacheSize | Number |
Number of views to cache (pre-render). (iPhone, iPad only.) |
| center | Point |
View's center position, in the parent view's coordinates. |
| children | Array<Titanium.UI.View> |
Array of this view's child views. read-only |
| currentPage | Number |
Index of the active page. |
| disableBounce | Boolean |
Determines whether view bouncing effect is disabled. (iPhone, iPad only.) |
| focusable | Boolean |
Whether view should be focusable while navigating with the trackball. (Android only.) |
| height | Number or String |
View height, in platform-specific units. |
| keepScreenOn | Boolean |
Whether to keep the device screen on. (Android only.) |
| layout | String |
Specifies how the view positions its children. One of: 'absolute', 'vertical', or 'horizontal'. |
| left | Number or String |
View's left position, in platform-specific units. |
| opacity | Number |
Opacity of this view, from 0.0 (transparent) to 1.0 (opaque). |
| pagingControlColor | String |
Color of the paging control, in web color name or hex format. (iPhone, iPad only.) |
| pagingControlHeight | Number |
Height of the paging control, in pixels. (iPhone, iPad only.) |
| pagingControlTimeout | Number |
Number of milliseconds to wait before hiding the paging control. Less than or equal to 0 disables timeout, keeping controls displayed. (Android only.) creation |
| right | Number or String |
View's right position, in platform-specific units. |
| showPagingControl | Boolean |
Determines whether the paging control is visible. |
| size | Object |
Rendered size of the view as a dictionary of width and height properties. read-only |
| softKeyboardOnFocus | Number |
Determines keyboard behavior when this view is focused. (Android only.) |
| top | Number or String |
The view's top position. |
| touchEnabled | Boolean |
Whether view should receive touch events. |
| transform | Titanium.UI.2DMatrix or Titanium.UI.iOS.3DMatrix |
Transformation matrix to apply to the view. |
| views | Array<Titanium.UI.View> |
Sets the views within this Scrollable View. |
| visible | Boolean |
Boolean value indicating whether the view is visible. |
| width | Number or String |
View's width, in platform-specific units. |
| zIndex | Number |
Z index position relative to other sibling views. |
| Name | Summary |
|---|---|
| click |
Fired when the device detects a click against this view. (iPhone, iPad only.) |
| doubletap |
Fired when the device detects a double tap against this view. |
| longpress |
Fired when the device detects a long press against this view. (iPhone, iPad only.) |
| pinch |
Fired when the device detects a pinch gesture against this view. (iPhone, iPad only.) |
| scroll |
Fired when the current view is changed. |
| singletap |
Fired when the device detects a single tap against this view. (iPhone, iPad only.) |
| touchcancel |
Fired when a touch gesture is interrupted by the device. (iPhone, iPad only.) |
| touchend |
Fired when a touch gesture is complete. (iPhone, iPad only.) |
| touchmove |
Fired when a touch gesture is moved. (iPhone, iPad only.) |
| touchstart |
Fired as soon as the device detects a touch gesture against this view. (iPhone, iPad only.) |
