为自定义 UISlider 旋钮图像添加阴影？

Posted 2023-03-13

【中文标题】为自定义 UISlider 旋钮图像添加阴影？

【英文标题】：Add shadow to custom UISlider knob image?

【发布时间】：2013-04-25 14:16:54

【问题描述】：

我需要为 UISlider 放置一个带有阴影的自定义旋钮图像。到目前为止，我有一个 38x38 的图像，其中有一个区域定义了旋钮的阴影。

现在在使用此图像时，当我将旋钮滑动到最末端时，实际旋钮无法覆盖端点，因此在旋钮图像的透明区域下可以看到端点

这是我用来自定义 UISlider 的代码

UIImage *slideBtImg = [UIImage imageNamed:SliderKnobImg];  
[self.ratingSlider setThumbImage:slideBtImg forState:UIControlStateNormal];  
[self.ratingSlider setThumbImage:slideBtImg forState:UIControlStateHighlighted];

如何实现自定义旋钮，下方有阴影，正确覆盖端点？？

【参考方案1】：

查看UISlider.h 内部，有一些方法可以让您根据需要自定义滑块旋钮和轨道。 （ios 2.0 及以上）

// lets a subclass lay out the track and thumb as needed
- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;
- (CGRect)trackRectForBounds:(CGRect)bounds;
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value;

这是我自己的例子。它需要一些数学工作。我得到当前滑块位置（从 0 到 1）的 valueRatio 并调整它以使我的阴影自定义旋钮很好地位于中心。希望有帮助;)

- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value 
    float valueRatio = ( value - self.minimumValue ) / valueRange;
    return CGRectMake(valueRatio * (bounds.size.width - 26) + 3, 7, 20, 20);

【讨论】：

什么是valueRange？

【参考方案2】：

您可以为您的图像SliderKnobImg 添加一些透明空间。保持图片的宽度小于滑块的宽度，然后使用[slideBtImg resizableImageWithCapInsets:...] 作为滑块的thumbImage。