9

那里有几个类似的问题，但我认为应该有一个最新的 iOS 10 答案，使用 Swift3，不使用私有 API，并且不依赖于你将你的图标限制为 unicode表情符号。

我现在有三个动作的表格行：

func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
    let rename = UITableViewRowAction(style: .normal, title: "Rename") { (_, indexPath) in
        self.renameEntry(indexPath)
    }
    let locate = UITableViewRowAction(style: .normal, title: "Locate") { (_, indexPath) in
        self.locateEntry(indexPath)
    }
    locate.backgroundEffect = UIVisualEffect()
    let delete = UITableViewRowAction(style: .default, title: "Forget") { (_, indexPath) in
        self.deleteEntry(indexPath)
    }
    return [delete, locate, rename]
}

在此处输入图像描述

但是，我想要的不是带有中心文本的颜色方块，其大小和样式不是我选择的，而是：

在此处输入图像描述

我尝试使用背景颜色，但这只是将我的图像平铺在按钮上，并没有改变文本的位置或颜色。所以它必须不仅仅是

theAction.backgroundColor = UIColor(patternImage: UIImage(named: "renameImage")!)

有没有这样做的好方法？

4

3 回答 3

7

我最终做的是动态生成图像作为背景。这需要使用一两个黑客/聪明的技巧。

第一部分是标准委托方法：

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

    let stockWidth = String(repeating: " ", count: 8)
    let rename = UITableViewRowAction(style: .normal, title: stockWidth) { (_, indexPath) in
        self.renameEntry(indexPath)
    }
    self.fixAction(rename, text: "Rename", image: UIImage(named: "pencilEdit")!, color: UIColor(52, 61, 70))
    let locate = UITableViewRowAction(style: .normal, title: stockWidth) { (_, indexPath) in
        self.locateEntry(indexPath)
    }
    self.fixAction(locate, text: "Locate", image: UIImage(named: "locatePin")!, color: UIColor(38, 107, 215))
    let delete = UITableViewRowAction(style: .normal, title: stockWidth) { (_, indexPath) in
        self.deleteEntry(indexPath)
    }
    self.fixAction(delete, text: "Forget", image: UIImage(named: "triggerDeleteSelector")!, color: UIColor(227, 34, 60))
    let gap = UITableViewRowAction(style: .normal, title: "") { (_, _) in
        // pass
    }
    gap.backgroundColor = UIColor.clear
    return [gap, delete, locate, rename]
}

那里有两个不明显的细节。首先，动作从传入的文本字符串派生出它的宽度。如果你没有通过一些不可见的空格字符给它一些宽度，背景图像将没有任何要绘制的区域。这就是原因stockWidth前 3 个动作中使用的字符串。它的 8 个字符宽度由fixAction生成背景图像的方法共享。

第二个细节是在底部包含第四个“间隙”动作。出于某种原因，如果第一个动作有一个平铺图案的背景涂料，它将在其他动作下方向左延伸。我发现我必须在前面插入这个零宽度无操作操作以避免这种情况。

func fixAction(_ action:UITableViewRowAction, text:String, image:UIImage, color:UIColor) {
    // make sure the image is a mask that we can color with the passed color
    let mask = image.withRenderingMode(.alwaysTemplate) 
    // compute the anticipated width of that non empty string
    let stockSize = action.title!.sizeWithAttributes([NSFontAttributeName: UIFont.systemFont(ofSize: 18)])
    // I know my row height
    let height:CGFloat = 70
    // Standard action width computation seems to add 15px on either side of the text
    let width = (stockSize.width + 30).ceiling 
    let actionSize = CGSize(width: width, height: height)
    // lets draw an image of actionSize
    UIGraphicsBeginImageContextWithOptions(actionSize, false, 0.0)
    if let context = UIGraphicsGetCurrentContext() {
        context.clear(CGRect(origin: .zero, size: actionSize))
    }
    color.set()
    let attributes = [NSForegroundColorAttributeName: color, NSFontAttributeName: UIFont(name: "Avenir-Book", size: 13)]
    let textSize = text.size(attributes: attributes)
    // implementation of `half` extension left up to the student
    let textPoint = CGPoint(x: (width - textSize.width).half, y: (height - (textSize.height * 3)).half + (textSize.height * 2))
    text.draw(at: textPoint, withAttributes: attributes)
    let  maskHeight = textSize.height * 2
    let maskRect = CGRect(x: (width - maskHeight).half, y: textPoint.y - maskHeight, width: maskHeight, height: maskHeight)
    mask.draw(in: maskRect)
    if let result = UIGraphicsGetImageFromCurrentImageContext() {
        // adjust the passed in action's backgroundColor to a patternImage
        action.backgroundColor = UIColor(patternImage: result)
    }
    else {
        "WTH!!!".logError()
    }
    UIGraphicsEndImageContext()
}
于 2017-01-24T01:03:09.260 回答
1

如果您不想失去自动布局的好处并获得高质量的 UI，我建议您自己在单元格和三个自定义操作视图上实现滑动手势。您还可以使用图案图像中的 UIColor 将其设置为背景https://developer.apple.com/reference/uikit/uicolor/1621933-init 但是您应该已经在图像中呈现了图标和文本这样做并且可能看起来并不适合所有设备，在某些时候图像可能会被拉伸。

于 2017-01-17T23:59:03.980 回答
0

在 iOS 13 上， UITableViewRowAction 已弃用，而是使用UISwipeActionsConfiguration，您可以在此处根据要求添加图像和背景颜色

于 2020-04-01T09:45:37.413 回答