iOS上にティックマークが付いている水平スライダー

Question

iOS上に目盛り付きの水平スライダーを実現できますか？ MacOSのようなオプションはありません。

Answer 1

@CarlGoldsmithから - 自分でプログラムする必要があります。 iOS上のUISlidersにはその機能がありません。

Answer 2

私は実際に私の会社のウェブサイト上でこれを行う方法のチュートリアルを書きました：

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の場合）、スライダの値を1つずつ作成しています。

offsetOffsetの値と、xPos += offset+...の後の浮動小数点値（親指のボタンがそれぞれの中央に表示されるように、親指イメージとスライダのキャップのインセットの幅を考慮します）。

Answer 3

ctlockeyのソリューションは確かに機能しますが、私はもっと単純なものを望んでいましたが、ユーザーがそれをリリースしたときに親指が最も近いティックマークにスナップできるようにしました。

私の解決策は以下の通りです。 UISliderのサブクラスで、2つのメソッドをオーバーライドするだけです。それは裸の骨ですが、もっと複雑なバージョンの基礎になります。

-(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]; 
}