Hola, me llamo Luis y aquí les traigo un artículo.
Índice
Hágalo personalizado, hágalo hermoso
Una palanca o un interruptor es excelente para permitir que los usuarios activen o desactiven las funcionalidades de su aplicación: desactivar las notificaciones, habilitar el modo oscuro o cualquier otra preferencia que desee que los usuarios elijan.
Debemos brindar a los usuarios tantas opciones como podamos para que obtengan la experiencia que desean, no algo que los obliguemos a tener. Podría decir: «Oh, tenemos que hacerlo simple». Sí, hazlo simple pero aún así, deja que la gente decida.
No vamos a subclasificar UISwitch;
en su lugar, usaremos UIButton
. ¿Por qué? Porque quiero mostrar la forma más sencilla de implementar un conmutador personalizado. Si desea crear algo más avanzado, debería buscar subclases UISwitch
.
1. Crea una nueva clase
Cree un nuevo archivo para su botón de cambio personalizado. Llamé míaSwitchButton.swift
.
class SwitchButton: UIButton { }
2. Importar imágenes de estado activado / desactivado
Usaremos estas imágenes para mostrar el estado de encendido / apagado del botón del interruptor.
3. Comience a implementar SwitchButton
// // SwitchButton.swift // customswitch // // Created by Yalcin on 2019-12-05. // Copyright © 2019 Yalcin. All rights reserved. // import UIKit import CoreMotion class SwitchButton: UIButton { var status: Bool = false { didSet { self.update() } } var onImage = UIImage(named: "on-image") var offImage = UIImage(named: "off-image") override init(frame: CGRect) { super.init(frame: frame) self.setStatus(false) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } func update() { UIView.transition(with: self, duration: 0.10, options: .transitionCrossDissolve, animations: { self.status ? self.setImage(self.onImage, for: .normal) : self.setImage(self.offImage, for: .normal) }, completion: nil) } func toggle() { self.status ? self.setStatus(false) : self.setStatus(true) } func setStatus(_ status: Bool) { self.status = status } override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { super.touchesEnded(touches, with: event) self.sendHapticFeedback() self.toggle() } func sendHapticFeedback() { let impactFeedbackgenerator = UIImpactFeedbackGenerator(style: .heavy) impactFeedbackgenerator.prepare() impactFeedbackgenerator.impactOccurred() } }
Defina imágenes de encendido y apagado como UIImage. Usaremos las transiciones de UIView para presentar los cambios de estado porque esto les dará a los usuarios la sensación de que esto no es solo una imagen. Puedes jugar con la animación dependiendo de la sensación que quieras dar.
Además, agregué retroalimentación háptica usando CoreMotion
en sendHapticFeedback
función. Esto agregará más a la sensación, ya que le dará una retroalimentación física al usuario cuando toque para alternar.
4. Presenta tu botón de cambio personalizado
import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let switchButton = SwitchButton(frame: CGRect(x: self.view.frame.width/2-80, y: self.view.frame.height/2-35, width: 160, height: 70)) self.view.addSubview(switchButton) } }
Ahora que tenemos un botón de cambio personalizado, podemos llamarlo y mostrarlo en nuestros controladores de vista.
Ahora, ejecute su aplicación y pruebe su interruptor.
Probablemente usará el estado de este conmutador, así que así es como puede obtener el estado.
let status = switchButton.status
Espero que te sirva. ¡Gracias por leer!
Añadir comentario