This group of properties is under the Theme for Smart Devices classes (see Scope) to provide the end user with a UI/UX improvement called Motion Effect, closely related with Parallax Effect. This effect is a result of the multilayered design incorporated in iOS 7 UI, affecting the appearance of the interface when the end user device is tilted horizontally and vertically, giving the impression of depth and movement.
For developers, the properties under this group allow easily incorporating this impressive effect in the application.
|Max Horizontal Offset
||It indicates the maximum offset that the control can reach when the end user tilts his device horizontally (left to right or right to left). It can be interpreted as a factor of movement - higher values imply more movement.
|Max Vertical Offset
||Likewise, when the end user tilts his device vertically (front to back or back to front).
Both properties accept integer values, allowing for smooth movements of the control layer and its container layer.
Depending on the effect that you want to achieve, its value can be in one of the three categories listed below.
- Negative value: It makes the control move in the opposite direction to the movement of the physical device.
- Zero value (0): No effect (default value)
- Positive value: It makes the control move in the same direction to the movement of the physical device.
In EventDay, suppose we want to apply this UI/UX feature to each speaker picture on the list.
First, open the List section of the WorkWithDevicesSpeaker object.
Since the aim is to have a moving image, it should be embedded in a Canvas control, expanded beyond the edge limits and filled when the picture moves.
So, the layout could be designed as follows:
The details of this decision are listed below.
- TableImageSpeaker class makes the Canvas rounded, setting Border Radius with an appropriate value.
- The Absolute Position properties of the Canvas image make it expanded and centered.
- ImageSpeakerMotion class makes the image keep its aspect and adds the motion effect setting both offsets.
Just by setting a few properties, the runtime behavior will be as shown below.
- Only supported in iOS 7 or higher.
- If the tiled control is embedded in a Table control or Canvas control ensure to set Border Radius property (whose value could be 1 or higher, depending on your requirements). These settings will avoid the control scapes from its limits when motion effect is applied (e.g. a tiled image inside a canvas as it is shown in the Usage Example section).
Theme class: Image, Table, Calendar, Group
Generators: Smart Device (iOS)
This property is available as from GeneXus 15