查看: 5456|回复: 1

TouchGFX Designer 控件汇总

[复制链接]

658

主题

659

帖子

2079

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2079
发表于 2019-11-22 10:02:39 | 显示全部楼层 |阅读模式
前言
: X9 h# u5 O( l6 X6 Y" Y  X2 y本文介绍的控件是基于TouchGFX Designer 4.10.3版本的汇总。基本上可分为七大类:按钮类,图片类,文本类,容器类,滑块类,进度条类,基础图形类。
  u% Q6 Q6 J" T& \0 v) G
1 _* u0 o; d: e- ~9 L
$ ]8 o) p- I8 ~6 D" b01:按钮类 (BUTTONS)
7 A5 f, M2 c3 h7 N6 q: A. v  v( r' h* B7 x* r8 c
) R: U5 [) k1 c6 k" c# C3 Q5 i9 x
TouchGFX中的按钮控件可以获取触摸事件,并在按钮释放时发送回调。按下/释放按钮的每个状态都与一张图片相关联。, L. B, i3 X; x) A: R

6 D, S* k6 v2 x& m1 o7 L/ P按钮类可以细化成七种小控件,分别是:
2 i& J4 [: v' c6 t0 `% a1 A
; i" l7 Y. X# ^  P1. 普通按钮控件(Button)
& d7 s7 D: K5 h, f/ R# i+ ~  J5 h2. 带文字按钮控件(Button With Label)) z" V/ v  }# q/ J. [1 J7 x
3. 带图标按钮控件(Button With Icon)2 u. z' u$ J: A' W
4. 开关按钮控件(Toggle Button)
3 I- [8 C/ g) P5 \5 ?3 U: a2 x4 f5. 单选按钮控件(Radio Button)
: S. \3 i. n+ C) ~- a6. 重复按钮控件(Repeat Button,在一定时间内需要按下按钮,如果不按就会触发一个事件)
( j+ G* l; W4 V$ B: P- D7. 自定义按钮控件(Flex Button,一种灵活通用的按钮控件)
# N1 n, C/ M- _# r
8 G" Q7 C) z* W2 e8 o  X% p( ]9 L# m5 r9 f5 ^6 P
02:图片类 (IMAGES)
$ |. Q4 J3 N! w2 T
7 F: V3 B4 j+ Y* t$ j  z; `) i3 l' y* I3 ]
: o6 i8 e' L: M$ O: z8 a
使用TouchGFX Designer会大量使用到图片类控件,如我们之前的基础教程中插入Screen背景、添加滚动菜单的item图标等都用到了图片控件。图片类可以细化成四种控件,分别是:
# J+ c" z# @: U" X
: a% X/ T4 o; B  ~* @  ^4 e1. 普通位图控件(Image)
- V& n; F% F" z" E$ |& b2. 可缩放位图控件(Scalable Image)4 K( w0 b7 D, d( Y$ K
3. 平铺位图控件(Tiled Image)
& x+ q1 d  T8 j; O) v  a! r& U4. 动画控件(Animated Image)
$ U% A* Z/ [: |( Z0 t& ^2 C, z3 j0 d9 R% X4 m8 C8 s' O' z
9 H4 b' U7 y" Q
03:文本类 (TEXT)
# m, }5 b) b; T  E$ y7 k+ C; J( p+ Z+ @7 o9 w9 A/ L

( C- U9 `  e& D2 H& A( t% k5 l6 V7 h4 l" M9 f0 B% j, r2 l: H
文本类只有一个显示文字的控件。文本和字体是现代图形用户界面的一个非常重要的元素。一个应用程序支持的所有语言应该能够显示高质量的反锯齿文本和字体,这一点很重要。
4 ]" }' P) x0 ?* U$ O; G; D9 b  O+ v- u# b! b" V9 w
TouchGFX通过文本数据库,字体文件,字体转换器和文本转换器工具来支持此功能。
7 V7 _6 D% d) b  ?
% n% z' x! @2 C/ b# ^- E6 o& P4 f$ Z# S, w# [' ?/ s0 d3 ?' Q
04:容器类 (CONTAINERS)
+ C: A# y0 `7 g* \' Y! K9 J( o+ U, J, w
% g& s$ N5 _6 F# U

1 W4 j) f5 u! [( L我们在TouchGFX基础教程(四):自定义滚轮控件中介绍了如何使用TouchGFX Designer创建滚轮容器。容器本身是一个控件,可以组合多个不同类型的控件并在其中添加特定的操作,实现多样化功能和效果,让我们的GUI看起来更有设计感。" \+ [( q( N3 L
; U% S- @  q/ }5 L
容器类可以细化成七种控件,分别是:; L0 ?- B7 r* j: c  n1 l: {

- l( k1 S8 e5 O. L9 u1. 容器控件(Container,一种通用容器控件)  D/ Q/ j# X0 {, r2 j) V
2. 滚动容器控件(Scrollable Container)
& v7 z4 {, ]( ]4 [! g# L" U3. 滑动容器控件(Swipe Container)3 l2 x) P3 l* D) B" f% l: N; I4 T
4. 滑动列表控件(List Layout)
$ ^) B( E  A$ U3 N& U0 U5. 窗口控件控件(Modal Window)
, }  {1 i8 ]3 w$ F  e6. 滚动列表控件(Scroll List)
) Y& L/ ^1 Z; _/ y# o$ X7. 滚轮容器控件(Scroll Wheel,在滚动列表基础上带有选择高亮和滚动条)7 w- v$ B; @, X8 K' x

: `" S- n; i+ a  c0 Y, N& U: i2 z9 V) A8 _3 H
05:滑块类 (SLIDER)0 l6 ~/ H# H8 M0 l7 n, R

2 m4 ^; s& j. K4 z6 j8 Z) Q  z9 \3 d/ q/ T+ Z, P" x

& Q" L1 J) U% o! o  \) }滑块是一个可以拖拽的控件。它是一种图形元素,用户可以通过移动指示器或单击滑块来设置值的范围。1 A$ {! x9 b! w0 l. U
. L) f8 T" }% r3 i4 a
滑块可以沿水平或垂直方向移动,它有两个位图,当滑块移动到指示器一侧时使用一个位图,移动到指示器另一侧使用另一张位图。
! P  M! ^: w5 n9 B; O3 u$ |! Q8 |. o( h8 j1 w2 @
; N4 u. g7 k7 Q: a+ t- c
06:进度条类 (PROGRESS INDICATORS)
2 D* u  B4 {' t3 g/ {2 P, A3 z
: n/ O) _  B2 `0 h5 _7 D# p1 {
% V. ~# b0 {2 f8 D: Z
  P& c. h2 N3 T& Q进度条是指以图片形式显示处理任务的速度、完成度、剩余未完成任务量的大小和可能需要处理时间,是实时显示的。9 j6 B6 ]% X! J0 [3 d5 Y2 P- g& z4 {
9 I: t. n) s$ v8 f& s; j% E
进度条类可以细化成五种控件,分别是:- Z& f$ f% v7 e* @, F' }

8 g8 H0 X) H' T& N1. 直方进度条控件(Box Progress,一种颜色)
2 m8 w3 \8 I* Z4 a' h% p. {, k2. 图片进度条控件(Image Progress,图片)
! U. D( f2 j4 p% G$ H4 s" c3. 文本进度条控件(Text Progress)
2 G. A1 D6 ^7 ~6 v2 {4. 线条进度条控件(Line Progress,一种颜色)
5 E6 L7 O. ]/ Y4 V5. 圆周进度条控件(Circle Progress一种颜色或者图片)
$ I/ u. {8 @' u2 j) `( T; h# u  c; f3 p" @
比如在智能手表界面中,我们预先设置了目标步数,那么就可以使用进度条来记录当前走的步数,以更加直观的形式表达目标完成的情况。) k7 M7 ^! P& _7 j( b

3 L  c% V9 U  I5 P( f5 ~- {
5 g* E- G, K/ q07:基础图形类(SHAPES)' d% ~. J* s. d3 ?) `

6 l8 E5 P. j+ d8 n  ]- f: i
' v* a4 N7 X6 |& m0 w8 u
% _+ S* `  o+ W& |& |基础图形类控件可以简单理解为几何图形控件,包括矩形、线条、圆等。
1 x' \5 C& Q1 c' B# l- M$ t7 e7 W/ [5 I! [# b5 b& r- [) j
这类控件可以细化成四种控件,分别是:
( t4 J# @& i9 F9 L0 W7 V# B; k1 V2 Y/ _0 |+ S
1. 直方色块(BOX,一种颜色)& z5 S% M% T/ ]( b3 F. ~8 Y
2. 带边框的直方色块(Box With Border,边框也可以设置颜色)
% v6 l7 S  f6 u' x3. 线条(Line,一种颜色)
& H7 O* ?3 G4 ^3 i1 q# p! z4. 圆(Circle,一种颜色); E+ y2 |7 E& _) q
5 Y! i. R5 R+ y% c% `: }

& p9 ~" [! D3 \0 H; Y( Z" A关于TouchGFX Designer的控件,今天就汇总到这里。在未来的推送中,我们时不时会涉及到某些具体控件的使用。大家是不是已经迫不及待想要运用这些控件了呢~快去下载TouchGFX来练练手吧!
8 ~& `1 W) p% x! h: E% k+ ?
) B8 h9 [7 _. l1 j( J/ J/ ~/ f

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

0

主题

2

帖子

12

积分

新手上路

Rank: 1

积分
12
发表于 2019-12-19 14:46:39 | 显示全部楼层
本帖最后由 Toby 于 2019-12-19 14:50 编辑 " \  b6 z0 f8 y0 J/ w

  V: K0 u1 r6 a6 c, fGood Jobs Expect more features
" d1 ^/ b9 O) Y# g
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

保留所有权利 @ 2019 TouchGFX 使用条款 | 销售条款和条件 | 隐私政策 | Cookies管理 | 行使您的权利 | 沪ICP备18033411号-2

快速回复 返回顶部 返回列表