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。

您必须使用offset xPos += offset+...之后的offsetOffset值和浮点值来计算拇指图像和滑块上限的宽度（因此拇指按钮看起来在每个上方居中）。

Answer 2

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

Answer 3

来自@CarlGoldsmith - 你必须亲自编程; iOS上的UISliders没有这个功能。

iOS上有刻度线的水平滑块

3 个答案: