Me hizo una costumbre UITableViewRowAction. Ahora me gustaría añadir una imagen en lugar de texto. Sé que es posible, pero no saben cómo hacerlo.
¿Alguien de ustedes sabe cómo hacer esto en Swift y le gustaría ayudar a mí?
Gracias por sus respuestas!

InformationsquelleAutor user3592462 | 2015-04-02

8 Comentarios

  1. 42

    iOS 11.0

    Swift

    Apple introdujo manera flexible para declarar la fila de acciones con grandes beneficios.

    extension ViewController: UITableViewDelegate {
      func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let askAction = UIContextualAction(style: .normal, title: nil) { action, view, complete in
          print("Ask!")
          complete(true)
        }
    
        //here set your image and background color
        askAction.image = IMAGE
        askAction.backgroundColor = .darkGray
    
        let blockAction = UIContextualAction(style: .destructive, title: "Block") { action, view, complete in
          print("Block")
          complete(true)
        }
    
        return UISwipeActionsConfiguration(actions: [blockAction, askAction])
      }
    
      func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {
        cell.textLabel?.text = "row: \(indexPath.row)"
      }
    }

    Ejemplo:

    UITableViewRowAction imagen para el título

    iOS 8.0

    Que usted necesita para establecer UIImage a fondo de la fila de acción, concretamente por:

    Swift:

    UIColor(patternImage: UIImage(named: "IMAGE_NAME"))

    Objective-C:

    [UIColor colorWithPatternImage:[UIImage imageNamed:@"IMAGE_NAME"]];
    • Gracias funciona!
    • Para las imágenes, armé un CocoaPod que iba a tratar de resolver este tan elegante como sea posible por el momento: github.com/benguild/BGTableViewRowActionWithImage
    • gracias
    • Gran. Esto funciona para la imagen. Pero, ¿cómo hacer que el color de fondo y la imagen juntos.
    • hola! Voy a proponer dos soluciones: 1. el color de fondo se establece concretamente, en la imagen; 2. conjunto de UIImage imageWithRenderingMode(.AlwaysTemplate) color especial.
    • Cuando se utiliza una imagen, el tamaño del botón debe ser determinado y aplicado a la imagen. El texto debe ser también un cierto número de «espacios». Si el título del texto se establece en rowActionWithStyle: title: handler:, la imagen y el texto se pueden solapar. El número de espacios en el título del texto, se determina el ancho de la imagen.
    • Considere el uso de github.com/MortimerGoro/MGSwipeTableCell
    • Me parece que no puede hacer este tamaño de la imagen de la forma que yo quiero, independientemente de cuántos espacios que yo uso.
    • ¿cuál es el tamaño de la imagen?
    • Es un .pdf vector
    • ¿Crees que funcionaría mejor si era una .png? @dimpiax
    • en primer lugar, ponerse límites de la imagen que puedes poner dentro, en segundo lugar tratar como png.
    • el tamaño de la imagen y la altura de la fila debe ser coincidencia???
    • Ahora su respuesta no funciona: Setting a pattern color as backgroundColor of UITableViewRowAction is no longer supported.
    • tnx, comprobar la solución de iOS 11.

  2. 9

    Swift 4 (iOS 11+):

    iOS 11 ahora soporta imágenes (sólo) para mostrar en los botones de acción. Usted simplemente tiene que inicializar un UISwipeActionsConfiguration objeto en la vista de tabla de objeto delegado:

    extension MyTableViewController:UITableViewDelegate {
    
        func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    
            let deleteAction = UIContextualAction(style: .normal, title:  nil, handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
    
                    debugPrint("Delete tapped")
    
                    success(true)
                })
    
            deleteAction.image = UIImage(named: "icon_delete.png")
            deleteAction.backgroundColor = UIColor.red
    
            return UISwipeActionsConfiguration(actions: [deleteAction])
        }

    }

  3. 7

    Hice este simple UITableViewRowAction categoría, en orden a establecer el icono de mis acciones.
    Usted puede establecer la imagen, el color de fondo, la altura de la celda (para controlar la dinámica de las células) y el tamaño de los iconos en porcentaje.

    extension UITableViewRowAction {
    
      func setIcon(iconImage: UIImage, backColor: UIColor, cellHeight: CGFloat, iconSizePercentage: CGFloat)
      {
        let iconHeight = cellHeight * iconSizePercentage
        let margin = (cellHeight - iconHeight) / 2 as CGFloat
    
        UIGraphicsBeginImageContextWithOptions(CGSize(width: cellHeight, height: cellHeight), false, 0)
        let context = UIGraphicsGetCurrentContext()
    
        backColor.setFill()
        context!.fill(CGRect(x:0, y:0, width:cellHeight, height:cellHeight))
    
        iconImage.draw(in: CGRect(x: margin, y: margin, width: iconHeight, height: iconHeight))
    
        let actionImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    
        self.backgroundColor = UIColor.init(patternImage: actionImage!)
      }
    }
    • Precioso … Gracias !
    • por favor, ¿puedes mostrar algo de código de ejemplo de cómo utilizar este, además de lo que valor debo poner para el iconSizePercentage es de 0 a 100%?
    • Lo siento por el retraso. Usted debe utilizar este helper en el formato tableview editActionsForRowAt delegado. Crear un UITableViewRowAction y aplicar la setIcon a ella. El porcentaje es de 0 a 1.0
  4. 5
    class TableViewRowAction: UITableViewRowAction 
    {
        var image: UIImage?
    
        func _setButton(button: UIButton) 
        {
            if let image = image, let titleLabel = button.titleLabel
            {
                let labelString = NSString(string: titleLabel.text!)
                let titleSize = labelString.sizeWithAttributes([NSFontAttributeName: titleLabel.font])
    
                button.tintColor = UIColor.whiteColor()
                button.setImage(image.imageWithRenderingMode(.AlwaysTemplate), forState: .Normal)
                button.imageEdgeInsets.right = -titleSize.width
            }
        }
    }
    
    
    func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? 
    {
        let delete = TableViewRowAction(style: UITableViewRowActionStyle.Default, title: "         ") { action, indexPath in }
        delete.image = UIImage(named: "trashImg")
    
        let sharing = TableViewRowAction(style: UITableViewRowActionStyle.Default, title: "         ") { action, indexPath in }
        sharing.backgroundColor = UIColor.lightGrayColor()
        sharing.image = UIImage(named: "sharingImg")
    
        return [delete, sharing]
    }
    • FYI esto no va a dejar que usted acaba de añadir una imagen, tiene que ser un texto así. Fue a estrellarse cuando pongo «» en el título argumento (debido a la fuerza de manta de titleLabel.de texto). Tuve que poner «» en el título de argumento para obtener una imagen sólo las acciones con el dedo…en el lado positivo se puede controlar el ancho del botón con el número de espacios en blanco, aunque…:)
    • Miruliya, ¿cómo sabes que UITableViewRowAction había un botón de propiedad? Esto NO está en la documentación: developer.apple.com/reference/uikit/uitableviewrowaction. Es técnicamente un hack ?
    • no funciona en iOS 8.4 🙁
    • lamentablemente _setButton es una API privada.
    • ¿cómo hace uno para aprender acerca de la API privada como estas?
    • no funciona en iOS 10. setButton no se llama.
    • trabajo para iOS 10. _setButton llamado.
    • Nadie debe usar esta solución. Usted no tiene manera de saber si Apple deja de llamar setButton.
    • intente comentario de arriba

  5. 1

    Acabo de implementar la mejor versión de https://stackoverflow.com/a/48122210
    1. En la mayoría de los casos la altura de la celda y la anchura de la costumbre se desliza parte son diferentes, usted tiene que calcular este en su función
    2. La imagen puede tener diferentes tamaño de la plaza, así que usted tiene que calcular las proporciones no sólo por la altura.
    Así, el código con mis correcciones

    func setIcon(iconImage: UIImage, backColor: UIColor, cellHeight: CGFloat, customSwipPartWidth: CGFloat, iconSizePercentage: CGFloat) {
            let iconWidth = customSwipPartWidth * iconSizePercentage
            let iconHeight = iconImage.size.height / iconImage.size.width * iconWidth
            let marginY = (cellHeight - iconHeight) / 2 as CGFloat
            let marginX = (customSwipPartWidth - iconWidth) / 2 as CGFloat
    
    
            UIGraphicsBeginImageContextWithOptions(CGSize(width: customSwipPartWidth, height: cellHeight), false, 0)
            let context = UIGraphicsGetCurrentContext()
    
            backColor.setFill()
            context!.fill(CGRect(x:0, y:0, width:customSwipPartWidth, height:cellHeight))
    
            iconImage.draw(in: CGRect(x: marginX, y: marginY, width: iconWidth, height: iconHeight))
    
            let actionImage = UIGraphicsGetImageFromCurrentImageContext();
            UIGraphicsEndImageContext();
    
            self.backgroundColor = UIColor.init(patternImage: actionImage!)
        } 
  6. 0
    delActions.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"delete.png"]];
    • el tamaño de la imagen y la altura de la fila debe ser coincidencia???
  7. 0

    El problema con el patrón básico del color de enfoque es que la imagen que deben ser del mismo tamaño que el botón de acción, o al menos tener algo más de plano de fondo en la parte inferior para evitar que la imagen de la repetición (a pesar de estar anclada en la parte superior, que no es muy agradable).

    He tenido que lidiar con la dinámica de la altura de las células por lo que he implementado las siguientes:

    - (UIColor *)backgroundImageForActionAtIndexPath:(NSIndexPath *)indexPath withImage:(UIImage *)image tintColor:(UIColor *)tintColor backgroundColor:(UIColor *)backgrounfColor expectedWith:(CGFloat)width {
    //
    CGRect cellFrame = [self.tableView rectForRowAtIndexPath:indexPath];
    CGSize expectedSize = CGSizeMake(width, cellFrame.size.height);
    
    UIGraphicsBeginImageContextWithOptions(expectedSize, NO, 0.0);
    
    CGContextRef ctx = UIGraphicsGetCurrentContext ();
    if (ctx) {
        //set the background
        CGContextSetFillColorWithColor(ctx, backgrounfColor.CGColor);
        CGRect fillRect = CGRectZero;
        fillRect.size = expectedSize;
        CGContextFillRect(ctx, fillRect);
        //put the image
        CGContextSetFillColorWithColor(ctx, tintColor.CGColor);
        CGRect rect = CGRectMake((expectedSize.width - image.size.width) / 2., (expectedSize.height - image.size.height) / 2., image.size.width, image.size.height);
        [image drawInRect:rect];
    }
    
    UIImage * newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return [UIColor colorWithPatternImage:newImage];

    }

    Usted todavía tiene que establecer el expectedWidth para que coincida con la etiqueta vacía de poner en el título de la acción. e.g: @» » -> 64.f

    Como se puede ver con este enfoque se puede ajustar el botón de fondo y el color del matiz en el código y no en la propia obra de arte.

  8. 0

    Mi variación intenta utilizar UImageView del contentMode comportamiento y cuando eso no fue suficiente, he encontrado un poco de buen uso para un par de los principales Geometría Rect métodos porque mantienen el marco de destino centrado dentro de la célula marco. El uso de una prueba de los ojos, parece que deslizar fue la eliminación de la mitad de mi normal ancho de la celda, de modo que es donde la magia de los números se muestran.

    Swift 3.0

    extension UITableViewRowAction {
    func setIcon(iconImage: UIImage, backColor: UIColor, cellHeight: CGFloat, cellWidth:CGFloat) ///, iconSizePercentage: CGFloat)
        {
    let cellFrame = CGRect(origin: .zero, size: CGSize(width: cellWidth*0.5, height: cellHeight))
    let imageFrame = CGRect(x:0, y:0,width:iconImage.size.width, height: iconImage.size.height)
    let insetFrame = cellFrame.insetBy(dx: ((cellFrame.size.width - imageFrame.size.width) / 2), dy: ((cellFrame.size.height - imageFrame.size.height) / 2))
    let targetFrame = insetFrame.offsetBy(dx: -(insetFrame.width / 2.0), dy: 0.0)
    let imageView = UIImageView(frame: imageFrame)
    imageView.image = iconImage
    imageView.contentMode = .left
    guard let resizedImage = imageView.image else { return }
    UIGraphicsBeginImageContextWithOptions(CGSize(width: cellWidth, height: cellHeight), false, 0)
    guard let context = UIGraphicsGetCurrentContext() else { return }
    backColor.setFill()
    context.fill(CGRect(x:0, y:0, width:cellWidth, height:cellHeight))
    resizedImage.draw(in: CGRect(x:(targetFrame.origin.x / 2), y: targetFrame.origin.y, width:targetFrame.width, height:targetFrame.height))
    guard let actionImage = UIGraphicsGetImageFromCurrentImageContext() else { return }
    UIGraphicsEndImageContext()
    self.backgroundColor = UIColor.init(patternImage: actionImage)
    }
    }

    Uso:
    desde el editActions… método del formato tableview delegado.

    let cellHeight = (self.tableView(tableView, cellForRowAt: indexPath)).frame.size.height
    let cellWidth = (self.tableView(tableView, cellForRowAt: indexPath)).frame.size.width
    let favorite = UITableViewRowAction(style: .normal, title: nil) { action, index in
    //perform action
                    debugPrint("Test")
    }
    favorite.setIcon(iconImage: #imageLiteral(resourceName: "favorite"), backColor: .green, cellHeight: cellHeight, cellWidth:cellWidth)

Dejar respuesta

Please enter your comment!
Please enter your name here