[翻译] TouchGFX中滑屏设计控件SwipeContainer的使用
3636 查看
4 回复
 楼主 | 发布于 2019-10-29 | 只看楼主
分享到:

Swipe Container TouchGFX中的A  是由多个页面组成的小部件,可通过在它们之间滑动来访问它们。中的页面Swipe Container 可以包含其他小部件,类似于  Container小部件。

本文Swipe Container 通过显示如何创建页面,确定页面之间的滑动行为以及如何向页面添加窗口小部件,介绍了如何在设计器中使用  

在  Swipe Container 位于下容器在TouchGFX设计。

  • 容器和自定义容器  说明如何创建并添加内容到两个  Container 及  Custom Container

重要特性

位置 设置xywidthheightvisible的性能Swipe Container
页数 设置起始页面(也是可见页面),然后通过单击来创建新页面plus_back.png
页面指示器 设置页面指示器的使用,它们的位置以及页面指示器的图像。
滑动设置 设置Swipethreshold,即更改页面前必须滑动End swipe elastic width的距离,以及,设置可以将第一页和最后一页滑动到Swipe Container边框之外的距离。

表格1。

 

用法

使用  Swipe Container 可以分为两个部分:配置  Swipe Container和中的内容  Swipe Container

 

配置滑动容器

选择之后  Swipe Container,表1中列出的location属性用于Swipe Container 通过设置X 和  来确定画布在画布上的  位置  Y通过设置W (宽度)和H (高度)来设置  尺寸  

为设置位置的示例Swipe Container在这种情况下,将Swipe Container设置为填充480x272屏幕的整个画布。

设置的位置后Swipe Container,通过选中显示页面指示器框来完成添加页面指示器。类似于设置  Swipe Container, 页面指示器位置的位置,方法是设置  X 和/  Y 或让TouchGFX Designer将页面指示器居中,方法是选择“水平居中”,然后  X 自动进行设置。

页面指示符的图像由两个不同的图像组成,分别是代表所选页面的突出显示图像和代表未选择页面的普通图像。选择图像可以通过选择包含所需图像的样式来完成。也可以从TouchGFX Designer随附的图像或导入的图像中分别选择两个图像。 

PageIndicator.png

配置页面指示器及其外观的示例在正在运行的包含的应用程序中显示  Swipe Container

为了确定何时在页面之间切换以及在滑动超过第一页和最后一页时滑动容器应如何操作,使用了两个滑动设置“滑动阈值”“结束滑动弹性宽度”滑动阈值确定何时已足够滑动页面以移至相邻页面。下图显示了两个屏幕,每个屏幕都有一个  Swipe Container在这两种情况下,“滑动阈值”都设置为100,并用绿线标记,这意味着在启动页面更改和页面更改之前,相邻屏幕已将100像素移动到视图中。在左侧的屏幕中,红色页面被滑动到了视图中,但是由于它没有越过绿线,因此页面将向后移动,而蓝色页面仍然是可见页面。

在右侧的屏幕中,红页再次从左侧滑入视图,但是在这种情况下,红页越过绿线,并且会变成动画,从而使红页成为可见页。

SwipeThreshold.png

两个示例,Swipe Contaier其中左侧的一个未超过“滑动阈值”(它将把当前页面重新滑动到适当的位置),右侧的一个示例  已经越过边界(它将滑动到新页面)。

“结束滑动弹性宽度”确定多远Swipe Container,当它处于第一页或最后一页可以移动,它是在不存在页的方向上进行刷卡是相邻的,因此显示出后面的元件  Swipe Container

在下面的图片中,Swipe Container 使用“末端滑动” 的示例  在最右边的页面上将弹性组50拖到左侧,从而显示绿色背景。

ElasticEnd.bmp

将“  Swipe Container 末端滑动弹性”设置为50并拖动的示例,使用TouchGFX Designer选项设置“滑动设置”进行拖动。

使用滑动容器中的内容

Swipe Container 使用Swipe Container 菜单中“页面”部分下的加号图标可将页面添加到  中  将页面添加到Swipe Container 页面后,  该页面将显示在“选定页面”下方的下拉菜单中。下拉菜单显示Swipe Container 按顺序排列的页面  第一页是中最左侧的页面  Swipe Container折叠下拉菜单时可见的页面是“选定”页面,这意味着它是使用TouchGFX Designer编辑该页面时可见的页面。添加新页面后,它将自动成为所选页面。除了在TouchGFX Designer中的可见页面之外,Swipe Container 在运行的应用程序中初始化a 时,“选定页面”也是起始页面  

Pages.png

Pages部分,显示添加页面  plus_back.png和包含三个页面的下拉菜单,其中swipeContainer1Page3是Selected页面。

中的页面Swipe Container 具有与相同的性质  Container为添加,交互和删除Widget的Swipe Container行为与相同  Container通过将小部件拖放到树形视图的页面中来完成添加。通过在树形视图中拖动页面来更改页面顺序  Swipe Container树形视图中页面的顺序与“选定页面”菜单中的顺序相反,这意味着树形视图中的首页是的最右边页面Swipe Container

TreeView.png

应用程序树形视图,其中包含一个Swipe Container 具有三个页面小部件。每个页面包含一个  Box With Border 小部件。

(0 ) (0 )

嵌入式学习 嵌入式开发

回复 举报

楼主 | 回复于 2019-10-29 沙发

(0 )
评论 (0) 举报

回复于 2019-10-29 2#

楼主,你头像好萌
(0 )
评论 (1) 举报

回复于 2019-10-29 3#

支持分享
(0 )
评论 (0) 举报

回复于 2020-04-06 4#

感谢分享
(0 )
评论 (0) 举报
  • 发表回复
    0/3000





    举报

    请选择举报类别

    • 广告垃圾
    • 违规内容
    • 恶意灌水
    • 重复发帖

    全部板块

    返回顶部