RSS订阅 | 匿名投稿
您的位置:网站首页 > FMX > 正文

FireMonkey 做 APP 的界面设计方法研究

作者:admin 来源: 日期:2019/4/8 11:33:38 人气: 标签:

下载安装了 Delphi 社区版 10.3 ,从它的 GetIt 下载了一个 Demo 程序。程序的名字叫做 ProfileForm。界面非常漂亮,有点惊艳的感觉。赶紧仔细研究一下它是怎么做出来的。先看图:



首先,这个 APP 是在一个 Frame 里面去做界面设计和控件的摆放。然后在主 Form 里面,放入这个 Frame。在主 Form 里放一个 TStyleBook 名为 JetStyleBook,指定主 Form 的 StyleBook 属性为 JetStyleBook,则整个界面的背景底色就是带质感的黑色。这个带质感的黑色,是 JetStyleBook 里面的一个黑色图片。

整个界面的最底部是一个 TVertScrollBox 作为托盘。这样当手机屏幕长度不同时,超出屏幕的部分,可以上下滑动。

这个界面最有特色的部分是顶部有背景图,背景图是模糊的,上面叠加了一些白色的文字。上面还有一个圆形头像,头像外面还有一个白色的圆圈。

1. Align 的 Content 方式:

按照 Delphi 常规的界面摆放方法,背景图充满整个空间,也就是其 Align 做成一个 Client 的摆放。然后其它控件摆放到这个背景图上,在背景图上进行布局。但这里的问题是,背景图使用了一个 Blur 控件让图片模糊掉。这样一来,摆放在背景图上的所有控件显示出来都是模糊的。

仔细观察后发现,屏幕顶部,分为三块:ToolBar1 置顶(Top),另外一个 TRectangle 置底(Bottom),中间一个 Layout 充满(Client)。这三个都重叠在背景图上,但他们不是摆放在背景图上,而是和背景图平级。通常这种摆放,会把背景图挤走。这里没有把背景图挤走,而是重叠在背景图上面,原因是,背景图的 Align 设置为 Content。这个 Content 是 FireMonkey 才有的。以前的 VCL 没有这个 Align 方式。

2. 背景图不是 TImage 而是 TRectangle:

只要设置 TRectangle 的 Fill.Kind 为 Bitmap,然后为它的 Bitmap 指定图片,它就显示图片了。

3. 底部的 TRectangle 的用意:

底部放了一些白色的数字文字,叠加在底部的 TRectangle 上面。这个 TRectangle 是用来将背景图加深颜色,使得白色文字能更好显示。用 TRectangle 来加深颜色的方式是,将其 Fill.Color 设置为 #19000000,也就是其颜色值为0,其透明值为 19,而不是 255.。如果是 255 则不透明。这种半透明的设置,使得它加深了它背后的背景图,能够更好突出白色文字。

4. 圆圈头像:

4.1. 在中间处于 Client 摆放方式的 Layout 上面,摆放了一个 Align 为 Bottom 的 TText 用来显示人名。

4.2. 在上述 Layout 上面,摆放一个 TCircle ,其 Align 设置为 Client,因为底部有一个 TText,因此它占据背景画面的上半部分,又在 TToolBar 的下面。这个 TCircle 用来显示头像外围的白色圆圈。因此设置其 Fill.Kind 为 None,则它中心没颜色,直接透明。设置它的 Stroke 的颜色为白色,Thickness 为 2,也就是圆圈边框线条的粗细为2。这样就有一个白色的圆圈。

4.2. 在上述 TCircle 上面,摆放一个 TCircle,这个 TCircle 的 Fill.Kind 设置为 Bitmap,加载头像进去。头像图片在里面显示为一个圆形的图片。重点:这个 TCircle 的 Margin 需要设置为 4.这样才能不覆盖它下面的白色圆圈的 TCircle,这样白色圆圈才能显示出来。

5. 抬头的按钮:

顶头上 ToolBar 上面摆了一个按钮。这个按钮直接就是一个 TImage。这个 TImage 加载了多个不同分辨率的图片。分辨率分别是:

  72 X 72
  96 X 96
  144 X 144
  192 X 192

 

总结:

1. FireMonkey 里面,控件 Align 属性的 Content 方式,即可以充满整个空间,又可以不被其它设置为 Top, Bottom, Client 的平级控件挤走,而是重叠在上面,但又不是从属于它。

2. 图片显示可以不用 TImage 而是用 TRectangle。

3. 半透明,可以用 TRectangle 的 Fill.Color 设置其 TAlphaColor 的透明度部分的数值,并把所有颜色值设置为 0.

4. 整个界面背景,用 StyleBook 来实现。
--------------------- 
作者:pcplayer 
来源:CSDN 
原文:https://blog.csdn.net/pcplayer/article/details/84851258 
版权声明:本文为博主原创文章,转载请附上博文链接!

读完这篇文章后,您心情如何?
0
0
0
0
0
0
0
0
本文网址: