Question

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

这是我目前使用的Code I.

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

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

Answer 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中设置的图片视图。

Answer 2

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

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

在我的情况下，我有一个设置为0的滑块，其Max设置为滑块的宽度。我的自定义滑块轨迹仅出现在拇指图像的右侧。因此，当您将拇指图像向右滑动时，条形图会缩小，左侧也会清晰。

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

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

inside updateSLideBarLength I使用滑块的值来帮助确定滑块轨道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];
}

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

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

2 个答案: