在透明拇指图像后面隐藏 UISlider 轨道

Posted 2023-03-13

【中文标题】在透明拇指图像后面隐藏 UISlider 轨道

【英文标题】：Hide UISlider track when behind transparent thumb image

【发布时间】：2015-01-28 06:53:26

【问题描述】：

我目前正在 Xcode 中创建自定义 UISlider。我正在为滑块设置拇指图像、最小图像和最大图像。一切都很好。该设计要求拇指图像对视图的背景是透明的。这就是我的问题所在，您可以看到滑块的两侧在拇指图像的中间汇合在一起。我不希望它看起来像这样。我希望滑块停止拇指图像的边缘。关于我如何做到这一点的任何想法？欢迎任何和所有建议。谢谢。

这是我目前使用的代码。

UIImage *thumbImage = [UIImage imageNamed:@"thumb.png"];
UIImage *minImage = [UIImage imageNamed:@"min.png"];
UIImage *maxImage = [UIImage imageNamed:@"max.png"];

minImage = [minImage resizableImageWithCapInsets:UIEdgeInsetsMake(0,0,0,0)];
maxImage = [maxImage resizableImageWithCapInsets:UIEdgeInsetsMake(0,0,0,0)];

[_slider setMinimumTrackImage:minImage forState:UIControlStateNormal];
[_slider setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[_slider setThumbImage:thumbImageforState:UIControlStateNormal];

我无法发布图片，因为我没有足够的声誉。我会试着解释得更好一点。我有一个圆形的拇指图像。圆圈的中心是透明的，您可以直接看到我视图的背景图像。滑块的轨迹一直延伸到圆心。如果轨道停在圆圈的轮廓上，我会更喜欢。我希望这更有意义。

【问题讨论】：

贴图然后理解就好了......

【参考方案1】：

我做了类似于 Sean Marraffa 的事情，尽管我发现子类化 UISlider 并使用类似这样的方法更新我在 thumbRectForBounds:trackRect:value 中的图像视图的框架更容易：

var trackHeight: CGFloat = 2

override func thumbRectForBounds(bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect

    let superValue = super.thumbRectForBounds(bounds, trackRect: rect, value: value)
    let originY = (bounds.height-trackHeight)/2.0
    minTrackImageView?.frame = CGRectMake(0, originY, superValue.minX, trackHeight)
    maxTrackImageView?.frame = CGRectMake(superValue.maxX, originY, bounds.width-superValue.maxX, trackHeight)
    return superValue

minTrackImageView 和maxTrackImageView 是我在viewDidLoad 中设置的图像视图。

【参考方案2】：

我没有收到任何关于如何在滑块位于拇指图像后面时隐藏滑块轨道的建议，因此我发布了我的解决方案，以防其他人遇到此问题。如果有人有更好的方法，请告诉我。

为了有一个透明的拇指图像并且不让轨道连接在它的中心，我必须将滑块轨道图像设置为空白图像并设置我自己的滑块轨道图像，每次滑块的值发生变化。我不仅要更改自定义滑块轨道的宽度，而且每次调整图像大小时都必须更新图像的 X 位置，以便它与滑块轨道的最终图像连接。

在我的例子中，我有一个设置为 0 的滑块，它的最大值设置为滑块的宽度。我的自定义滑块轨道只会出现在拇指图像的右侧。因此，当您将拇指图像向右滑动时，条形会缩小，而左侧则清晰。

首先我设置我的滑块拇指图像并将滑块轨道设置为空白图像。

- (void)viewDidLoad 
[super viewDidLoad];

UIImage *thumbImage =[UIImage imageNamed:@"answerSlider.png"];

[_slider setMinimumTrackImage:[UIImage new] forState:UIControlStateNormal];
[_slider setMaximumTrackImage:[UIImage new] forState:UIControlStateNormal];
[_slider setThumbImage:thumbImage forState:UIControlStateNormal];

thumbImage = nil;

_slider.value = 0;

在 ViewWillApear 中，我有一个调用来设置我将创建的自定义 SLider 轨道。

- (void)viewDidAppear:(BOOL)animated
[self updateSlideBarLength];

在updateSLideBarLength里面我用slider的值来帮助确定我的slider track Image的宽度。

- (void)updateSlideBarLength
// Get Position Of Slider
CGFloat sliderValue = _slider.value;
CGFloat thumbImageWidth = 58; // this is the width of my thumb image
CGFloat sliderControlWidth = 288.0f; // This is a constant number in my case
CGFloat sliderWidth = sliderControlWidth - thumbImageWidth - sliderValue; 

CGFloat sliderBarHeight = 2.0f;

// Reset Width Of aFrame
CGFloat sliderEndY = _sliderEnd.frame.origin.y;
CGFloat sliderEndX = _sliderEnd.frame.origin.x;

CGFloat sliderBarY = sliderEndY + (_sliderEnd.frame.size.height / 2 - 1);
CGFloat sliderBarX = sliderEndX - sliderWidth + (_sliderEnd.frame.size.width/2);

CGRect aframe = CGRectMake(sliderBarX, sliderBarY, sliderWidth, sliderBarHeight);

if (_sliderBar == nil) 
    NSLog(@"Slider Bar Doesnt Exist");
    _sliderBar = [[UIImageView alloc] initWithFrame:aframe];
    _sliderBar.image = [UIImage imageNamed:@"sliderBar.png"];
    [self.view addSubview:_sliderBar];
    [self.view bringSubviewToFront:_sliderBar];


_sliderBar.frame = aframe;

最后，我确保每次滑块值更改时都会调用 updateSliderBarLength。

- (IBAction)sliderMoved:(id)sender 
    [self updateSlideBarLength];

虽然我必须调整滑块的最大值以便我创建的自定义滑块轨道图像始终与拇指图像的边缘对齐，但这仍然有效。随着值的增加滑动拇指图像，滑块轨道开始侵犯我的拇指图像。通过增加滑块值，我能够阻止这种情况发生。同样，我不相信这是最好的方法，但它对我有用。稍后当我有更多代表并且可以发布图片时，我将编辑此帖子以帮助每个人可视化我所描述的内容。