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

Question

我目前正在 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];

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

Answer 1

我没有收到任何关于如何在缩略图后面隐藏滑块轨道的建议，所以我正在 post 考虑我的解决方案，以防其他人遇到这个问题。如果有人有更好的方法，请告诉我。

为了有一个透明的拇指图像，而不是在它的中心连接轨道，我不得不将滑块轨道图像设置为空白图像，并设置我自己的滑块轨道图像，每次调整大小滑块值变化的时间。我不仅会更改自定义滑块轨道的宽度，而且每次调整大小时我还必须更新图像的 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 中，我有一个调用来设置我将创建的自定义滑块轨道。

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

内部 updateSLideBarLength 我使用滑块的值来帮助确定我的滑块轨道图像的宽度。

- (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];
}

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

Answer 2

我做了一些类似于 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 中设置的图像视图。

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

Hide UISlider track when behind transparent thumb image

xcode

slider

uislider

ios8