如何在 UITableViewRowAction 中添加图像？

Posted 2023-02-27

【中文标题】如何在 UITableViewRowAction 中添加图像？

【英文标题】：How to add image in UITableViewRowAction?

【发布时间】：2017-06-27 03:21:45

【问题描述】：

我正在尝试以UITableView 滑动样式添加图像。我尝试使用 Emoji 文字及其工作正常

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

  return [editAction]

但我需要图像而不是表情符号，同时我尝试了

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

但它得到了重复的图像，我使用了多种格式的图像，例如 20*20、25*25、50*50，但仍然重复。

如何添加图片？

【问题讨论】：

UITableViewRowAction image for title的可能重复

我相信这可能是您尝试设置的图像大小的问题。请查看this 了解更多信息。

@Jack 试试我的解决方案，希望它能解决你的问题。

你能检查按钮和图像大小吗？他们是平等的吗？

【参考方案1】：

终于在iOS 11，SWIFT 4我们可以在UISwipeActionsConfiguration的帮助下在UITableView的滑动动作中添加添加图片了

@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
    

WWDC video at 28.34

Apple Doc

注意：我使用了 50*50 点的 apple.png 图像和 50 tableview row height

【讨论】：

这是 swift 4 和 ios 11.0 的一个很好的例子，但是更少的版本呢。

见***.com/a/45301272/7576100 正如我在UITableViewRowAction 中发现的那样，它在swift 3 中的功能有限，但是您可以尝试使用具有背景颜色的图像

我有黑色背景的蓝色图像图标。但显示时图像变为白色。有什么想法吗？

@krutika。这是内置的 API。您应该使用自定义滑动。

【参考方案2】：

我的项目遇到了同样的问题，所以我为此做了一个解决方法。 我想，这对你有帮助。

当我向左滑动表格单元格以获取图像宽度时，它工作正常。

但是当我滑动表格单元格超过图像宽度时，表格单元格显示如下：

发生这种情况是因为我使用“backgroundColor”属性添加图像。

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

为了解决这个问题，我将图像宽度增加到与表格宽度相同。

旧图 >>>>>>>>>>>> 新图

>>>>

这是新外观：

这是我的示例代码：

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]

【讨论】：

解决方案中显示图像宽度增加的代码在哪里？

@NileshPol：不需要额外的代码，只需用增加的图像宽度替换

【参考方案3】：

我遇到了同样的问题，并为此发现了一个非常好的 pod，名为 SwipeCellKit，它可以非常容易地将图像实现到滑动单元格操作中，而不会导致显示多个图像的滑动操作。它还允许进行更多自定义，例如不同的滑动方向。

步骤：

添加吊舱 import SwipeCellKit 使单元格符合SwipeTableViewCell 在cellForRow 函数中将单元格委托设置为self 按照下面的实现或通过链接进行操作

链接到 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

【参考方案4】：

我在 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]
    

我们需要确保我们的图像尺寸与单元格行高匹配 这是我使用的图片

【讨论】：

我在UITableViewRowAction 中发现它在 swift 3 中的功能有限，但是您可以尝试使用具有背景颜色的图像。

然后如何根据需要更改“背景颜色”。我需要背景颜色和图像。

@KaziAbdullahAlMamun 对于这种情况，创建自定义滑动。

【参考方案5】：

这是我在objective-c 中的操作方法，翻译后应该在swift 中工作。

- (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];

【参考方案6】：

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? 

    let write = UITableViewRowAction(style: .default, title: "\u1F58A")  action, index in
        print("edit button tapped")
    

    return [write]

试试这个用 unicode 代替的图标。这会工作