Scrollview

Scrollview

Download PDF

Scrollview

A Scroll View is a special type of FrameLayout, which allows you to scroll through a list of views that logically occupy more space than the actual space of physical display.To scroll data in View, you use Scroll View. This helps you scroll across the subviews.


Configure.IT brings you this control where you can have horizontal as well as vertical scrolling, depending upon your requirement. Scroll View has a view as its subview and in that view you can have any control(s).

    Keywords:
  • scroll view
  • scroller
  • scroll compressor
  • scroll vector

Properties

  • Custom Border
    PARAMETER
    DESCRIPTION
    Border Width

    Sets border width for a Scroll View.

    Border Corner Radius

    Sets radius with which control's rounded corners should be drawn. Setting this property will enable control appear with rounded corners.

    Border Color

    Sets the border color for a control. Works only if "Border Width" property is set to a value more than 0. Default would be black color.

    Dash Width For Dashed Border

    Sets width of each dash in dashed border pattern for a control.

    Space Between Dashes For Dashed Border

    Helps set the spacing between Dashes for Dashed Border.

    Transform Angle

    Sets angle in degrees to which the Scroll View which is in its normal state, has to be rotated. Possible values for this property are -360 to 360.

  • CIT Custom Properties
    PARAMETER
    DESCRIPTION
    InitialZoomScale

    This property controls the zoom level when the page is first loaded.

    ScrollsToTop

    This allows users to smoothly scroll back to the top of the page.

    Zooming View Id

    This property is for setting "Object ID" of view that has to scale when zooming is about to occur in the Scroll View.

    Top zooming view Identifier

    This property is for setting "Object ID" of view which has to be shown when Scroll View is scrolled downwards to the origin

    Bottom zooming view identifier

    This property is for setting "Object ID" of view which has to be shown when Scroll View is scrolled upwards to the end.

  • Display
    PARAMETER
    DESCRIPTION
    Indicator Style

    Set the style of the scroll indicators from the given options like default, black and white.

    Shows Horizontal Scroll Indicator

    A Boolean value that controls whether the horizontal scroll indicator is visible.

    Shows Vertical Scroll Indicator

    A Boolean value that controls whether the vertical scroll indicator is visible.

    Scroll Enabled

    A Boolean value that determines whether scrolling is enabled.

    Paging Enabled

    A Boolean value that determines whether paging is enabled for the scroll view.

    Directional Lock Enabled

    A Boolean value that determines whether scrolling is disabled in a particular direction

    Bounces

    A Boolean value that controls whether the Scroll View bounces past the edge of content and back again.

    Always Bounce Horizontal

    A Boolean value that determines whether bouncing always occurs when horizontal scrolling reaches the end of the content view.

    Always Bounce Vertical

    A Boolean value that determines whether bouncing always occurs when vertical scrolling reaches the end of the content view.

    Minimum Zoom Scale

    A floating-point value that specifies the minimum scale factor that can be applied to the Scroll view's content.

    Maximum Zoom Scale

    A floating-point value that specifies the maximum scale factor that can be applied to the Scroll view's content.

    Zoom Bounces

    A Boolean value that determines whether the scroll view animates the content scaling when the scaling exceeds the maximum or minimum limits.

    Delays Content Touches

    A Boolean value that determines whether the Scroll View delays the handling of touch-down gestures.

    Can Cancel Content Touches

    A Boolean value that controls whether touches in the content view always lead to tracking.

    Keyboard Dismiss Mode

    The manner in which the keyboard is dismissed when a drag begins in the Scroll View.

    User Interaction Enabled

    A Boolean value that determines whether user interaction are ignored or not on the particular object.

    Alpha

    Used to set the transparency to the Scroll View which ranges from 0 to 1.

    Background Color

    Used to set the background color to the Scroll View.

  • Object
    PARAMETER
    DESCRIPTION
    Xpos

    Sets the X position of the Scroll View.

    YPos

    Sets the Y position of the Scroll View.

    Width

    Sets the width of the Scroll View.

    Height

    Sets the height of the Scroll View.

    Object ID

    Sets unique identifier for the control. Control can be referenced with name set in this property for configuration.

    Object Parent ID

    Set "Object ID" of Scroll View which contains this control or can serve as parent.

    Key Name To Data

    Sets the web service key from data received from web server, which corresponds to the value to be displayed on the control.

  • Display/AdvanceText
    PARAMETER
    DESCRIPTION
    Content Size Width

    Sets the width of the Scroll View as per the size of the content.

    Content Size height

    Sets the height of the Scroll View as per the size of the content.

    contentOffset X

    The point at which the origin of the content view is offset from the origin of the scroll view in horizontal direction.

    contentOffset Y

    The point at which the origin of the content view is offset from the origin of the scroll view in vertical direction.

    Hide

    Hiding an element can be done by checking ‘Hide’. This property lets you hide the control.


    Advance - Sets auto resizing with respect to superview, for Scroll View.

  • Vertical
    PARAMETER
    DESCRIPTION
    Vertical Group

    Group of vertical android default properties.

    Reference Type

    These are the android default properties to set selected view with respect of other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginTop : Specifies extra space on the top side of this view. This space is outside this view's bounds.
    marginBottom : Specifies extra space on the bottom side of this view. This space is outside this view's bounds.

    Offset Value

    Value define the extra space value in pixel.

    Center Vertical

    This property centers the child vertically with respect to the bounds of its parent view.

    Apply Vertical Custom Properties

    If any of the vertical layout setting parameter(s) are selected then this value is selected to indicate user applied vertical custom layout setting parameter(s).

  • Horizontal
    PARAMETER
    DESCRIPTION
    Horizontal Group

    Group of horizontal android default properties.

    Reference Type

    Reference type is the the default property to set selected view with respect to other view.

    Reference Value

    Reference object that is used for positioning selected object.

    Offset Type

    marginLeft : Specifies extra space on the left side of this view. This space is outside this view's bounds.
    marginRight : Specifies extra space on the right side of this view. This space is outside this view's bounds.

    Offset Value

    Offset Value defines the extra space value in the pixel.

    Center Horizontal

    This property centers the child horizontally with respect to the bounds of its parent view.

    Apply Horizontal Custom Properties

    If any of the horizontal layout setting parameter(s) are selected then this value is selected to indicate user applied horizontal custom layout setting parameter(s).

  • Layout Setting
    PARAMETER
    DESCRIPTION
    Left

    The padding is expressed in pixels for the left, top, right and bottom parts of the view. Padding can be used to offset the content of the view by a specific amount of pixels.


    For instance, a Left value of 2 will push the view's content by 2 pixels to the right of the left edge.

    Bottom

    For instance, a Bottom value of 2 will push the view's content by 2 pixels to the top of the bottom edge.

    Horizontal

    Group of horizontal android default properties.

    Right

    For instance, a Right value of 2 will push the view's content by 2 pixels to the left of the right edge.

    Top

    For instance, a Top value of 2 will push the view's content by 2 pixels to the bottom of the top edge.

    Vertical

    Group of vertical android default properties.

    Apply Custom Properties

    If any of the layout setting parameter(s) are selected then this value is selected to indicate user applied custom layout setting parameter(s).

    Center In Parent

    This property centers the child vertically with respect to the bounds of its parent view.

    Layout Height

    Sets the height of the view
    match_parent/fill_parent : Takes the height as its parent view
    wrap_content : Takes the height as its content’s height

    Layout Width

    Sets the width of the view
    match_parent/fill_parent : Takes the width as its parent view
    wrap_content : Takes the width as its content’s width

    Default Min Height

    The height of the view cannot be less than the given value.
    If user select “Default Min Height” then android default value is taken otherwise it takes 0dp.

    Default Min Width

    The width of the view cannot be less than the given value.
    If user select “Default Min Width” then android default value is taken otherwise it takes 0dp.

  • Hidden
    PARAMETER
    DESCRIPTION
  • Advanced
    PARAMETER
    DESCRIPTION
    Clips Subviews

    A Boolean value that determines whether subviews are confined to the bounds of the control.

Actions

  • Load

    This event is triggered on load Scroll View. Hence any action can be defined [for eg: when a Scroll View loads like API Call to load data to be shown on cells] This can be configured in "LOAD" event listed under "Action(S)" tab of Scroll View control.

  • Scrolling ended

    This event is triggered when user ends scrolling scroll view.

  • Alert Button Click

    This event is triggered when user taps a button on alert view, which was shown using “Show Alert” action, so any actions you want perform when alert button button is tapped can be configured in “Alert Button Click” event listed in ”ACTION(S)” tab of the control on which you have configured “Show Alert” action or Under Data source events of "Data sources" tab (if alert was shown on using “Show Alert” action configured in "Datasource Loaded" event of a data source in "Data Sources" list, you can configure actions of alert button click in "Alert Button Click" listed under data source events). “seletedButtonIndex” and "selectedButtonTitle" are the response parameters which indicate which button is tapped by user. Add condition for checking value of “seletedButtonIndex” or "selectedButtonTitle" response parameter value in order to configure actions for each button of alert view separately. You can access user input in alert view text fields using "alert_text_1" and "alert_text_2" response parameters in case of alert type is "SecureTextInput", "PlainTextInput" or "LoginAndPasswordInput"

    Following are the response parameters for this event :-

    1) selectedButtonIndex :- Index of the tapped button

    2) selectedButtonTitle :- Title of the tapped button

    3) alert_text_1 :- Text entered by user in text field one. If alert type is
    "SecureTextInput", "PlainTextInput" or "LoginAndPasswordInput"

    4) alert_text_2 :- Text entered by user in text field two(password). If alert type is
    "LoginAndPasswordInput"

  • Single Finger Single Tap

    Fired when Scroll View is tapped once with a single finger.

  • Single Finger Double Tap

    Fired when Scroll View is tapped twice with a single finger.

  • Single Finger Triple Tap

    Fired when Scroll View is tapped thrice with a single finger.

  • Double Finger Single Tap

    Fired when Scroll View is tapped once with two fingers.

  • Double Finger Double Tap

    Fired when Scroll View is tapped twice with two fingers.

  • Double Finger Triple Tap

    Fired when Scroll View is tapped thrice with two fingers.

  • On Single Finger Swipe Left

    Fired when Scroll View is swiped left with single finger.

  • On Single Finger Swipe Right

    Fired when Scroll View is swiped right with single finger.

  • On Single Finger Swipe Up

    Fired when Scroll View is swiped up with single finger.

  • On Single Finger Swipe Down

    Fired when Scroll View is swiped down with single finger.

  • On Double Finger Swipe Left

    Fired when Scroll View is swiped left with two fingers.

  • On Double Finger Swipe Right

    Fired when Scroll View is swiped right with two fingers.

  • On Double Finger Swipe Up

    Fired when Scroll View is swiped up with two fingers.

  • On Double Finger Swipe Down

    Fired when Scroll View is swiped down with two fingers.

  • On Double Finger Pan

    Fired when Scroll View is panned (sweeped) with two fingers.

  • On Single Finger Long Press

    Fired when there is an elongated press on Scroll View with single finger.

  • On Double Finger Long Press

    Fired when there is an elongated press on Scroll View with two fingers.

Remarks

  • Content Size

    For scrollview to scroll in horizontal and(or) vertical direction, you need to set it’s “Content Size Width” and(or) “Content Size Width” properties greater than it’s “Width” and(or) “Height” properties respectively.

  • Alignment of controls one below the other in case of dynamic height(Enable Dynamic Height) subview’s in scrollview

    If controlA is dynamic height control and you want to align controlB below it vertically in scrollview, you need to configure “Change Object Properties” action selecting controlB from “Object Param” tree, “Frame” from “Property” dropdown, “Form Object” from “Source & Values” drop down and then select controlA from controls tree. Repeat same for controls below controlB in order.

  • Zooming View

    You can enable zooming of a view in scrollview when user pinches on it, by setting “Zooming View Id” property of Scroll View to that control.