Как получить центр большого пальца изображения UISlider

Question

Я создаю пользовательский UISlider , чтобы проверить некоторые идеи интерфейса. В основном основано на увеличении изображения большого пальца.

Я узнал, как это сделать, вот так:

UIImage *thumb = [UIImage imageNamed:@"newThumbImage_64px.png"];  
[self.slider setThumbImage:thumb forState:UIControlStateNormal];  
[self.slider setThumbImage:thumb forState:UIControlStateHighlighted];  
[thumb release];  

Чтобы вычислить связанное значение, мне нужно знать, где центральная точка изображения большого пальца падает при манипуляциях с ним. И точка должна быть в координатах своего суперпредставления.

Глядя на документы UISlider , я не увидел ни одного свойства, которое бы отслеживало это.

Есть ли какой-нибудь простой способ рассчитать это или он может быть получен из каких-то существующих значений?

Answer 1

Это вернет правильное положение X центра большого пальца изображения UISlider в координатах вида:

- (float)xPositionFromSliderValue:(UISlider *)aSlider {
     float sliderRange = aSlider.frame.size.width - aSlider.currentThumbImage.size.width;
     float sliderOrigin = aSlider.frame.origin.x + (aSlider.currentThumbImage.size.width / 2.0);

     float sliderValueToPixels = (((aSlider.value - aSlider.minimumValue)/(aSlider.maximumValue - aSlider.minimumValue)) * sliderRange) + sliderOrigin;

     return sliderValueToPixels;
}

Поместите его в свой контроллер представления и используйте его следующим образом: (предполагается, что свойство называется slider)

float x = [self xPositionFromSliderValue:self.slider];

Answer 2

Я попробовал это после прочтения вышеупомянутого предложения -

yourLabel = [[UILabel alloc]initWithFrame:....];

//Call this method on Slider value change event

-(void)sliderValueChanged{
    CGRect trackRect = [self.slider trackRectForBounds:self.slider.bounds];
    CGRect thumbRect = [self.slider thumbRectForBounds:self.slider.bounds
                               trackRect:trackRect
                                   value:self.slider.value];

    yourLabel.center = CGPointMake(thumbRect.origin.x + self.slider.frame.origin.x,  self.slider.frame.origin.y - 20);
}

Для Swift версия

func sliderValueChanged() -> Void {
        let trackRect =  self.slider.trackRect(forBounds: self.slider.bounds)
        let thumbRect = self.slider.thumbRect(forBounds: self.slider.bounds, trackRect: trackRect, value: self.slider.value)
        yourLabel.center = CGPoint(x: thumbRect.origin.x + self.slider.frame.origin.x + 30, y: self.slider.frame.origin.y - 60)
    }

Я мог бы получить наиболее точное значение, используя этот фрагмент.

Answer 3

Свифт 3

extension UISlider {
    var thumbCenterX: CGFloat {
        let trackRect = self.trackRect(forBounds: frame)
        let thumbRect = self.thumbRect(forBounds: bounds, trackRect: trackRect, value: value)
        return thumbRect.midX
    }
}

Answer 4

Я хотел бы знать, почему никто из вас не дает самый простой ответ, который заключается в чтении руководства. Вы можете точно вычислить все эти значения, а также УБЕДИТЬСЯ, ЧТО ОНИ ОСТАЮТСЯ, просто используя методы:

- (CGRect)trackRectForBounds:(CGRect)bounds
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value

, который вы легко найдете в документации разработчика.

Если изображение большого пальца изменяется и вы хотите изменить его положение, вы создаете подкласс и переопределяете эти методы. Первый дает вам прямоугольник, в котором большой палец может перемещать второй, положение самого большого пальца.

Answer 5

Лучше использовать метод -[UIView convertRect:fromView:]. Это чище и проще без сложных вычислений:

- (IBAction)scrub:(UISlider *)sender
{
    CGRect _thumbRect = [sender thumbRectForBounds:sender.bounds
                                        trackRect:[sender trackRectForBounds:sender.bounds]
                                            value:sender.value];
    CGRect thumbRect = [self.view convertRect:_thumbRect fromView:sender];

    // Use the rect to display a popover (pre iOS 8 code)
    [self.popover dismissPopoverAnimated:NO];
    self.popover = [[UIPopoverController alloc] initWithContentViewController:[UIViewController new]];
    [self.popover presentPopoverFromRect:thumbRect inView:self.view
                permittedArrowDirections:UIPopoverArrowDirectionDown|UIPopoverArrowDirectionUp animated:YES];
}

Answer 6

Я подошел к нему, сначала сопоставив интервал значений UISlider в процентах, а затем взяв тот же процент от размера ползунка минус процент от размера большого пальца, значение, к которому я добавил половину размера большого пальца, чтобы получить его центр.

    - (float)mapValueInIntervalInPercents: (float)value min: (float)minimum max: (float)maximum
    {
        return (100 / (maximum - minimum)) * value -
               (100 * minimum)/(maximum - minimum);
    }    


    - (float)xPositionFromSliderValue:(UISlider *)aSlider
    {
        float percent = [self mapValueInIntervalInPercents: aSlider.value
                              min: aSlider.minimumValue
                              max: aSlider.maximumValue] / 100.0;

        return percent * aSlider.frame.size.width -
               percent * aSlider.currentThumbImage.size.width +
               aSlider.currentThumbImage.size.width / 2;
    }

Answer 7

Swift 3.0
Пожалуйста, обратитесь, если хотите.

import UIKit

extension UISlider {

    var trackBounds: CGRect {
        return trackRect(forBounds: bounds)
    }

    var trackFrame: CGRect {
        guard let superView = superview else { return CGRect.zero }
        return self.convert(trackBounds, to: superView)
    }

    var thumbBounds: CGRect {
        return thumbRect(forBounds: frame, trackRect: trackBounds, value: value)
    }

    var thumbFrame: CGRect {
        return thumbRect(forBounds: bounds, trackRect: trackFrame, value: value)
    }
}

Answer 8

После небольшой игры с IB и изображением большого пальца шириной 1px положение большого пальца точно соответствует ожидаемому:

UIImage       *thumb = [UIImage imageNamed:@"newThumbImage_64px.png"];  
CGRect        sliderFrame = self.slider.frame;
CGFloat       x = sliderFrame.origin.x + slideFrame.size.width * slider.value + thumb.size.width / 2;
CGFloat       y = sliderFrame.origin.y + sliderFrame.size.height / 2;

return CGPointMake(x, y);

Answer 9

Вот решение Swift 2.2, я создал для него расширение. Я только попробовал это с изображением по умолчанию.

import UIKit

extension UISlider {

    var thumbImageCenterX: CGFloat {
        let trackRect = trackRectForBounds(bounds)
        let thumbRect = thumbRectForBounds(bounds, trackRect: trackRect, value: value)

        return thumbRect.origin.x + thumbRect.width / 2 - frame.size.width / 2
    }
}

Answer 10

Это будет работать для UISlider, размещенного в любом месте экрана. Большинство других решений будут работать только тогда, когда UISlider выровнен по левому краю экрана. Обратите внимание, я использовал frame вместо bounds для thumbRect, чтобы добиться этого. И я показываю два варианта, основанные на использовании frame или bounds для trackRect

extension UISlider {

    //this version will return the x coordinate in relation to the UISlider frame
    var thumbCenterX: CGFloat {
        return thumbRect(forBounds: frame, trackRect: trackRect(forBounds: bounds), value: value).midX
    }

    //this version will return the x coordinate in relation to the UISlider's containing view
    var thumbCenterX: CGFloat {
        return thumbRect(forBounds: frame, trackRect: trackRect(forBounds: frame), value: value).midX
    }

}