¿Cómo agregar una imagen en UITableViewRowAction?
Estoy intentando agregar una imagen en UITableViewestilo Deslizar. Probé con texto Emoji y funciona bien.
func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
let editAction = UITableViewRowAction(style: .normal, title: "🖋") { (rowAction, indexPath) in
print("edit clicked")
}
return [editAction]
}
Pero necesito una imagen en lugar de un emoji, mientras tanto lo intenté.
editAction.backgroundColor = UIColor.init(patternImage: UIImage(named: "edit")!)
Pero aparece una imagen duplicada. Utilicé imágenes en muchos formatos como 20*20, 25*25, 50*50, pero sigo duplicándolas.
¿Cómo puedo agregar una imagen?
Finalmente en iOS 11 , SWIFT 4 Podemos agregar agregar imagen en la acción de deslizar de UITableView con la ayuda deUISwipeActionsConfiguration
@available(iOS 11.0, *)
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
let action = UIContextualAction(style: .normal, title: "Files", handler: { (action,view,completionHandler ) in
//do stuff
completionHandler(true)
})
action.image = UIImage(named: "apple.png")
action.backgroundColor = .red
let configuration = UISwipeActionsConfiguration(actions: [action])
return configuration
}
Vídeo de la WWDC a las 28.34
Documento de Apple
Nota: He usado una imagen apple.png de 50*50 puntos con 50tableview row height
Tuve el mismo problema con mi proyecto, así que lo solucioné. Creo que esto te resultará útil.
Cuando deslizo la celda de la tabla hacia la izquierda solo para el ancho de la imagen, funciona bien.
Pero cuando deslizo la celda de la tabla más que el ancho de la imagen, la celda de la tabla se muestra así:
Esto sucede porque para agregar una imagen uso la propiedad 'backgroundColor'.
copyButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaCopyIcon.png")!)
Entonces, para solucionar este problema, aumento el ancho de la imagen al mismo ancho que el ancho de la tabla.
imagen antigua >>>>>>>>>>>> nueva imagen
>>>>
este es el nuevo look:
Este es mi código de muestra:
func tableView(_ tableView: UITableView, editActionsForRowAt: IndexPath) -> [UITableViewRowAction]? {
let copyButton = UITableViewRowAction(style: .normal, title: "") { action, index in
print("copy button tapped")
}
copyButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaCopyIcon.png")!)
let accessButton = UITableViewRowAction(style: .normal, title: "") { action, index in
print("Access button tapped")
}
accessButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaAccess.png")!)
return [accessButton, copyButton]
}
Me encontré con el mismo problema y descubrí un módulo realmente bueno para esto llamado SwipeCellKitque hace que sea realmente fácil implementar una imagen en la acción de deslizar la celda sin que la acción de deslizar provoque que se muestren varias imágenes. también permite una mayor personalización, como diferentes direcciones de deslizamiento.
Pasos:
- agregar vaina
import SwipeCellKit- hacer que la celda se ajuste a
SwipeTableViewCell - en
cellForRowla función establecer las celdas se delegan a sí mismas - siga la implementación a continuación o mediante el enlace
enlace al pod -> https://github.com/SwipeCellKit/SwipeCellKit
func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath, for orientation: SwipeActionsOrientation) -> [SwipeAction]? {
guard orientation == .right else { return nil }
let deleteAction = SwipeAction(style: .destructive, title: "Delete") { action, indexPath in
// handle action by updating model with deletion
}
// customize the action appearance
deleteAction.image = UIImage(named: "delete")
return [deleteAction]
}
func tableView(_ tableView: UITableView, editActionsOptionsForRowAt indexPath: IndexPath, for orientation: SwipeActionsOrientation) -> SwipeOptions {
var options = SwipeOptions()
options.expansionStyle = .destructive
return options
}
Encontré una forma de hacer esto en SWIFT 3 :
func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
//let cell = tableView.cellForRow(at: indexPath)
//print(cell?.frame.size.height ?? 0.0)//hence we need this height of image in points. make sure your contentview of image is smaller
let deleteAction = UITableViewRowAction(style: .normal, title:" ") { (rowAction, indexPath) in
print("delete clicked")
}
deleteAction.backgroundColor = UIColor(patternImage:UIImage(named: "delete")!)
return [deleteAction]
}
Necesitamos asegurarnos de que la dimensión de nuestra imagen coincida con la altura de la fila de la celda. Aquí está mi imagen que utilicé.