Titanium.UI.ScrollView

viewAndroidiPhoneiPadmacOSsince 0.9

A view that contains a horizontally and/or vertically-scrollable region of content.

Use the Titanium.UI.createScrollView method or <ScrollView> Alloy element to create a scroll view.

Views added to the scroll view will be scrolled based on the size of the scrollable region of content. If a scrollable region fits within the size of its scroll view, the view will not scroll.

Android Platform Notes

On Android, a scroll view can only scroll in one direction, either vertically or horizontally, and not both at the same time. The Titanium.UI.ScrollView.scrollType property sets the scroll direction explicitly. If the scrollType property is not assigned a value, the scroll view attempts to determine the scroll direction based on some the following rules:

If Titanium.UI.ScrollView.contentWidth and Titanium.UI.ScrollView.width are both set and are equal to each other, or if they are both set and showVerticalScrollIndicator is set to true, then the scroll direction is set to "vertical".
If Titanium.UI.ScrollView.contentHeight and Titanium.UI.ScrollView.height are both set and are equal, or if they are both set and Titanium.UI.ScrollView.showHorizontalScrollIndicator is set to true, then the scroll direction is set to "horizontal".

Pinching a ScrollableView to zoom in and out of content is not supported on Android. On iOS, this action is natively supported by the UIScrollView class, but on Android, the native ScrollView class does not support this action.

Examples

Simple Scroll View

Create a scroll view with content.

var win = Ti.UI.createWindow({
  exitOnClose: true,
  fullscreen: false,
  title: 'ScrollView Demo'
});

var scrollView = Ti.UI.createScrollView({
  showVerticalScrollIndicator: true,
  showHorizontalScrollIndicator: true,
  height: '80%',
  width: '80%'
});
var view = Ti.UI.createView({
  backgroundColor:'#336699',
  borderRadius: 10,
  top: 10,
  height: 2000,
  width: 1000
});
scrollView.add(view);
win.add(scrollView);
win.open();

Scroll View as a Table View

Create a scroll view that contains a set of views in a layout to resemble a table view with rows. This approach can mitigate the native Android issue described in the "TextFields in Tables with SOFT_INPUT_ADJUST_PAN" section of <Titanium.UI.TableView>.

var win = Ti.UI.createWindow();

if (Ti.UI.Android){
  win.windowSoftInputMode = Ti.UI.Android.SOFT_INPUT_ADJUST_PAN;
}

function createRow(i) {
  var row = Ti.UI.createView({
    backgroundColor: 'white',
    borderColor: '#bbb',
    borderWidth: 1,
    width:'100%', height: 70,
    top: 0, left: 0
  });
  var inputTextField = Ti.UI.createTextField({
    hintText: 'Enter value ' + i,
    keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION,
    top: 10, left: '10%',
    width: '80%', height: 60
  });
  row.add(inputTextField);
  return row;
}

var scrollView = Ti.UI.createScrollView({
  bottom:120,
  layout: 'vertical'
});

for(var i = 0; i <= 20; i++){
var row = createRow(i);
  scrollView.add(row);
}
win.add(scrollView);

var label = Ti.UI.createLabel({
  backgroundColor:'darkgray',
  text: 'Your advert here',
  textAlign: 'center',
  bottom:0,
  width: Titanium.UI.FILL,
  height:100
});
win.add(label);
win.open();

Alloy XML Markup

Previous simple scroll view example as an Alloy view.

<Alloy>
    <Window id="win" backgroundColor="white" exitOnClose="true" fullscreen="false" title="ScrollView Demo">
        <ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true" height="80%" width="80%">
            <View id="view" backgroundColor="#336699" borderRadius="10" top="10" height="2000" width="1000" />
        </ScrollView>
    </Window>
</Alloy>

Properties 91

accessibilityDisableLongPress

BooleanAndroidsince 12.4.0

Parameters	Type	Description
name	String	Name of the event.
callback	Callback<Titanium.Event>	Callback function to invoke when the event is fired. 4 fields bubbles Boolean True if the event will try to bubble up if possible. cancelBubble Boolean Set to true to stop the event from bubbling. source Object Source object that fired the event. type String Name of the event fired.

Parameters	Type	Description
animation	Titanium.UI.Animation \| Dictionary<Titanium.UI.Animation>	Either a dictionary of animation properties or an Animation object.
callback?	Callback<Object>	Function to be invoked upon completion of the animation.

Parameters	Type	Description
point	Point	A point in this view's coordinate system. If this argument is missing an `x` or `y` property, or the properties can not be converted into numbers, an exception will be raised.
destinationView	Titanium.UI.View	View that specifies the destination coordinate system to convert to. If this argument is not a view, an exception will be raised.

Parameters	Type	Description
x	Number	X coordinate from the scrollable region's coordinate system.
y	Number	Y coordinate from the scrollable region's coordinate system.
options?	AnimatedOptions	A simple object for specifying the animation properties when scrolling the view (since SDK 6.1.0). When set to `{ animated: true }` it will scroll smoothly to the destination. Note that the default here is equivalent to passing in `{ animated: true }`

Parameters	Type	Description
contentOffsetXY	Point	X and Y coordinates to which to reposition the top-left point of the scrollable region.
animated?	AnimatedOptions	A JS object with an `animated` property which determines whether the scrollable region reposition should be animated. Note that the default here is equivalent to passing in `{ animated: true }`

Parameters	Type	Description
zoomScale	Number	Scaling factor of the scroll view's content.
options?	AnimatedOptions	A JS object with an `animated` property which determines whether the scrollable region reposition should be animated Note that the default here is equivalent to passing in `{ animated: false }`

Parameters	Type	Description
callback?	Callback<Titanium.Blob>	Function to be invoked upon completion. If non-null, this method will be performed asynchronously. If null, it will be performed immediately.
honorScaleFactor?	Boolean	Determines whether the image is scaled based on scale factor of main screen. (iOS only) When set to true, image is scale factor is honored. When set to false, the image in the blob has the same dimensions for retina and non-retina devices.

Event properties	Type	Description
x	Number	X coordinate of the event from the `source` view's coordinate system.
y	Number	Y coordinate of the event from the `source` view's coordinate system.
obscured	Boolean	Returns `true` if the click passed through an overlapping window belonging to another app. This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Event properties	Type	Description
decelerate	Boolean	Indicates whether scrolling will continue but decelerate, now that the drag gesture has been released by the touch. If `false`, scrolling will stop immediately. Is always `true` on Android.
x	Number	X coordinate from the scrollable touch position.
y	Number	Y coordinate from the scrollable touch position.

Event properties	Type	Description
scale	Number	The scale factor relative to the points of the two touches in screen coordinates.
velocity	Number	The velocity of the pinch in scale factor per second.
time	Number	The event time of the current event being processed.
timeDelta	Number	The time difference in milliseconds between the previous accepted scaling event and the current scaling event.
currentSpan	Number	The average distance between each of the pointers forming the gesture in progress through the focal point.
currentSpanX	Number	The average X distance between each of the pointers forming the gesture in progress through the focal point.
currentSpanY	Number	The average Y distance between each of the pointers forming the gesture in progress through the focal point.
previousSpan	Number	The previous average distance between each of the pointers forming the gesture in progress through the focal point.
previousSpanX	Number	The previous average X distance between each of the pointers forming the gesture in progress through the focal point.
previousSpanY	Number	The previous average Y distance between each of the pointers forming the gesture in progress through the focal point.
focusX	Number	The X coordinate of the current gesture's focal point.
focusY	Number	The Y coordinate of the current gesture's focal point.
inProgress	Boolean	Returns `true` if a scale gesture is in progress, `false` otherwise.

Event properties	Type	Description
contentSize	Size	The current content size of the scroll view defined by its `width` and `height` properties.
decelerating	Boolean	Indicates whether the scroll is decelerating.
dragging	Boolean	Indicates whether the event was fired during a dragging gesture, where the touch remained in contact with the display to physically drag the view, as opposed to it being the result of scrolling momentum.
zooming	Boolean	Indicates whether the event was fired during a zooming operation. This is only available from Release 3.2.3 of the Titanium Mobile SDK.
curZoomScale	Number	The current scaling factor of the scroll view content. This might not be equal to the `zoomScale` property or be within the range specified by `minZoomScale` and `maxZoomScale`. This is only available from Release 3.2.3 of the Titanium Mobile SDK.
x	Number	X coordinate of the event from the `source` view's coordinate system.
y	Number	Y coordinate of the event from the `source` view's coordinate system.

Event properties	Type	Description
direction	String	Direction of the swipe--either 'left', 'right', 'up', or 'down'.
x	Number	X coordinate of the event's endpoint from the `source` view's coordinate system.
y	Number	Y coordinate of the event's endpoint from the `source` view's coordinate system.
obscured	Boolean	Returns `true` if the swipe passed through an overlapping window belonging to another app. This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Examples

Simple Scroll View

Scroll View as a Table View

Alloy XML Markup

Properties 91

Linear and Radial Gradients

Methods 22

Events 23