在iOS上的刻度线水平滑块

我可以在iOS上实现一个带有刻度标记的水平滑块吗？ MacOS中没有这样的选项。

Answer 1

虽然ctlockey的解决scheme肯定有效，但我想要更简单一些，但是也可以让拇指在用户释放它时与任何最接近的刻度线alignment。

我的解决scheme如下。 它是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 2

来自@CarlGoldsmith – 你必须自己编程。 iOS上的UISliders没有这个function。

Answer 3

我其实写了一个关于如何在我公司网站上做的教程：

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背后的视图，并以适当的时间间隔创build刻度标记。 您可以通过修改ticksDividervariables来更改可见的蜱数量。 除非滑块的maximumValue属性大于10（我的滑块的值为5,40和120），否则上面的示例为每个滑块值创build一个值，在这种情况下，我将值除以10。

您必须使用offsetOffset值和float值在xPos += offset+...后来考虑您的拇指图像和滑块帽的内嵌宽度（所以拇指button看起来居中）。