OrangeUI

在这里,我先讲一下FMX自带的圆角矩形控件TRoundRect,
圆形头像效果其实可以用TRoundRect来实现,
比如我放一个TRoundRect到窗体上,

设置它的Fill.KindBitmap,
Fill.Bitmap.Bitmap设置为,
Fill.Bitmap.WrapMode设置为TileStretch,

效果如下:

它也能实现图片剪裁成圆形的效果,
因此,在普通情况下,
完全可以不使用RoundImage,
而选择使用TRoundRect.
 
那为什么我们还需要一个RoundImage控件?
比如我要让OrangeUIListBox中每个列表项的图标都要有剪裁成圆形的效果,
如下图所示:

如果我在ItemDesignerPanel上面放一个RoundRect,
RoundRect只能把列表项的图标加载给Fill.Bitmap,
而不能把列表项图标的引用赋值给Fill.Bitmap,
所以这种情况下,ListBox每绘制一个列表项,
都需要把列表项的图标加载给RoundRect.Fill.Bitmap,
代码为:RoundRect.Fill.Bitmap.Bitmap.Assign(Item.Icon),
这个过程会十分的耗时,
 
为了能直接使用列表项图标的引用,
我们就需要使用RoundImage了,
代码为:RoundImage.Properties.Picture.RefPicture:=Item.Icon,
所以,使用RoundImage十分的高效.
 
 
接下来,我给大家演示一下如何在ListBox中使用RoundImage,
先准备好这样一个ListBox,
拖一个RoundImageItemDesignerPanel上面,

我们需要使每个列表项的头像有剪裁成圆形的效果,
只需要设置RoundImageDrawRoundOutSideRectParam
DrawRoundOutSideRectParam.FillColor设置为白色,
DrawRoundOutSideRectParam.IsFill设置为True,
好了,效果就出来了:

头像看起来像是被剪裁成圆形的了,
再运行一下看下效果:

用鼠标点击第二个列表项,
发现列表项的背景颜色变为了灰色,
而头像的四个角仍旧为白色:

我们需要设置RoundImage的点击效果,
使RoundImage在点击的情况下颜色变为灰色,
SelfOwnMaterial.DrawRoundOutSideRectParam.DrawEffectSetting.MouseDownEffect中设置:
勾选EffectTypes中的drpetFillColorChange,
FillColor设置为LightGray,

接下来我们再运行一下,
点击第二个列表项看一下效果: