appdoo (Mac) Documentation

Image View

With an Image View you have the possibility to display an image. The image can be located directly in the appdoo project or it can be loaded from a URL on the Internet.

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

Properties

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

Image 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 Image View is located. You can also edit the name by double-clicking on the Image View in the outline. We recommend that you assign unique names when working with Layout Constraints and Data Links.

• Source
  Here you can choose whether you want to select an image directly from your appdoo project (local) or download an image from a URL from the Internet (remote).

  If you have selected the “local” option from the selectbox, a multiline selection field with the images of your project is displayed below the selectbox. Select an image by clicking on the corresponding entry. The selected entry is shown inverted.

  If you have selected the option “remote” from the selectbox, a multiline input field “Image URL” is displayed below the selectbox. Here you enter the URL of the image. Make sure that the URL always starts with “http://” or “https://”.

  In both cases (local, remote) the following file formats are supported:

  • jpeg
  • png
  • gif
  • tiff
  • bmp
  • ico
  • xbm

• Scaling
  Here you can define how the selected image should be scaled within the Image View. You can choose between the following options:

  • center
    The option to position the image in the center of the Image View. Some portion of the image may be clipped to fill the Image View’s bounds.
  • scale to fill
    The option to scale the image to fit the size of the Image View by changing the aspect ratio of the image if necessary.
  • scale to aspect fit
    The option to scale the image to fit the size of the Image View by maintaining the aspect ratio. Any remaining area of the Image View’s bounds is transparent.
  • scale to aspect fill
    The option to scale the image to fill the size of the Image View. Some portion of the image may be clipped to fill the Image View’s bounds.

• Use Image for Highlighted State
  If the Image View is located in a row of a List View or a Cell of a Collection View, you may want to display another image (e.g. inverted) when touching the Row or Cell. To realize this, activate this checkbox. This enables you to define a second image for this case.

Advanced

• Corner Radius
  Here you define the corner radius of your Image View.

• Opacity
  Here you define the opacity of your Image View.

• Hidden

  If you activate the “Hidden” checkbox, your Image 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 Image View under certain circumstances. You can control this via the “Hidden” field in the “Data Links” area.

• Create Button
  If you want to give the user of your finished app the possibility to tap on the Image View, just click on the button “Create Button” and appdoo will automatically create a button from your Image View.

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

Geometry

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

Data Links

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

• Image URL
• Image Data
• highlighted
• Hidden

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