iphone - guidelines - UISwitch personalizado con imagen

swift switch ui

Question

Necesito implementar un switch personalizado en un proyecto. Actualmente, lo que he encontrado es que no podemos modificar con UISwitch para implementarlo como se muestra en la siguiente imagen. He seguido las publicaciones y he buscado en Google a través de stackoverflow y otros blogs, pero no encontré una solución como la deseada. Una forma es ir con el control UISegmentado como en this publicación, pero eso tampoco resuelve mi problema.

Gracias de antemano por cualquier ayuda

Answer 1

¿Qué tiene de difícil crear tu propio interruptor? Un UISwitch es un control, esencialmente solo una vista que envía un mensaje, con dos estados. Podrías configurarlo así:

• Vista de contenedor: una vista simple con esquinas redondeadas (establezca el cornerRadius de cornerRadius de la capa de la vista) y un color de fondo

• imagen izquierda: una vista de imagen que muestra la imagen que desea mostrar en el lado izquierdo, es decir, la marca de verificación de su ejemplo

• imagen derecha: una vista de imagen que muestra la imagen que desea mostrar en el lado derecho, es decir, la marca X para su ejemplo

• control deslizante: una vista de imagen que muestra la parte del control deslizante del interruptor, establecida por encima de las otras dos vistas de imagen

Cuando el usuario toca o mueve el control, use Core Animation para mover el control deslizante al otro lado del interruptor y actualizar el estado del control y hacer un rápido desvanecimiento del color de fondo para el nuevo estado. Envía la acción del control al objetivo.

Answer 2

Como dice Gasparuff, también puede hacerlo con un UIButton, simplemente configure las imágenes:

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

y cuando se toca simplemente cambiar la propiedad seleccionada.

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

Lo que cambiará las imágenes automáticamente.

Answer 3

Parece que solo desea que su control tenga solo 2 estados: habilitado y deshabilitado.

Una forma fácil para esto sería crear 2 imágenes png y usar un UIButton personalizado con una imagen de fondo y reemplazar esas 2 imágenes cada vez que se toca el botón.

¿Es esto lo que estás tratando de hacer o malentendí algo?

Answer 4

Usted sabe acerca de -[UISwitch setOnImage:] y -[UISwitch setOffImage:] , ¿verdad? También -[UISwitch setTintColor] . El único inconveniente que puedo ver es que el interruptor, en sí mismo, será el interruptor estándar de iOS (botón redondo) pero, de lo contrario, esta sería la solución más parecida a iOS.

Al implementar su propia imagen de encendido / apagado, recuerde las restricciones de tamaño y también que el lado de la imagen hacia el interruptor es cóncavo. tintColor puede usarse para hacer que el resto del interruptor refleje su esquema de color. Es posible que desee realizar un seguimiento del evento valueChanged para modificar el color del tinte.

Si necesita el aspecto exacto que muestra en su pregunta (botón de cambio cuadrado), entonces probablemente quiera usar un control personalizado, como sugirió @Caleb.