The Dali::Toolkit::ImageView is a control which displays an image. It’s a common use is for showing an ImageVisual.

In this tutorial the following subjects are covered:

• Basic creation and usage
• Creation and usage with Visuals
• ImageView Properties

Basic creation and usage

A basic instance of an ImageView is created with a file path:

If the filename is to a Nine Path, GIF, SVG or regular image, then the respective Visual will be created and used.

ImageView imageView = ImageView::New("./images/image_view.svg");

Creation and usage with Visuals

To have full control over the Visual and what ImageView displays a Visual, Property::Map should be used.

Below example uses the image and forces ATLASING off. Each Visual has it’s own Properties which can be set.

auto imageView = ImageView:New();

imageView.SetProperty( ImageView::Property::IMAGE,
                       Property::Map().Add( ImageVisual::Property::URL, "./images/apple.svg" )
                                      .Add( ImageVisual::Property::ATLASING, false  ) );

To subsequently change a visual, then set the IMAGE property a new visual property map.

imageView.SetProperty( ImageView::Property::IMAGE,
                       Property::Map().Add( ImageVisual::Property::URL, "./images/house.png" )
                                      .Add( ImageVisual::Property::ATLASING, false  ) );

imageView.SetParentOrigin( ParentOrigin::CENTER );
imageView.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::ALL_DIMENSIONS );

This image is displayed via an ImageView:

ImageView Properties

ImageView has the following properties: