[Delphi] FMXUI布局組件簡介


終於熬過了今年的最后一天班,哥們懷着興奮,下班了趕緊去放松了一下,再吃碗熱呼呼的牛肉面,回來洗個熱水澡,感覺太舒服了。

當然了,這么重要的日了,不能忘了寫篇文章,介紹下最近整的這個基礎UI庫,不能顧着自個兒舒服了,要讓大家也開開心心才對吧?哈,順便各位走過路過的滿天神佛拜個早年,祝大家新春快樂,恭喜發財!(好吧,我還想說:紅包拿來...)

 

好了,今天我們來介紹下FMXUI中的三大殺器:TView、TLinearLayout、TRelativeLayout。

 

名詞定義

非布局組件: 組件名不是以Layout結尾的組件,Delphi自帶的Panel、Form等在這里都不屬於布局組件。

視圖: 即可以讓用戶看到的圖形界面。TView本身就是一個視圖,任何基於TView的組件,也可以看作一個視圖。(當然,視圖不一定都可見,比如Visible為False時,或超出顯示區域時)

容器: 組件的父級組件。

 

一、 TView

在FMXUI中,TView是萬物之根本,所有的組件都會基於此。TView實現了IView接口,基於TControl類。同學們可以在任何組件上實現IView接口,以便接受布局控件的指揮。

 

【主要屬性說明】

(按字母順序排列):

AdjustViewBounds

  布爾型,是否允許根據MaxWidth, MaxHeight, MinWidth, MinHeight屬性來限制組件大小,默認為True。

Align

  組件相對於容器的對齊方式。當容器為非布局組件時有效,在部分布局組件中有效,但不建議使用。

Anchors

  組件在容器中的縮放和定位方式。當容器為非布局組件時有效。

Background

  視圖背景。視圖背景是一個TDrawable對象,可通過設置此屬性的子項,來實現不同的顯示效果,詳見TDrawable的屬性說明。

Clickable

  是否響應點擊事件。同HitTest屬性。默認為False。

ClipChildren

  是否剪切超出組件可視區域的圖形輸出。默認為True。設置為False時,顯示效果可能會超出你的設想。

Gravity

  組件本身作為容器時,內部的重力。也就是子組件的位於容器的位置。Gravity是枚舉型:

  • None, 默認位置,不自動調整
  • LeftTop, 左上角
  • LeftBottom, 左下角
  • RightTop, 右上角
  • RightBottom, 右下角
  • CenterVertical, 垂直居中(可左右移動)
  • CenterHorizontal, 水平居中(可上下移動)
  • CenterHBottom, 底部水平居中
  • CenterVRight, 靠右垂直居中
  • Center, 完全居中

HeightSize

  組件高度調節方式,WrapContent 默認,隨內容決定; FillParent,填充容器。一般在容器是TLinearLayout時有效。

Layout

  相對布局屬性。當容器是TRelativeLayout相對布局時有效。Layout是一個TViewLayout對象,詳請參考TViewLayout屬性說明。

Margin

  布局時與其它組件四周的距離。此屬性是一個字符串形式的浮點數,用於一次設置Margins的四邊為相同的大小。

Margins

  布局時與其它組件的距離。

MaxHeight、MaxWidth、MinHeight、MinWidth

  組件的最大高度、最大寬度、最小高度、最小寬度。當AdjustViewBounds為True時有效。

Opacity

  組件的透明度。

Padding

  組件內容留白大小。

Paddings

  組件內容四周留白大小。會自動設置Padding的四邊會相同的值。

ParentView

  容器視圖。當容器是實現了IViewGroup接口時存在。

ViewState

  視圖狀態。可同時包含一個或多個值:

  None {正常}, Pressed {已按下}, Focused {已取得焦點}, Hovered {已懸停}, Selected{已選中}, Checked{已復選}, Enabled{已禁用}, Activated{已激活}。

Weight

  視圖在線性布局時,基寬度或高度在容器中所占的大小比例。設為>0時,布局組件會按比例自動調整組件大小。只有容器是TLinearLayout時有效。

WidthSize

  組件寬度調節方式,WrapContent 默認,隨內容決定; FillParent,填充容器。一般在容器是TLinearLayout時有效。

 

【方法和函數】

SetBackground: 設置組件的默認背景。可以設置一個顏色、Drawable、漸變、圖像、刷子。

IsPressed: 是否按下。

IsHovered: 是否懸停。

IsActivated:是否激活。

二、 TLinearLayout 

 

故名思義,TLinearLayout就是線性布局組件。可以將內部的子組件按Orientation屬性的設置,水平或垂直的方式自動排列。

TLinearLayout還能根據子組件的Weight屬性按比例調整大小,比如子組件中有三個,Weight分別為1, 1, 2,那么這三個子組件大寬度或高度將分別為容器高度或寬度的25%、25%、50%。當使用了Weight時,WidthSize或HeightSize的效果將被忽略。

TLinearLayout在自動排列子控件時,還會按照Gravity重力屬性的設置,將子組件定位到不同的位置。

 

【主要屬性說明】

(按字母順序排列):

Orientation

  組件的布局方式。Horizontal,水平布局; Vertical,垂直布局。默認為Horizontal。

其它屬性參考TView。

 

三、TRelativeLayout

 

相對布局組件。將任何基於TView或實現IView接口的組件放入TRelativeLayout時,組件的Layout屬性就會變成可用狀態。你可以通過設置Lyaout的各個屬性值,來指定控件的定位方式。

在TRelativeLayout中,子組件在相對定位時,只能引用同一個容器中的其它組件。同時,相互引用時不允許產生循環,最大引用層數不超過256層。

在TRelativeLayout中,子組件的Weight屬性、Gravity重力屬性無效。

 

四、TDrawable

 

TDrawable本身是一個可繪制的對象。在Draw時,會根據所有者視圖的ViewState視圖狀態來決定顯示的效果。

 

【屬性說明】

XRadius、YRadius

  圓角大小。

Padding、Paddings

  繪圖時留白大小。

ItemDefault

  默認狀態時的顯示設置。

ItemPressed

  按下時的顯示設置。

ItemFocused

  獲取焦點后的顯示設置。

ItemHovered

  懸停時的顯示設置。

ItemSelected

  已經被選中時的顯示設置。

ItemChecked

  已經被復選時的顯示設置。

ItemEnabled

  無效時的顯示設置。

ItemActivated

  已激活時的顯示設置。

 

以上屬性中,ItemXXX屬性都是一個TViewBrush對象。TViewBrush基於TBrush。可以給它指定一個顏色、圖像、漸變等,通過更改Kind值來決定應用那一樣。

 

【方法和函數】

Draw: 繪制到指定Canvas中。

SetRadius: 指定圓角大小。

SetDrawable: 指定要應用的Drawable設置。

SetBrush: 給指定狀態設置一個刷子。

SetColor: 給指定狀態設置一個顏色。

SetGradient:給指定狀態設置一個漸變效果。

SetBitmap: 給指定狀態設置一個圖像。

 

五、TViewLayout

 

相對布局屬性。TRelativeLayout會根據此設置來調整子組件的位置和大小。

 

【屬性說明】

ToLeftOf

  位於指定組件的左邊。同時設置ToRightOf時會自動調整寬度。

ToRightOf

  位於指定組件的右邊。同時設置ToLeftOf時會自動調整寬度。

Above

  位於指定組件的上邊。同時設置Below時會自動調整高度。

Below

  位於指定組件的下邊。同時設置Above時會自動調整高度。

AlignBaseline

  與指定組件基線對齊。

AlignLeft

  與指定組件左對齊。

AlignTop

  與指定組件頂部對齊。

AlignRight

  與指定組件右對齊。

AlignBottom

  與指定組件底部對齊。

WidthSize, HeightSize

  組件大小調整方式。WrapContent,隨內容。FillParent,填充容器。

AlignParentLeft

  位於容器左邊。

AlignParentTop

  位於容器頂部。

AlignParentRight

  位於容器右邊。

AlignParentBottom

  位於容器底部。

CenterInParent

  位於容器中間。

CenterHorizontal

  在容器中水平居中。

CenterVertical

  在容器中垂直居中。

 

六、結束語

 

上面已經將常用類的一些屬性和方法、函數做了說明,本文也就快結束了。大家在使用時,可以靈活的用TLinearLayout、TRelativeLayout做嵌套,設計出想要的效果。還可以通過指定Background的圓角大小,整出帶圓角的視圖,還要學習通過設置Padding、Margins屬性來定位組件。最后希望大家都能設計出想要的界面效果,使用了FMXUI的同學,發現Bug時希望能通過QQ或留言的方式告訴我。

 

SVN:  https://github.com/yangyxd/FMXUI

本文首發: http://www.cnblogs.com/yangyxd/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM