Swipe Container in TouchGFX is a Widget that consists of multiple pages, which can be accessed by swiping between them. The pages in the
Swipe Container can contain other widgets, similar to the
This article describes how to use the
Swipe Container in the designer, by showing how to create pages, determine the behavior for swiping between the pages and how to add widgets to a page.
Swipe Container is located under Containers in the TouchGFX Designer.
- Containers and Custom Containers explains how to create and add content to both
|Pages||Set the start page, which is also the visible page, and create new pages by clicking on .|
|Page Indicator||Sets up the use of page indicators, their position and the images for the page indicators.|
|Swipe Settings||Set the
Working with the
Swipe Container can be split into two parts, configuring the
Swipe Container, and working with content in a
Configuring the Swipe Container
After selecting the
Swipe Container, the location property listed in table 1 is used to determine where on the canvas the
Swipe Container is positioned by setting
Y. The size is set by setting
W (width) and
An example of setting the location for the
Swipe Container. In this case, the
Swipe Container is set to fill the entire canvas of a 480x272 screen.
After setting the location of the
Swipe Container, adding page indicators is done by checking the Show page indicator box. Similar to setting the position of the
Swipe Container, the position of the page indicators selected by setting
Y or let the TouchGFX Designer center the page indicator, by selecting Center horizontal, letting
X be set automatically.
The images for the page indicators consist of two different images, a Highlighted image which represents the selected page, and a Normal image which represents the unselected pages. Selecting the images can either be done by selecting a Style, which contains the wanted images. The two images can also be selected individually from either the images that come with the TouchGFX Designer or imported images.
An example of the configuring the page indicators and their appearance look in a running application containing a
To determine when to switch between pages and how the swipe container should act when swiping beyond the first and last page, the two swipe settings "Swipe Threshold" and "End swipe elastic width" is used. Swipe threshold determines when a page has been swiped enough to move to the adjacent page. The picture below shows two screens both with a
Swipe Container. The Swipe threshold in both cases is set 100, marked with the green line, meaning that the adjacent screen has moved 100 pixels into the view before a page changed is initiated and the page is changed. In the screen to the left are the red page swiped into view, but since it has not crossed the green line, the page will animate back and the blue page is still the visible page.
In the screen to the right, the red page being swiped into view from the left again, but in this case the red page has crossed the green line and will, animate into view, resulting in the red page being the visible page.
Two examples of a
Swipe Contaier where the one to the left has not crossed the Swipe Threshold (it will swipe the current page back into place) and the one one the right has crossed the border (it will swipe to the new page).
The "End swipe elastic width" determine how far the
Swipe Container can move when it is at the first or last page and it is being swiped in a direction where there is no pages is adjacent, thus showing the elements behind the
In the picture below an example of a
Swipe Container with End swipe elastic set 50 is dragged to the left when at the rightmost page, thereby revealing a green background.
An example of a
Swipe Container with End swipe elastic set to 50 and is drag, togehter with the TouchGFX Designer option setting the Swipe Settings.
Working with content in the Swipe Container
Adding a page to the
Swipe Container is done by using the plus icon under the Pages section in the
Swipe Container menu. When a page is added to the
Swipe Container the page wil show up in the drop-down menu below Selected page. The drop-down menu shows which pages are in the
Swipe Container and their order. The top page is the left most page in the
Swipe Container. The page which is visible when the drop-down menu is collapsed is the Selected page, meaning that it is the page that is visible when editing it with the TouchGFX Designer. When a new page is added, it automatically becomes the selected page. Other than being the visible page in the TouchGFX Designer, the Selected page is also the start page when a
Swipe Container is initialized in a running applicaiton.
The Pages section, showing the add page and the drop-down menu with three pages where swipeContainer1Page3 is the Selected page.
Pages in the
Swipe Container has the same nature as a
Container; adding, interacting and removing widgets for a
Swipe Container, behaves the same way as an
Container. Adding is done by dropping widgets into the pages in the tree view. Changing the order of pages is done in tree view by dragging the pages within the
Swipe Container. The order for the pages in the tree view, is opposite the order in the Selected page menu, meaning that the top page, in the tree view, is the rightmost page in the
Application tree view containing a
Swipe Container widget with three pages. Each page contains a
Box With Border widget.
- A Page is similar to a
Container, dragging a
Swipe Containerin the tree view vill add the
Containeras a page. The
Containerwil be resized to match the
- A page from the Swipe
Containercan be dragged into the tree view and will convert it to a