我可以在 iOS 上实现带有刻度线的水平滑块吗？没有像 MacOS 这样的选项。
【问题讨论】：
来自@CarlGoldsmith - 您必须自己编程； iOS 上的 UISlider 没有该功能。
【讨论】：
我实际上在我公司的网站上写了一个关于如何做到这一点的教程：
http://fragmentlabs.com/blog/making-talking2trees-part-3-77
对此的快速回答是我编写的自定义方法，上面的文章对此进行了解释：
-(UIView*)tickMarksViewForSlider:(UISlider*)slider View:(UIView *)view
{
// set up vars
int ticksDivider = (slider.maximumValue > 10) ? 10 : 1;
int ticks = (int) slider.maximumValue / ticksDivider;
int sliderWidth = 364;
float offsetOffset = (ticks < 10) ? 1.7 : 1.1;
offsetOffset = (ticks > 10) ? 0 : offsetOffset;
float offset = sliderWidth / ticks - offsetOffset;
float xPos = 0;
// initialize view to return
view.frame = CGRectMake(view.frame.origin.x, view.frame.origin.y+1,
slider.frame.size.width, slider.frame.size.height);
view.backgroundColor = [UIColor clearColor];
// make a UIImageView with tick for each tick in the slider
for (int i=0; i < ticks; i++)
{
if (i == 0) {
xPos += offset+5.25;
}
else
{
UIView *tick = [[UIView alloc] initWithFrame:CGRectMake(xPos, 3, 2, 16)];
tick.backgroundColor = [UIColor colorWithWhite:0.7 alpha:1];
tick.layer.shadowColor = [[UIColor whiteColor] CGColor];
tick.layer.shadowOffset = CGSizeMake(0.0f, 1.0f);
tick.layer.shadowOpacity = 1.0f;
tick.layer.shadowRadius = 0.0f;
[view insertSubview:tick belowSubview:slider];
xPos += offset - 0.4;
}
}
// return the view
return view;
}
您基本上可以将此方法应用于位于 UISlider 后面的视图，并以适当的间隔创建刻度线。您可以通过修改 ticksDivider 变量来更改可见的刻度数。上面的示例为每个滑块值创建一个值，除非滑块的 maximumValue 属性大于 10（我的滑块值分别为 5、40 和 120），在这种情况下，我将值除以 10。
您必须在xPos += offset+... 之后使用 offsetOffset 值和 float 值来说明拇指图像和滑块帽插入的宽度（因此拇指按钮似乎位于每个按钮的中心）。
【讨论】：
[slider thumbRectForBounds:trackRect:value:]。
虽然 ctlockey 的解决方案确实有效，但我想要一些更简单的东西，但也允许拇指在用户释放它时捕捉到它最接近的任何刻度线。
我的解决方案如下。它是 UISlider 的子类，仅覆盖两个方法。它只是简单的框架，但将成为更复杂版本的基础。
-(void)endTrackingWithTouch:(UITouch *)touch
withEvent:(UIEvent *)event
{
[super endTrackingWithTouch:touch withEvent:event];
if (self.value != floorf(self.value))
{
CGFloat roundedFloat = (float)roundf(self.value);
[self setValue:roundedFloat animated:YES];
}
}
-(void)drawRect:(CGRect)rect
{
CGFloat thumbOffset = self.currentThumbImage.size.width / 2.0f;
NSInteger numberOfTicksToDraw = roundf(self.maximumValue - self.minimumValue) + 1;
CGFloat distMinTickToMax = self.frame.size.width - (2 * thumbOffset);
CGFloat distBetweenTicks = distMinTickToMax / ((float)numberOfTicksToDraw - 1);
CGFloat xTickMarkPosition = thumbOffset; //will change as tick marks are drawn across slider
CGFloat yTickMarkStartingPosition = self.frame.size.height / 2; //will not change
CGFloat yTickMarkEndingPosition = self.frame.size.height; //will not change
UIBezierPath *tickPath = [UIBezierPath bezierPath];
for (int i = 0; i < numberOfTicksToDraw; i++)
{
[tickPath moveToPoint:CGPointMake(xTickMarkPosition, yTickMarkStartingPosition)];
[tickPath addLineToPoint:CGPointMake(xTickMarkPosition, yTickMarkEndingPosition)];
xTickMarkPosition += distBetweenTicks;
}
[tickPath stroke];
}
【讨论】：