UISlider 拇指图像像素化

Posted 2023-03-10

【中文标题】UISlider 拇指图像像素化

【英文标题】：UISlider Thumb Image Pixelated

【发布时间】：2013-09-26 03:00:35

【问题描述】：

所以我有一个我一直在研究的 UISlider，我需要它有一个自定义图像。我有一个漂亮的@2x 图像，它有很多像素，当我将它添加到 UIImageView 时看起来很棒，但是当我使用相同的图像替换 UISlider 拇指图像时，它像素化了它并使滑块的拇指看起来像废话。关于如何解决这个问题的任何想法？

这是我的一些示例代码。

 slider = [[UISlider alloc] initWithFrame:CGRectMake(sliderOffset, 29.5, siderW, 50)];
    [slider addTarget:self action:@selector(sliderAction) forControlEvents:UIControlEventValueChanged];
    [slider setBackgroundColor:[UIColor clearColor];
    slider.minimumValue = 0.0;
    slider.maximumValue = 10000.0;
    slider.continuous = YES;
    slider.value = 3000.00;
    [slider setThumbImage:[UIImage imageNamed:@"[e-mail]"] forState:UIControlStateNormal];
    [slider setThumbImage:[UIImage imageNamed:@"[e-mail]"] forState:UIControlStateHighlighted];

提前致谢！

【问题讨论】：

有同样的问题。还没有找到任何解决方案...

我找到了解决这个问题的方法。我不确定我的实现是否适合你，但我会在下面发布代码。

谢谢，我想我可以了解我需要的代码。

【参考方案1】：

我是这样解决的：

1) 子类化 UISlider

2) 创建一个清晰的图像并将滑块设置为该清晰的图像。

[self setThumbImage:[UIImage imageNamed:@"ClearImageForOverride.png"] forState:UIControlStateNormal];
    [self setThumbImage:[UIImage imageNamed:@"ClearImageForOverride.png"] forState:UIControlStateHighlighted];

3) 创建一个 UIImageView 并使其跟随拇指的中心。

float imageWH = PassedInHeightWidthFromSubClass;
imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 1, imageWH, imageWH)];
imageView.image = [UIImage imageNamed:@"NewThumbImage"];
[self addSubview:imageView];
[self bringSubviewToFront:imageView];

imageView.center = CGPointMake(thumbRect.origin.x + self.frame.origin.x + localImageViewCenter,  self.frame.origin.y - sliderImageViewYOffset);
[self addTarget:self action:@selector(sliderValueChanged) forControlEvents:UIControlEventValueChanged];

4) 然后当边值改变时，我告诉 imageView 它的中心应该在哪里。

-(void)sliderValueChanged 
    CGRect trackRect = [self trackRectForBounds:self.bounds];
    CGRect thumbRect = [self thumbRectForBounds:self.bounds trackRect:trackRect value:self.value];
    imageView.center = CGPointMake(thumbRect.origin.x + self.frame.origin.x + localImageViewCenter,  self.frame.origin.y - sliderImageViewYOffset);

基本上有了这个，您可以为滑块旋钮制作任何尺寸的图像，它看起来很棒并且可以完美地作为旋钮工作。