List View

A “List View” displays any number of equal parts as a list. This list is scrollable and usually covers the entire screen. Single entries can be tapped optionally. A tap can be used, for example, to go from a news overview to a news detail page.

Of course, you can also configure the appearance of the List View.

appdoo - Elements - List View

Properties

To show the properties of the List View, click the Properties tab (the slider icon) in the upper right sidebar.

List View

appdoo - Elements - List View (List View)

  • Name
    Here you give the element a name. This name is only used within appdoo. For example, you can quickly see in the outline where each List View is located. You can also edit the name by double-clicking on the List View in the outline. We recommend that you assign unique names when working with Layout Constraints and Data Links.

  • Rows
    Here you specify the number of rows in the List View. This value is not used if you have activated the “Use Data Source” checkbox. If this is the case, the number of rows is determined dynamically by the content of the data source.

  • Use Data Source
    Activate this checkbox if the content of the List View comes from a data source (RSS 2.0 Feed, Atom Feed, JSON container, …).

    • Data Source List
      If the checkbox “Use Data Source” is activated, there is a list of the Data Sources of your screen below. Select a Data Source from this list by clicking on it. The selected entry is shown inverted.

    • New Data Source
      By clicking on this button, the possible types of a new Data Source are shown and you can create a corresponding new Data Source by clicking on a type. The following types are available:

      • Textual List
      • Atom Feed
      • CSV
      • JSON
      • RSS 2.0 Feed
      • Data Filter
    • Use a Navigation Target
      In addition to displaying values in the List View, you may also want to allow the user of your app to navigate further. For example, from a news overview (this List View) to a detail page. To realize this, the checkbox “Use a Navigation Target” must be activated. This will first ask you whether you want to use an existing screen as the target or whether you want a new screen to be created automatically. You will then be offered further settings. For example, you can change the selection for the target screen once again and also specify the effect with which the new screen is to be displayed.

      • Modal Presentation
        You can choose between different transitions for the transition from the current screen to the target screen:
        • None
        • Push from Bottom
        • Flip
        • Crossfade
  • Header Row
    Activate this checkbox if you want to insert another entry above the first entry. This entry is already slightly higher by default and independent of any Data Sources that may be used. In this “Header Row” you can add as many elements as you like like “Labels”, “Rectangles”, “Image Views” etc.. Simply drag the desired element from the list of elements to the entry “Header Row” of the outline.

  • Footer Row
    Activate this checkbox if you want to insert another entry above the last entry. This entry is already slightly higher by default and independent of any Data Sources that may be used. In this “Footer Row” you can add as many elements as you like like “Labels”, “Rectangles”, “Image Views” etc.. Simply drag the desired element from the list of elements to the entry “Footer Row” of the outline.

  • Background Color
    Here you define the background color of your List View.

  • Separator Color
    Here you specify the color of the lines between the entries of your List View.

    appdoo - Elements - List View (colors)

  • Allow Selection
    Activate this checkbox to allow the user of your app to tap on the rows of the “List View”. This is useful, for example, if you want to be able to switch to the next screen by tapping on a entry.

Separator Insets

appdoo - Elements - List View (Separator Insets)

  • Default
    Select this checkbox to use the default values (of the iOS version installed on the device) for the indentations.

  • Left
    Here you can specify how far the separator should be indented from the left.

  • Right
    Here you can specify how far the separator should be indented from the right.

Scroll Insets

appdoo - Elements - List View (Scroll Insets)

  • Above
    Here you can define the distance above the first entry.

    • Estimate
      This button is only important for you if you have a Navigation Bar on the screen on which your List View is located and have activated the checkbox “Translucent”. If this is the case, then the List View is below the Navigation Bar and the first entries would be hidden by it. This means that a margin must be inserted above the first entry to make it immediately visible when the screen appears. By clicking on the “Estimate” button, this distance is determined and entered in the “Above” field.
  • Beneath
    Here you can define the distance below the last entry.

    • Estimate
      This button is only important for you if you have a Tab Bar on the screen on which your List View is located and have activated the checkbox “Translucent”. If this is the case, the List View is under the Tab Bar and the last entries would be hidden by it. This means that a margin must be inserted below the last entry. By clicking on the “Estimate” button, this distance is determined and entered in the “Beneath” field.

Advanced

  • Hidden appdoo - Elements - List View is Hidden

    If you activate the “Hidden” checkbox, your List View will still be present on your work space, but will not be displayed. This can be useful, for example, if you only want to display the List View under certain circumstances. You can control this via the “Hidden” field in the “Data Links” area.

Geometry

All information about this area can be found on the separate Geometry page.

appdoo - Elements - List View - Geometry

The following properties of the element can be set using the data links:

  • Hidden
  • Selected Cell (0-Index)

All information about this area can be found on the separate Data Links page.

appdoo - Elements - List View - Data Links