拇指图像不会移动到UISlider的边缘

问题描述

拇指图像即使在最大值或最小值时也不会移动到边缘。

Thumb image does not move to the edge even when it's value is max or min.

有没有人知道如何让它一直移动到边缘滑块？

Does anyone know how to make it move all the way to the edge of the slider?

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UISlider *slider;
@end

@implementation ViewController
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
UIImage* sliderBarMinImage = [[UIImage imageNamed:@"slider_bar_3_min"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];
UIImage* sliderBarImage = [[UIImage imageNamed:@"slider_bar_3_max"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];
UIImage* sliderThumbImage= [[UIImage imageNamed:@"slider_thumb_3"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];

[self.slider setMinimumTrackImage:sliderBarMinImage forState:UIControlStateNormal];
[self.slider setMaximumTrackImage:sliderBarImage forState:UIControlStateNormal];
[self.slider setThumbImage:sliderThumbImage forState:UIControlStateNormal];
}
@end

推荐答案

你看到的是 UISlider 显然是按设计工作的。

What you see is the UISlider working as designed, apparently.

默认情况下，在极端值，拇指的边缘与轨道边缘对齐，而不是拇指的中心位于轨道边缘。因此，如果您提供左右边缘不透明的拇指图像，则会出现问题，因为此后下方的轨道变得可见。

By default, at the extreme values, the thumb's edge is aligned with the edges of the track, rather than the thumb's center being positioned on the edge of the track. So this is a problem if you provide a thumb image whose left and right edges are not opaque, since then the track underneath becomes visible.

一个部分修复是覆盖 thumbRectForBounds（_：trackRect：value :) ，以便拇指的中心在滑块的宽度范围内。下面的代码显示了这一点：

One partial fix is to override thumbRectForBounds(_:trackRect:value:), so that the thumbs' centers range across the width of the slider. The code below shows this:

class CenteredThumbSlider : UISlider {
  override func thumbRectForBounds(bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect
  {
    let unadjustedThumbrect = super.thumbRectForBounds(bounds, trackRect: rect, value: value)
    let thumbOffsetToApplyOnEachSide:CGFloat = unadjustedThumbrect.size.width / 2.0
    let minOffsetToAdd = -thumbOffsetToApplyOnEachSide
    let maxOffsetToAdd = thumbOffsetToApplyOnEachSide
    let offsetForValue = minOffsetToAdd + (maxOffsetToAdd - minOffsetToAdd) * CGFloat(value / (self.maximumValue - self.minimumValue))
    var origin = unadjustedThumbrect.origin
    origin.x += offsetForValue
    return CGRect(origin: origin, size: unadjustedThumbrect.size)
  }
}

但是，我会说这只是部分修复，因为我不相信这也会修改拇指的水龙头区域的位置，所以上面的这个修复有一个令人遗憾的副作用，使得拇指比默认情况下更容易触摸，因为滑块仍然更倾向于触摸中心的触摸滑块。

However, I would say this is only a partial fix since I do not believe this also modifies the position of the thumb's tap region, so this fix above has the unfortunate side-effect of making the thumbs even less easy to touch than they are by default, since the slider still listens for touches more toward the center of the slider.

这篇关于拇指图像不会移动到UISlider的边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！