Personnalisé modifier la vue en UITableViewCell tout balayez vers la gauche. Objective-C ou Swift

Il suffit de copier coller le code ci-dessous!

-(NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath {

       UITableViewRowAction *editAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"Clona" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){
          //insert your editAction here
       }];
       editAction.backgroundColor = [UIColor blueColor];

       UITableViewRowAction *deleteAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"Delete"  handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){
          //insert your deleteAction here
       }];
       deleteAction.backgroundColor = [UIColor redColor];
return @[deleteAction,editAction];
}

Vous pouvez utiliser UITableViewRowAction's backgroundColor à l'ensemble de personnaliser l'image ou de la vue. L'astuce est d'utiliser UIColor(patternImage:).

Fondamentalement la largeur de UITableViewRowAction zone est décidé par son titre, de sorte que vous pouvez trouver une longueur exacte de titre(ou un espace) et de définir la taille exacte de l'image avec patternImage.

Pour mettre en œuvre la présente, j'ai fait un UIView's de la méthode d'extension.

func image() -> UIImage {
    UIGraphicsBeginImageContextWithOptions(bounds.size, isOpaque, 0)
    guard let context = UIGraphicsGetCurrentContext() else {
        return UIImage()
    }
    layer.render(in: context)
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image!
}

et de faire une chaîne de caractères avec des espaces blancs et de la longueur exacte,

fileprivate func whitespaceString(font: UIFont = UIFont.systemFont(ofSize: 15), width: CGFloat) -> String {
    let kPadding: CGFloat = 20
    let mutable = NSMutableString(string: "")
    let attribute = [NSFontAttributeName: font]
    while mutable.size(attributes: attribute).width < width - (2 * kPadding) {
        mutable.append(" ")
    }
    return mutable as String
}

et maintenant, vous pouvez créer UITableViewRowAction.

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
    let whitespace = whitespaceString(width: kCellActionWidth)
    let deleteAction = UITableViewRowAction(style: .`default`, title: whitespace) { (action, indexPath) in
        //do whatever you want
    }

    //create a color from patter image and set the color as a background color of action
    let kActionImageSize: CGFloat = 34
    let view = UIView(frame: CGRect(x: 0, y: 0, width: kCellActionWidth, height: kCellHeight))
    view.backgroundColor = UIColor.white
    let imageView = UIImageView(frame: CGRect(x: (kCellActionWidth - kActionImageSize) / 2,
                                              y: (kCellHeight - kActionImageSize) / 2,
                                              width: 34,
                                              height: 34))
    imageView.image = UIImage(named: "x")
    view.addSubview(imageView)
    let image = view.image()

    deleteAction.backgroundColor = UIColor(patternImage: image)

    return [deleteAction]
}

Le résultat ressemblera à ceci.

Une autre façon de le faire est d'importer des polices personnalisées qui a l'image que vous souhaitez utiliser en tant que police et l'utiliser UIButton.appearance. Cependant, cela va affecter les autres boutons, sauf si vous définissez manuellement sur un autre bouton de la police.

De iOS 11, il affiche ce message [TableView] Setting a pattern color as backgroundColor of UITableViewRowAction is no longer supported.. Actuellement, il est encore à travailler, mais il ne fonctionnait pas dans la future mise à jour.

Vous Pouvez essayer ce,

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
let backView = UIView(frame: CGRect(x: 0, y: 0, width: 80, height: 80))
backView.backgroundColor = #colorLiteral(red: 0.933103919, green: 0.08461549133, blue: 0.0839477703, alpha: 1)
let myImage = UIImageView(frame: CGRect(x: 30, y: backView.frame.size.height/2-14, width: 16, height: 16))
myImage.image = #imageLiteral(resourceName: "rubbish-bin")
backView.addSubview(myImage)
let label = UILabel(frame: CGRect(x: 0, y: myImage.frame.origin.y+14, width: 80, height: 25))
label.text = "Remove"
label.textAlignment = .center
label.textColor = UIColor.white
label.font = UIFont(name: label.font.fontName, size: 14)
backView.addSubview(label)
let imgSize: CGSize = tableView.frame.size
UIGraphicsBeginImageContextWithOptions(imgSize, false, UIScreen.main.scale)
let context = UIGraphicsGetCurrentContext()
backView.layer.render(in: context!)
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
let delete = UITableViewRowAction(style: .destructive, title: "           ") { (action, indexPath) in
print("Delete")
}
delete.backgroundColor = UIColor(patternImage: newImage)
return [delete, share]
}

Si vous souhaitez uniquement utiliser du texte en faisant glisser les actions, alors vous pouvez utiliser l'iOS par défaut balayez les actions, mais si vous voulez que l'image et le texte, alors vous devez le personnaliser. J'ai trouvé un bon tutoriel et exemples qui peuvent résoudre ce problème.

Essayer ce référentiel pour obtenir la coutume balayez vers la cellule. Vous pouvez ajouter plusieurs option ici.

http://iosbucket.blogspot.in/2016/04/custom-swipe-table-view-cell_16.html

https://github.com/pradeep7may/PKSwipeTableViewCell

Cette charge à la fois le titre et l'image.

Pour iOS 11 et par la suite:

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
let action = UIContextualAction(
style: .normal,
title: "My Title",
handler: { (action, view, completion) in
//do what you want here
completion(true)
})
action.image = UIImage(named: "My Image")
action.backgroundColor = .red
let configuration = UISwipeActionsConfiguration(actions: [action])
configuration.performsFirstActionWithFullSwipe = false
return configuration
}

Aussi, la méthode similaire est disponible pour leadingSwipeActions

Source:

https://developer.apple.com/videos/play/wwdc2017/201/ (Parle à environ 16 minutes de temps)
https://developer.apple.com/videos/play/wwdc2017/204/ (Parle à environ 23 minutes de temps)

créer une vue sur la cellule personnalisé dans la vue de table et d'appliquer PanGestureRecognizer de la vue sur la cellule.Ajouter les boutons de la cellule personnalisé, lorsque vous faites glisser la vue sur la cellule personnalisé ensuite les boutons sur la cellule personnalisé sera visible.

 UIGestureRecognizer* recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
recognizer.delegate = self;
[YourView addGestureRecognizer:recognizer];

Et de gérer l'panoramique sur le point de vue de la méthode

 if (recognizer.state == UIGestureRecognizerStateBegan) {
//if the gesture has just started, record the current centre location
_originalCenter = vwCell.center;
}
//2
if (recognizer.state == UIGestureRecognizerStateChanged) {
//translate the center
CGPoint translation = [recognizer translationInView:self];
vwCell.center = CGPointMake(_originalCenter.x + translation.x, _originalCenter.y);
//determine whether the item has been dragged far enough to initiate  /complete
_OnDragRelease = vwCell.frame.origin.x < -vwCell.frame.size.width / 2;
}
//3
if (recognizer.state == UIGestureRecognizerStateEnded) {
//the frame this cell would have had before being dragged
CGPoint translation = [recognizer translationInView:self];
if (_originalCenter.x+translation.x<22) {
vwCell.center = CGPointMake(22, _originalCenter.y);
IsvwRelease=YES;
}
CGRect originalFrame = CGRectMake(0, vwCell.frame.origin.y,
vwCell.bounds.size.width, vwCell.bounds.size.height);
if (!_deleteOnDragRelease) {
//if the item is not being dragged far enough , snap back to the original location
[UIView animateWithDuration:0.2
animations:^{
vwCell.frame = originalFrame;
}
];
}
}