自定义 UISlider 图像无法正常工作

Posted 2023-03-13

【中文标题】自定义 UISlider 图像无法正常工作

【英文标题】：Custom UISlider images not working quite right

【发布时间】：2013-05-16 16:45:37

【问题描述】：

使用此代码：

UISlider *slider = [[UISlider alloc]initWithFrame:sliderFrame];
    [slider setThumbImage:[UIImage imageNamed:@"sliderThumb"] forState:UIControlStateNormal];
    UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"sliderMin"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
    UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"sliderMax"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
    [slider setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal];
    [slider setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal];

sliderMin 和 sliderMax 图像都是 210x34（与滑块框架大小相同）。 sliderMin 为蓝色，sliderMax 为红色。当滑块一直向左时，我正确地看到了红色条。但是，在将拇指向右滑动几个像素后，整个条形变为蓝色（sliderMin 图像）。显然我应该只看到滑块左侧的蓝色条。我做错了什么？

【参考方案1】：

首先，您使用的是已弃用的 API。除非您需要支持 ios 4.3（为什么？），否则您应该使用 resizableImageWithCapInsets:resizingMode: 而不是 stretchableImageWithLeftCapWidth:topCapHeight:。

UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"sliderMin"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 9, 0, 9)];
UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"sliderMax"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 9, 0, 9)];

现在，鉴于此，您的图像尺寸不正确。制作可调整大小的图像时，图像应具有您需要的任何固定端，然后中间 1 个像素将平铺以填充其余部分。所以你的滑块图像应该是 19 像素宽（不是 210）。 Retina 版本应为 38 像素宽（每端 18 像素固定，中间 2 像素将被平铺）。

【讨论】：

实际上，如果我这样做，我可以使用这些图像尺寸：resizableImageWithCapInsets:UIEdgeInsetsZero。

那么您没有可调整大小的图像。可调整大小的图像的全部意义在于您只提供末端和中间非常小的部分。如果您创建一个没有插图的全尺寸图像，它将变得毫无意义。然后滑块缩放轨道图像。这可能会产生不良结果。