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

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

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


person Fogmeister    schedule 04.03.2010    source источник
comment
Я пробовал метод [слайдер setMinimumTrackImage:forState:], но он использует изображение и масштабирует его в соответствии с тем, где находится ползунок. Я хотел бы использовать одно изображение для всего ползунка, которое остается статичным, пока по нему перемещается большой палец. Представьте себе ползунок громкости с клином для представления относительных объемов пустых на одном конце и полных на другом. При перемещении ползунка клин остается как есть. Это то, что я хотел бы уметь делать. Спасибо!   -  person Fogmeister    schedule 04.03.2010
comment
Можете ли вы поделиться с пользователями образцами пользовательских изображений слайдера?   -  person Ahsan    schedule 04.06.2011


Ответы (7)


Вы были правы, используя методы -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];

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

person Costique    schedule 04.03.2010
comment
на самом деле, ваш ответ можно объединить с ответом Стива Мелвина, чтобы получить полное решение. - person Raptor; 19.08.2011
comment
К вашему сведению, на iOS 5, в зависимости от вашего изображения слайдера, вы получите несколько испорченных плиток. - person jjxtra; 29.01.2013

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

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

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

person Stephen Melvin    schedule 11.03.2010
comment
Больше не похоже на стандартные UISliders в iOS 5, если только я что-то не пропустил. - person Tim; 14.01.2012
comment
[[UISlider appearanceWhenContainedIn:[self class], nil] setThumbImage:[UIImage...] forState:UIControlStateNormal];. Я думаю, вы также можете сделать UIControlStateHighlighted, чтобы сделать изображение приземления. - person Hari Honor; 06.08.2012

Собираем все на современный лад

Если вы определяете UISlider в раскадровке, лучшее место для стилизации слайдера — в подклассе представления. В 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];
}
person Cameron Lowell Palmer    schedule 27.07.2013

введите описание изображения здесь

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

Свифт 3.0:

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

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

person Dorian Roy    schedule 14.12.2016

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

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

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

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];
person Scotty    schedule 26.11.2013

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

- (CGRect)trackRectForBounds:(CGRect)bounds

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

person willcodejavaforfood    schedule 04.03.2010

Я делаю это, но задняя панель не отображается идеально в 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];
person Dk Kumar    schedule 24.12.2012
comment
@Hari Karam Singh [[Внешний вид UISliderWhenContainedIn:[self class], nil] setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal]; [[Внешний вид UISliderWhenContainedIn:[собственный класс], nil] setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal]; - person Dk Kumar; 24.12.2012
comment
Привет, Дк, Кумар, я тоже сталкиваюсь с той же проблемой в IOS 5, но работаю в IOS 6. Я использую два изображения для минимального и максимального значений, где оба одинаковы. Изображение большого пальца представляет собой небольшое прозрачное светящееся изображение. В IOS я мог видеть линию позади большой палец... Можете ли вы помочь, как вы решили в вашем случае, чтобы избежать перекоса/растяжения... - person Dinakar; 12.02.2013
comment
попробуйте удалить stretchableImageWithLeftCapWidth... используйте только [UIImage imageNamed:@spectrum_horizontal_bar.png]... Он начнет показывать правильные цвета при перемещении ползунка. Единственная проблема, которую я заметил здесь, заключается в том, что она изменяет радиус левого угла ползунка, когда вы переходите к максимальному и минимальному значению ... Я тоже ищу ее решения. - person Ans; 17.02.2013
comment
более того, stretchableImageWithLeftCapWidth устарел в iOS 5. используйте resizableImageWithCapInsets в качестве альтернативы. - person Ans; 17.02.2013