如何在UITableViewRowAction中添加图像?

时间:2017-06-27 03:21:46

标签: ios swift uitableview

我正在尝试以UITableView滑动样式添加图片。我尝试使用Emoji text&工作正常

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,但仍然重复。

如何添加图片?

6 个答案:

答案 0 :(得分:17)

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

        return confrigation
    }

WWDC video at 28.34

Apple Doc

注意:我使用了50 * 50点apple.png图片,其中包含50 tableview row height

答案 1 :(得分:4)

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

当我仅向图像宽度向左滑动表格单元格时,它工作正常。

https://www.reddit.com/r/javascript/comments/7pg2rq/webpackdevserver_is_now_in_maintenance_mode/dsgwxjd/?st=jf286v37&sh=0336089c

但是当我刷表格单元格超过图像宽度时,表格单元格显示如下:

enter image description here

这是因为添加图像我使用'backgroundColor'属性。

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

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

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

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

这是新面貌:

enter image description here

这是我的示例代码:

matrix(c(2,12),ncol=2,nrow=1)
     [,1] [,2]
[1,]    2   12

答案 2 :(得分:1)

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

我们需要确保图像尺寸与单元格行高度匹配 这是我使用enter image description here

的图像

答案 3 :(得分:1)

我遇到了同样的问题,并为此找到了一个非常好的盒体SwipeCellKit,它非常容易将图像实现到您的滑动单元动作中,而不会导致显示多个图像。它还允许进行更多自定义,例如不同的滑动方向。 脚步: 1.添加荚 2.导入SwipeCellKit 3.使单元格符合SwipeTableViewCell 4.在cell for row函数中,将单元格委托设置为self 5.按照下面的实施或通过链接

链接到窗格-> 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 :(得分:0)

以下是我在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];
}

答案 5 :(得分:-2)

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

    let write = UITableViewRowAction(style: .default, title: "\u{1F58A}") { action, index in
        print("edit button tapped")
    }

    return [write]
}

尝试使用unicode代替图标。这将有效