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

下载安装了 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 来实现。