Horizontal Scroll Arrangement

  • Description

      Horizontal Scroll Arrangement

      The Horizontal Rolling Layout component allows us organize other components horizontally. That is, visually the components will be added side by side in our screen. This component is a format element in which it places the components that are They should show from left to right. If you want the components to show one over another, use Vertical Layout instead. Unlike the horizontal arrangement, this component is displaceable so the property horizontal alignment will have no effect.

      • If the property 'Height' is set to Automatic, the actual height of the disposition is determined by the highest component in the layout whose 'Height' property is not configured in 'Adapt to the father'.
      • If the property 'Height' is set to Automatic and only contains components whose 'Height' properties are configured as 'Adapt to the father', the actual height of the arrangement is calculated using the automatic heights of the components.
      • If the property 'Height' is set to Automatic and is empty, the height will be 100.
      • If the property 'Width' is set to Automatic, the actual width of the disposition is determined by the sum of the widths of the components.
      • If the property 'Width' is set to Automatic, any component whose 'Width' properties are set as primary parent is will behave as if they were set to Automatic.
      • If the property 'Width' is set to 'Adapt to the parent' or is specified in pixels, any component whose width properties are configured as 'Adapt to the father' will also occupy the width not occupied by others components.
  • Properties

    • Horizontal Aligment
    • Is given by a number that encodes how contents of the provision is aligned horizontally. The options are:
      • 1: Left-aligned.
      • 2: Aligned to the right.
      • 3: Horizontally centered.
      In this case, this property will not work since that is scrollable.
    • Vertical Alignment
    • is given by a number that encodes how contents of the available are lined up vertically. The options are:
      • 1: Aligned at the top.
      • 2: Aligned on the bottom.
      • 3: Centered vertically.
      The alignment has no effect if the height of the layout is automatic.
    • Background Color
    • Enables to put a color for the background to the Horizontal layout Enrrollable.
    • High
    • To set the height to the Horizontal layout.
    • Height percentage
    • To set the height in percentage to the Horizontal layout Enrrollable.
    • Width
    • To set the width to the Horizontal layout Enrrollable.
    • Width in percent
    • To set the width in percentage of the available Horizontal Enrrollable.
    • Image
    • To set an image to the Horizontal layout Enrrollable. If there is an image and a background color, you only see the image.
    • Visible
    • Specifies if the component should be visible, as well as its content in the screen. The value is true if the component is showing and false if it is hidden.
  • Example

    • Horizontal Layout with images
    • This example what we can do without using any type of block, though could be done using the blocks of properties. To do this we have created the following distribution.

    • On the screen we have added a horizontal layout Enrrollable that will be the one that organize the components of our screen. Within this we added 4 horizontal provisions, calls 'DH1', 'DH2', 'DH3' and 'DH4' and within each of them an image.
    • As you can see, now the components do not fit on the screen, but if the move from left to right, this moves allowing us to see the content.
      • In 'DH1' the color blue, we've set the property 'Alignment-Vertical' to 1 or up, that's why the image is located in the upper part.
      • 'DH2' the color pink, we've set the property 'Alignment-Vertical' to 2 or center, so the image is located in the center.
      • 'DH3' color orange, we have set the property 'Alignment-Vertical' to 3 or below, why the image is located at the bottom.
      • 'DH4' the color green, we've set the property 'Alignment-Vertical' to 1 or up, that's why the image is located in the upper part.