flex4 为垂直滚动条VScrollBar换肤

为垂直滚动条换肤是一件比较麻烦的事情。且让我们一步一步来实现。

首先,由于它只是Scroller的一部分,要直接给它设置样式需要在css文件里这样写:


s|Scroller s|VScrollBar
{
skinClass:ClassReference("com.views.skins.VScrollBarSkin");
fixedThumbSize:true;
}

这里设置fixedThumbSize为true是因为滑块使用了一个固定的图片,如果false会导致内部计算错误。

然后,我们看下皮肤具体应该怎么写,首先打开spark.skins.spark.VScrollBarSkin(可以用打开类型快捷键ctrl+shift+t,输入VScrollBarSkin)


<!--- The default skin class is VScrollBarTrackSkin.
@copy spark.components.supportClasses.TrackBase#track
@see spark.skins.spark.VScrollBarTrackSkin -->
<s:Button id="track" top="16" bottom="15" height="54"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.VScrollBarTrackSkin" />

<!--- The default skin class is VScrollBarThumbSkin.
@copy spark.components.supportClasses.TrackBase#thumb
@see spark.skins.spark.VScrollBarThumbSkin -->
<s:Button id="thumb"
focusEnabled="false" visible.inactive="false" tabEnabled="false"
skinClass="spark.skins.spark.VScrollBarThumbSkin" />

<!--- The default skin class is ScrollBarUpButtonSkin.
@copy spark.components.supportClasses.ScrollBarBase#decrementButton
@see spark.skins.spark.ScrollBarUpButtonSkin -->
<s:Button id="decrementButton" top="0" enabled.inactive="false"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.ScrollBarUpButtonSkin" />

<!--- The default skin class is ScrollBarDownButtonSkin.
@copy spark.components.supportClasses.ScrollBarBase#incrementButton
@see spark.skins.spark.ScrollBarDownButtonSkin -->
<s:Button id="incrementButton" bottom="0" enabled.inactive="false"
focusEnabled="false" tabEnabled="false"
skinClass="spark.skins.spark.ScrollBarDownButtonSkin" />


上面这是直接从VScrollBarSkin复制出来的。看起来很简单,不是吗,就是4个按钮,分别代表向上向下以及滑块与滑轨。而实际上我们需要改的就是这4个按钮的皮肤。

接下来就简单了,分别书写相应的按钮皮肤,并用它们替换掉默认的按钮皮肤即可。

[b]需要注意的是要给皮肤里的各部分设置宽高![/b]
具体的皮肤文件可以参考附件
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值