先拖一个SkinImageList在窗体上，

取名为imglistPlayer,

添加如下6张图片:

再放一个ImageListViewer在窗体上，

Align设置为Top,Height设置为150,

然后把imglistPlayer设置给ImageListViewer.Properties.Picture.SkinImageList,

ImageListViewer.Properties.ImageListAnimated设置为True,

ImageListViewer.SelfOwnMaterial.DrawPictureParam.IsStretch设置为True,

效果如下:

接下来拖一个ButtonGroup在ImageListViewer中，

因为我们这次是6张图片，需要6个按钮的宽度，

我们把ButtonGroup的Height设置为20，

ButtonGroup.Properties.ButtonSize设置为了20，

表示每个按钮的宽度为20，

ButtonGroup.Properties.ButtonSizeCalcType设置为bsctFixed,

表示每个按钮的尺寸都统一，

Width设置为20*6=120，

并把它的Anchors属性设置为[akTop,akRight]，

让它适应不同尺寸的手机，

ImageListViewer绑定ButtonGroup之后，

会根据SkinImageList中的图片个数来创建按钮，

并且给自动创建的按钮设置点击事件，

点击上面的按钮自动切换到对应的图片，

 

接下来设置ButtonGroup上按钮的素材，

ButtonGroup中有三个类型的按钮素材，

FirstButtonMaterial:第一个按钮的素材，

MiddleButtonMaterial:中间按钮的素材，

LastButtonMaterial:最后一个按钮的素材，

按钮的默认素材在ButtonGroup.SelfOwnMaterial.MiddleButtonMaterial中设置，

MiddleButtonMaterial.IsTransparent设置为False，

MiddleButtonMaterial.BackColor.IsFill设置为True，

MiddleButtonMaterial.BackColor.IsRound设置为True，

MiddleButtonMaterial.BackColor.RoundWidth设置为10,

MiddleButtonMaterial.BackColor.RoundHeight设置为10,

如下图所示:

效果如下:

ImageListViewer每次切换图片的时候，

会把ButtonGroup上对应序号的Button的IsPushed属性设置为True,

来指示出当前显示的是第几张图片，

因此要设置ButtonGroup.MiddleButtonMaterial.BackColor.PushedEffect效果，

PushedEffect.EffectTypes中的drpetFillColorChange打勾，

PushedEffect.FillColor设置为黑色，

如下图所示:

效果如下：