Изменить изображение панели iPhone UISlider

Question

Я использую UISlider в своем приложении, но я бы хотел использовать для этого пользовательский стиль "look-and-feel". Я изменил большой палец на свое собственное изображение, но есть ли способ изменить планку? У меня есть изображение бара, которое я хотел бы использовать, но не могу понять, как это сделать.

Я нашел, как изменить максимальное и минимальное изображение, но не сам бар.

Answer 1

Вы были правы, используя -setMinimumTrackImage:forState: и -setMaximumTrackImage:forState: методы. Что вы пропустили, так это то, что вы должны предоставить им растягиваемый UIImage, остальное позаботится автоматически:

UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"SliderMin.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"SliderMax.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
[mySlider setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal];
[mySlider setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal];

Вы можете использовать одно и то же изображение для минимальной и максимальной частей.

Answer 2

Самое простое решение - визуализировать UIImage позади элемента управления для представления дорожки. Ручку можно изменить с помощью:

[mySlider setThumbImage:[UIImage imageNamed:@"thumb_image.png"] forState:UIControlStateNormal];

Побочным эффектом этого является то, что трек не отображается, если вы не предоставите свой собственный. Это, в сочетании с UIImage, предоставляет вам пользовательский UISlider без необходимости создавать подклассы.

Answer 3

Собираем все вместе современным способом

Если вы определяете UISlider в раскадровке, лучшее место для стилизации Slider - это подкласс View.В awakeFromNib вы можете изменить кнопку, левый и правый трек.

Этот вызов устарел в iOS 5 stretchableImageWithLeftCapWidth:topCapHeight:

- (void)awakeFromNib
{
    [super awakeFromNib];

    UIImage *thumbImage = [UIImage imageNamed:@"slider-button"];
    [self.slider setThumbImage:thumbImage forState:UIControlStateNormal];

    UIImage *sliderLeftTrackImage = [UIImage imageNamed: @"slider-fill"];
    sliderLeftTrackImage = [sliderLeftTrackImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeStretch];
    UIImage *sliderRightTrackImage = [UIImage imageNamed: @"slider-track"];
    sliderRightTrackImage = [sliderRightTrackImage resizableImageWithCapInsets:UIEdgeInsetsZero resizingMode:UIImageResizingModeStretch];
    [self.slider setMinimumTrackImage:sliderLeftTrackImage forState:UIControlStateNormal];
    [self.slider setMaximumTrackImage:sliderRightTrackImage forState:UIControlStateNormal];
}

Answer 4

stretchableImageWithLeftCapWidth: устарело с iOS 5.0. Документы говорят использовать вместо этого свойство capInsets. Вот простой способ сделать это:

Создайте три изображения: минимальную (левую) дорожку, максимальную (правую) дорожку и большой палец. Для этого примера предположим, что минимальное и максимальное изображения треков составляют 34p H x 18p W, что-то вроде этого: и это: .

Создайте изображения как обычно:

UIImage *thumbImage = [UIImage imageNamed:@"sliderThumb.png"];

UIImage *sliderMinTrackImage = [UIImage imageNamed: @"sliderMin.png"];

UIImage *sliderMaxTrackImage = [UIImage imageNamed: @"sliderMax.png"];

В моих примерах изображений шириной 18 точек внутренняя точка слева и справа может быть растянута, чтобы соответствовать дорожке, но концы должны иметь нерастяжимые размеры колпачка шириной 17 точек (следовательно, capInsets ) :

sliderMinTrackImage = [sliderMinTrackImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 17, 0, 0)];

sliderMaxTrackImage = [sliderMaxTrackImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 17)];

Затем установите изображения на вашем UISlider как всегда:

[slider setThumbImage:thumbImage forState:UIControlStateNormal];
[slider setMinimumTrackImage:sliderMinTrackImage forState:UIControlStateNormal];
[slider setMaximumTrackImage:sliderMaxTrackImage forState:UIControlStateNormal];

Answer 5

Вот способ добавить изображение дорожки, которое не растягивается, чтобы вы могли иметь, например, форма клина на заднем плане, как и ОП:

Swift 3.0:

let trackImg = image.resizableImage(withCapInsets: .zero, resizingMode: .tile)
slider.setMinimumTrackImage(trackImg, for: .normal)
slider.setMaximumTrackImage(trackImg, for: .normal)

Важно: убедитесь, что ширина вашего ползунка точно равна ширине изображения!

Answer 6

Вам нужно создать подкласс UISlider и переопределить:

- (CGRect)trackRectForBounds:(CGRect)bounds

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

Answer 7

Я делаю это, но задняя панель не отображается идеально в iOS 5.1, но в iOS 6.0 ее отображение

вот мой код

 UIImage *stetchLeftTrack = [[UIImage imageNamed:@"spectrum_horizontal_bar.png"]
                                stretchableImageWithLeftCapWidth:15.0 topCapHeight:0.0];
 UIImage *stetchRightTrack = [[UIImage imageNamed:@"spectrum_horizontal_bar.png"]
                                 stretchableImageWithLeftCapWidth:15.0 topCapHeight:0.0];
 [self.slider_Sprectrum setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
 [self.slider_Sprectrum setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];