UITableView -> trailingSwipeActionsConfigurationForRowAt -> UIContextualAction.image not centered correctly for rowHeights < 50

Question

I have a UITableView that has a different row height for the last column. Each row has UIContextualAction to "mark as favourite" and "delete", represented by image (icons). It seams that when the row height is smaller then 50, the UIContextualAction.image placement is corrupted and no longer centered correctly:

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        let (training, package) = decodeIndexPath(indexPath)           
        return package?.trainings.last == training ? 50 : 49
    }
    
    
 func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        guard let training = decodeIndexPath(indexPath).0 else { return nil }
        let imageSizeAction = CGSize(width: 30, height: 30)
        var actions = [UIContextualAction]()
        //add delete action (only custom exercises)
        if training.isCustom {
            let deleteAction = UIContextualAction(style: .destructive, title: nil) { [weak self] (action, view, completion) in
                guard let training = self?.decodeIndexPath(indexPath).0 else { return }
            Database.shared.deleteCustom(training: training, completion: logAsError)
                completion(true)
            }
            deleteAction.image = PaintCode.imageOfBtnCellActionDelete(imageSize: imageSizeAction)
            actions.append(deleteAction)
        }
        //add to favorites
        let favoriteAction = UIContextualAction(style: .normal, title: nil) { [weak self] (action, view, completion) in
            guard var training = self?.decodeIndexPath(indexPath).0 else { return }
            training.isFavorite = !training.isFavorite
            tableView.isEditing = false
            completion(true)
        }
        favoriteAction.backgroundColor = PaintCode.mainBlue
        let image = PaintCode.imageOfBtnCellActionFavorite(imageSize: imageSizeAction, selected: training.isFavorite)
        favoriteAction.image = image
        actions.append(favoriteAction)
        let action = UISwipeActionsConfiguration(actions: actions)
        //only allow full swipe if delete is added
        action.performsFirstActionWithFullSwipe = actions.contains(where: {$0.style == .destructive})
        return action
    }

score 0 · Answer 1 · answered Jan 31 '21 at 12:01

I tried using the backgroundColor and making a patternImage color I am able to get it centred correctly, however because of the tiling action you then get the icon repeated when you stretch the swipe. Not the wanted behaviour

favoriteAction.backgroundColor = UIColor(patternImage: PaintCode.imageOfBtnCellActionFavorite(imageSize:imageSize, selected: training.isFavorite))

So I see no other option then to have a min height of 50 points to make everything work reliably.

UITableView -> trailingSwipeActionsConfigurationForRowAt -> UIContextualAction.image not centered correctly for rowHeights < 50

1 Answers1