iOS 上带刻度线的水平滑块

Question

我可以在iOS上实现带有刻度线的水平滑块吗？没有像 MacOS 那样的选项。

Answer 1

实际上，我在公司网站上写了一个关于如何执行此操作的教程：

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。

您必须使用 offsetOffset 值和xPos += offset+... 之后的浮点值，以考虑拇指图像和滑块帽插图的宽度（因此拇指按钮似乎位于每个按钮的中心）。

Answer 2

来自@CarlGoldsmith - 你必须自己编程； iOS 上的 UISlider 没有该功能。

Answer 3

虽然 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];
}