使用tableView中的按钮/图像:editActionsForRowAt:

时间:2018-02-02 16:08:25

标签: ios swift uitableview uitableviewrowaction

我正在尝试使用tableView:editActionsForRowAt :,具有带图像的按钮而不是通常的文本。 但是有一些挑战。有人可以帮助我吗?

首先,我已经在工作了, - 在SOF的一些宝贵帮助下 -

enter image description here

这就是我想要理想的结果:

enter image description here

相关代码如下。当xShift和xShiftInc都设置为0.0时,获得上面的第一种情况。 第二种情况是通过将xShift初始化为30.0并将xShiftInc初始化为20.0来获得的。

以图形方式我得到了我想要的结果,但问题是按钮的触摸区域没有像图像一样移动。换句话说,在第二种情况下,如果我触摸垃圾,它会打印出#B; upBtn触及!"。 触及" rmvBtn!"打印我需要触摸垃圾的左边。

除此之外,我对使用46.0作为单元格的高度感到不满意,我想要一个更通用的参数(rowHeigh等于-1因此无法使用)。但这是一个不同的问题。

func tableView(_ tableView: UITableView,
               editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {
    var patternImg:UIImage?, xShift = CGFloat(30.0)//CGFloat(0.0)//
    let xShiftInc = CGFloat(20.0)//CGFloat(0.0)//

    let downBtn = UITableViewRowAction(style: .normal, title: "") {
        action, index in
        print("downBtn touched!")
    }
    patternImg = swipeCellImage(named: "DownIcn", side: 46.0, horizOffSet: xShift)
    downBtn.backgroundColor = UIColor(patternImage: patternImg!)

    let upBtn = UITableViewRowAction(style: .normal, title: "") {
        action, index in
        print("upBtn touched!")
    }
    xShift += xShiftInc
    patternImg = self.swipeCellImage(named: "UpIcn", side: 46.0, horizOffSet: xShift)
    upBtn.backgroundColor = UIColor(patternImage: patternImg!)

    let rmvBtn = UITableViewRowAction(style: .destructive, title: "") {
        action, index in
        print("rmvBtn touched!")
    }
    xShift += xShiftInc
    patternImg = swipeCellImage(named: "TrashIcn", side: 46.0, horizOffSet: xShift)
    rmvBtn.backgroundColor = UIColor(patternImage: patternImg!)

    return [downBtn,upBtn,rmvBtn]
}


func swipeCellImage(named name: String, side: CGFloat, horizOffSet: CGFloat) -> UIImage? {
    let theImage = UIImage(named: name)
    UIGraphicsBeginImageContextWithOptions(CGSize(width: UIScreen.main.bounds.width,
                                                  height: side), false, UIScreen.main.scale)
    let context = UIGraphicsGetCurrentContext()
    context!.setFillColor(UIColor.clear.cgColor)
    theImage?.draw(in: CGRect(x: horizOffSet, y: 0, width: side, height: side))
    let resultImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return resultImage
}

1 个答案:

答案 0 :(得分:1)

简单的逻辑.. !!手动我们不给xshift和xshiftinc。

案例1:

let downBtn = UITableViewRowAction(style: .normal, title: "") {
        action, index in
        print("downBtn touched!")
}

这里标题的文字是“”[没有空格的空字符串]

enter image description here

因此,tableview自动获取每个宽度30px。如果我们添加文本,它会自动增加宽度大小。

案例2:

let downBtn = UITableViewRowAction(style: .normal, title: " ") {
        action, index in
        print("downBtn touched!")
}

这里标题的文字是“”[空格1空格]

enter image description here

因此,tableview自动获取宽度为35px。

希望你能理解上述事情。

现在,我修改了你的代码。

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


    let cell = tableView.cellForRow(at: indexPath) as!      myTableViewCell

    print("cell_height    ", cell.frame.size.height) // U MAY GET ROW HEIGHT HERE

    var patternImg:UIImage?

    let downBtn = UITableViewRowAction(style: .normal, title: "  ") {
        action, index in
        print("downBtn touched!")
    }
    patternImg = swipeCellImage(named: "down", rowHeight: cell.frame.size.height)
    downBtn.backgroundColor = UIColor(patternImage: patternImg!)

    let upBtn = UITableViewRowAction(style: .normal, title: "  ") {
        action, index in
        print("upBtn touched!")
    }

    patternImg = self.swipeCellImage(named: "up", rowHeight: cell.frame.size.height)
    upBtn.backgroundColor = UIColor(patternImage: patternImg!)

    let rmvBtn = UITableViewRowAction(style: .destructive, title: "  ") {
        action, index in
        print("rmvBtn touched!")
    }

    let patternIm = swipeCellImage(named: "trash", rowHeight: cell.frame.size.height)

    rmvBtn.backgroundColor = UIColor(patternImage: patternIm!)


    return [downBtn,upBtn,rmvBtn]
}


func swipeCellImage(name: String, rowHeight: CGFloat) -> UIImage? {

    let imgYposition : CGFloat = (rowHeight - 30) / 2

    // NOTE: This 30px is image height. Image height is always should be less than Rowheight.

    let theImage = UIImage(named: name)
    UIGraphicsBeginImageContextWithOptions(CGSize(width: UIScreen.main.bounds.width,
                                                  height: rowHeight), false, UIScreen.main.scale)
    let context = UIGraphicsGetCurrentContext()
    context!.setFillColor(UIColor.yellow.cgColor)
    context!.fill(CGRect(x: 0, y: 0, width: (self.view.frame.width) / 3, height: side))

    theImage?.draw(in: CGRect(x: 5, y: imgYposition, width: 30, height: 30))

    // In this sample, am taking rowHeight as 44px.
    // Images should be 30 * 30 sizes.
    // I gave two spaces in title. So total width is 40px.
    // So,x = 5px and y = 7px.

    let resultImage : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return resultImage
}

<强>输出

enter image description here

如果您想在三个按钮之间留出更多空隙,只需增加标题的空文本并计算宽度并保持图像中心。