FMXUI中的三大杀器：TView、TLinearLayout、TRelativeLayout

好了，今天我们来介绍下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/

http://www.cnblogs.com/yangyxd/articles/5172352.html