web-dev-qa-db-fra.com

Comment ajouter une image dans UITableViewRowAction?

J'essaie d'ajouter une image dans le style UITableView Swipe. J'ai essayé avec Emoji text et ça marche bien

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
  let editAction = UITableViewRowAction(style: .normal, title: "????") { (rowAction, indexPath) in
      print("edit clicked")
  }

  return [editAction]
}

Mais j'ai besoin d'image à la place d'Emoji, en attendant j'ai essayé 

editAction.backgroundColor = UIColor.init(patternImage: UIImage(named: "edit")!)

Mais pour obtenir des images en double, j'ai utilisé des images dans de nombreux formats, tels que 20 * 20, 25 * 25, 50 * 50, mais toujours en dupliquant. 

Comment puis-je ajouter une image?

iosswiftuitableview
6
Jack

Enfin dans iOS 11, Swift 4 Nous pouvons ajouter une image dans l'action de glissement de UITableView avec l'aide de UISwipeActionsConfiguration

@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 confrigation = UISwipeActionsConfiguration(actions: [action])

        return confrigation
    }

 

Vidéo WWDC à 28h34

Apple Doc

Remarque: j'ai utilisé une image Apple.png 50 * 50 points avec 50 tableviewrow height 

14
Jack

J'ai eu le même problème avec mon projet, alors j'ai fait une solution de contournement pour ceci ... Je pense que cela vous aidera.

Lorsque je glisse la cellule du tableau vers la gauche uniquement pour la largeur de l'image, cela fonctionne correctement. 

 enter image description here

Mais lorsque je balaye la cellule du tableau plus que la largeur de l’image, la cellule affiche comme ceci: 

 enter image description here

Cela se produit parce que pour ajouter une image, j'utilise la propriété 'backgroundColor'. 

copyButton.backgroundColor = UIColor(patternImage: UIImage(named: "bfaCopyIcon.png")!)

Donc, pour résoudre ce problème, j'augmente la largeur de l'image au même niveau que la largeur de la table.

ancienne image >>>>>>>>>>>> nouvelle image

 enter image description here >>>>  enter image description here

c'est le nouveau look:

 enter image description here

Ceci est mon exemple de code:

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]
}
4
Isuru Jayathissa

J'ai trouvé un moyen de le faire dans Swift 3 -

 enter image description here 

 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]
    }

Nous devons nous assurer que notre dimension d'image correspond à la hauteur de la rangée de cellules Voici mon image que j'ai utilisée  enter image description here

1
Jack

Voici comment je le fais dans objective-c et qui devrait fonctionner dans Swift après traduction.

- (NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath{
    NSString *deleteString = @"Delete";
    CGFloat tableViewCellHeight = [self tableView:tableView heightForRowAtIndexPath:indexPath];
    UIImage *image = [UIImage imageNamed:@"delete_icon"];

    CGFloat fittingMultiplier = 0.4f;
    CGFloat iOS8PlusFontSize = 18.0f;
    CGFloat underImageFontSize = 13.0f;
    CGFloat marginHorizontaliOS8Plus = 15.0f;
    CGFloat marginVerticalBetweenTextAndImage = 3.0f;

    float titleMultiplier = fittingMultiplier;

    NSString *titleSpaceString= [@"" stringByPaddingToLength:[deleteString length]*titleMultiplier withString:@"\u3000" startingAtIndex:0];

    UITableViewRowAction *rowAction= [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:titleSpaceString handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){
        //Do Stuff
    }];

    CGSize frameGuess=CGSizeMake((marginHorizontaliOS8Plus*2)+[titleSpaceString boundingRectWithSize:CGSizeMake(MAXFLOAT, tableViewCellHeight) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{ NSFontAttributeName: [UIFont systemFontOfSize:iOS8PlusFontSize] } context:nil].size.width, tableViewCellHeight);

    CGSize tripleFrame=CGSizeMake(frameGuess.width*3.0f, frameGuess.height*3.0f);

    UIGraphicsBeginImageContextWithOptions(tripleFrame, YES, [[UIScreen mainScreen] scale]);
    CGContextRef context=UIGraphicsGetCurrentContext();

    [[UIColor blueColor] set];
    CGContextFillRect(context, CGRectMake(0, 0, tripleFrame.width, tripleFrame.height));

    CGSize drawnTextSize=[deleteString boundingRectWithSize:CGSizeMake(MAXFLOAT, tableViewCellHeight) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{ NSFontAttributeName: [UIFont systemFontOfSize:underImageFontSize] } context:nil].size;

    [image drawAtPoint:CGPointMake((frameGuess.width/2.0f)-([image size].width/2.0f), (frameGuess.height/2.0f)-[image size].height-(marginVerticalBetweenTextAndImage/2.0f)+2.0f)];

    [deleteString drawInRect:CGRectMake(((frameGuess.width/2.0f)-(drawnTextSize.width/2.0f))*([[UIApplication sharedApplication] userInterfaceLayoutDirection]==UIUserInterfaceLayoutDirectionRightToLeft ? -1 : 1), (frameGuess.height/2.0f)+(marginVerticalBetweenTextAndImage/2.0f)+2.0f, frameGuess.width, frameGuess.height) withAttributes:@{ NSFontAttributeName: [UIFont systemFontOfSize:underImageFontSize], NSForegroundColorAttributeName: [UIColor whiteColor] }];

    [rowAction setBackgroundColor:[UIColor colorWithPatternImage:UIGraphicsGetImageFromCurrentImageContext()]];
    UIGraphicsEndImageContext();

    return @[rowAction];
}
0
Harry Singh

Je suis tombé sur le même problème et ai découvert un très bon pod pour ce SwipeCellKit appelé, ce qui rend très facile l'implémentation d'une image dans votre action de cellule de balayage, sans que l'action de balayage fasse apparaître plusieurs images. cela permet également plus de personnalisation, telle que différentes directions de balayage. étapes: 1. ajouter la cosse 2. importer SwipeCellKit 3. rendre la cellule conforme à SwipeTableViewCell 4. dans cellule pour fonction de ligne définissez les cellules déléguées sur auto 5. suivez l'implémentation ci-dessous ou via le lien

lien vers 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
}

0
Ryan Forte