Пользовательский UISwitch с изображением [закрыт]

17

Мне нужно реализовать пользовательский переключатель в проекте. В настоящее время я обнаружил, что мы не можем изменять с помощью UISwitch, чтобы реализовать, как показано на рисунке ниже. Я следил за сообщениями и просматривал через stackoverflow и другие блоги, но не нашел решение по своему усмотрению. Один из способов - перейти с контролем UISegmented, как в этой публикации, но это тоже не решает мою проблему.

Заранее благодарим за помощь

    
задан Arshad Parwez 29.04.2013 в 16:51
источник
  • В чем проблема с UISegmentedControl? Я думаю, что это способ пойти на то, что вы пытаетесь сделать. –  Odrakir 29.04.2013 в 16:53
  • Попробуйте следующее: github.com/twotoasters/TTSwitch –  Desdenova 29.04.2013 в 16:58
  • Ваши ответы здесь: SwiftySwitch –  Sethmr 30.01.2017 в 22:07

4 ответа

22

Чем тяжело создавать собственный переключатель? UISwitch - это элемент управления, по существу, просто представление, которое отправляет сообщение - с двумя состояниями. Вы можете настроить его следующим образом:

  • Вид контейнера: простой вид с закругленными углами (установите cornerRadius слоя представления) и цвет фона

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

  • правое изображение: изображение, которое отображает изображение, которое вы хотите показать с правой стороны, т. е. метка X для вашего примера

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

Когда пользователь набирает или управляет элементом управления, используйте Core Animation, чтобы переместить ползунок на другую сторону коммутатора и обновить состояние элемента управления и быстро перейти к цвету фона для нового состояния. Отправьте действие элемента управления цели.

    
ответ дан Caleb 29.04.2013 в 17:02
источник
  • Спасибо! Я получил решение из вашего ответа. –  Arshad Parwez 01.05.2013 в 10:41
  • Это не совсем так, красивый эффект, который Apple произвел, когда вы переключаетесь, не так просто достичь. Его нелинейная анимация с нелинейной формой. –  Curnelious 23.12.2016 в 15:12
  • Да, я знаю, что Apple много работала, чтобы заставить UISwitch выглядеть правильно, но это не делает недействительным все, что я написал выше. Это зависит от OP, чтобы решить, сколько работы нужно внести в анимацию перехода, но инструменты, доступные в Core Animation, упрощают реализацию того, что я описал очень приятным образом. –  Caleb 23.12.2016 в 17:31
18

Как говорится в газете, вы также можете сделать это с помощью UIButton, просто установите изображения:

[button setImage:[UIImage imageNamed:@"image_on"] forState:UIControlStateSelected];
[button setImage:[UIImage imageNamed:@"image_off"] forState:UIControlStateNormal];

, и когда он постучал, просто переключите выбранное свойство.

- (void) buttonTap {
    button.selected = !button.selected;
}

Это автоматически изменит изображения.

    
ответ дан Odrakir 29.04.2013 в 16:59
источник
  • Не может видеть, где он говорит, что он должен оживить. –  Odrakir 15.07.2014 в 11:03
1

Похоже, вы просто хотите, чтобы ваш элемент управления имел только 2 состояния - включен и отключен.

Простым способом для этого было бы создать 2 png-изображения и использовать пользовательский UIButton с фоновым изображением и просто заменить эти 2 изображения каждый раз, когда кнопка будет нажата.

Это то, что вы пытаетесь сделать или я чего-то не понял?

    
ответ дан gasparuff 29.04.2013 в 16:55
источник
  • Я предполагаю, что требуется скользящий –  makaron 29.04.2013 в 16:57
  • Я пытаюсь реплицировать, как это было сделано в приложении для обмена видео в Twitter «Vine». Фактически заголовок, показанный на изображении, плавно скользит в этом приложении. Думаю, добавление кнопки для изменения состояния не приведет к плавной прокрутке заголовка. Цените свой ответ! –  Arshad Parwez 29.04.2013 в 17:00
  • Хорошо, тогда я думаю, вам понадобится другой подход. Пожалуйста. Удачи вам в этом и сообщите нам, если вы нашли способ сделать это :-) –  gasparuff 29.04.2013 в 17:04
1

Вы знаете о -[UISwitch setOnImage:] и -[UISwitch setOffImage:] , правильно? Также -[UISwitch setTintColor] . Единственный недостаток, который я вижу, заключается в том, что сам коммутатор будет стандартным переключателем iOS (круглая кнопка), но в противном случае это было бы самым iOS-подобным решением.

При реализации собственного / offImage помните о ограничениях размера, а также о том, что сторона изображения к переключателю является вогнутой. tintColor можно использовать, чтобы остальные переключатели отображали вашу цветовую схему. Вы можете отслеживать событие valueChanged , чтобы изменить цвет оттенков.

Если вам нужен точный вид, который вы видите в своем вопросе (кнопка с квадратным переключателем), тогда вы, вероятно, захотите использовать настраиваемый элемент управления, как предположил @Caleb.

    
ответ дан Olie 27.06.2013 в 19:39
источник
  • Это только iOS 6+ –  Or Arbel 30.06.2013 в 17:30
  • Исправить. iOS6 имеет 92% -ный прием (июнь 2013 г.) и восхождение. –  Olie 30.06.2013 в 20:57