2022/01/10

學會這招 FireMonkey 視覺佈局技巧讓你內力上升一甲子

A little bit about FireMonkey and Delphi XE2 | Andreano Lanusse |  Technology and Software Development

FireMonkey (FMX) 就 EMBT 的設計概念中是要解決跨平台的問題,那跨平台是要解決什麼問題?首當其衝的就是外觀設計了。

跨平台的外觀設計 = 跨螢幕解析度的處理

跨平台的視覺佈局簡單的說,就是要 APP 能在多款解析度的螢幕上都能正確顯示,不會有跑位、消失、需要手指八方滑動才能找到資料的額外行為。

跨平台問題核心 = VCL 和 FMX 外觀設計原理的不同

Delphi 最強大的 VCL 框架在外觀設計上完美的使用 Win32 API,造就了無數桌面應用程式,然而在其它系統上,VCL 外觀設計方法已經無法滿足在 MAC、iOS、Android 等多平台開發的需求,取而代之的就是 FMX,FMX 可以滿足多平台外觀設計的原因是它採用了外觀抽象化設計,FMX 獨有的外觀引擎作為讓外觀層和系統層橋接的媒介,以達到跨平台的目標。

基於上述兩大關鍵因素,使用 FMX 設計前,Eden 要先來梳理 FMX 的外觀容器,才不會在之後的設計上到處採雷,

 

TForm

 

FMX 應用程式唯一標準容器,一個應用程式應當就只有一個 TForm,應用程式裡所有可視元件都會在這唯一容器上顯示。

TPanel

可視的元件容器,當有多數視覺元件需要群組時可用此容器群組化元件;由繼承關係來看,它本身會受到視覺樣式的影響,主要是延襲 VCL 框架裡的 TPanel 元件,使原來的開發者能快速使用。

TLayout

「不」可視元件容器,當有多數視覺元件需要群組時可用此容器群組化元件,和 TPanel 不同,它本身是不可視的;由繼承關係來看,它比 TPanel 更為輕巧,且能控制其子元件顯示功能,值得一提的是它帶有【自動適應能力】,在跨裝置上能自動調整可視元件的顯示排列,所以  TLayout 比 TPanel 更具競爭力,TLayout 容器可說是 FMX 的靈魂也不為過,有興趣學習 FMX 應用程式開發的朋友請務必善用此元件。

TFrame

TFrame 容器由繼承關係來看,它與 TLayout 容器處在同一個位階上,兩者不同之處在:TLayout 負責群組化可視元件,TFrame 則是負責群組化 TLayout 和其程式邏輯,也可以說透過 TFrame 可以創作出重覆利用的視覺模組,可以讓更多應用程式使用它。

從熟悉 VCL 框架移轉到 FMX 時很是興奮,當時覺得行動平台的視覺開發上不能無腦延用 VCL 概念,如果相同就不用推新框架,而且在看過 Android、iOS 視覺設計的文件後,更加深對 FMX 理解的信念。

除了視覺元件差異外,FMX 還有值得一試的設計技巧:

自動適應能力

自動適應能力在 Web 上是一個非常成熟的技術,Web 上使用 CSS 來完成,在 FMX 設計上則善用 TLayout 元件,可以在每個不同解析度的螢幕上試試,你會發現另一片天空。

排版 (Layout)

和自動適應力能一樣,Web 使用 CSS 來完成,FMX 上僅需熟悉 [akLeft,akTop,akRight, akBottom] 即可,推薦你來玩看看。

元件綁定 (Data-Binding)

專案在原型階段時就可以把不可視物件和可視元件進行綁定,不用煩腦更新資料如何替換到可視介面,使我們更能專注在開發上,更重要的是當進入產品開發期則僅需替換資料庫元件就能立馬上線,想不炫技都很困難!

原生支援

FMX 為了跨平台,把各家平台許多原生 API 都封裝成好用的物件,目的就是讓你可以專注在 Delphi 程式開發,而不用在各家平台 API 手冊上奔走學習,不止節省開發時間,也更好地發揮應用程式效率,可以讓你的使用者滑得不亦樂乎!

 

總結

當然還有更多設計上神技巧,日後有學習到更多的技巧會再整理起來和各位分享。

還在觀望 Delphi  的發展性?現在 Delphi 推出了 Delphi Community Edition 社群版,現在免費提供給想加入 Delphi 開發行列的朋友,我也寫了幾篇關於 Delphi CE 的介紹,邀請你現在就搜尋看看。😉

 

See also

沒有留言:

張貼留言