在tableView:editActionsForRowAt中使用按钮/图像: [英] Using buttons/images in tableView:editActionsForRowAt:

问题描述

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

I am trying to use tableView:editActionsForRowAt:, having buttons with images instead of the usual texts. But there are some challenges. Can some one help me?

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

First here is what I have already working, -- with some precious help from SOF --

这是我理想中想要得到的:

and here is what I would like to get ideally:

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

The relevant code is below. The first case above is obtained when having xShift and xShiftInc both set to 0.0. The second case is obtained by initializing xShift to 30.0 and xShiftInc to 20.0.

从图形上我得到了想要的结果，但是问题是按钮的触摸区域没有像图像一样移动.换句话说，在第二种情况下，如果我触摸垃圾桶，则会打印"upBtn touched！". 要获得"rmvBtn感动！"打印，我需要触摸垃圾箱的左侧.

Graphically I get the result I want, but the problem is that the touch areas for the buttons have not moved as the image. In other words in the second case, if I touch the trash it prints "upBtn touched!". To get "rmvBtn touched!" printed I need touch at the left of the trash.

此外，我对使用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
}

推荐答案

简单的逻辑.. !!手动不提供xshift和xshiftinc.

Simple logic..!! Manually we dont give xshift and xshiftinc.

案例1:

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

此处的标题文本为" [无空格的空字符串]

Here title's text is "" [empty string with no spaces]

因此，tableview会自动为每个宽度设置30px的宽度.如果我们添加文本，它将自动增加其宽度大小.

So, tableview automatically takes width 30px for each one. If we add text, it will increase it width sizes automatically.

案例2:

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

此处的标题文本为" [带1个空格的空字符串]

Here title's text is "" [empty string with 1 space]

因此，tableview为此自动采用35px的宽度.

So, tableview automatically takes width 35px for this.

希望您能理解以上内容.

Hope you understand above thing.

现在，我修改了您的代码.

Now, I modified your code.

 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
}

输出

如果要在三个按钮之间留出更大的空隙，只需增加标题的空白文本并计算宽度并保持图像居中即可.

If you want to give more gap between three buttons, just increase title's empty text and calculate width and keep your image center.

这篇关于在tableView:editActionsForRowAt中使用按钮/图像:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！