UITableViewRowAction 標題作為圖像圖標而不是文本

Question

我想在 Swift 的 tableviewCell 中的滑動操作中放置圖標（圖像）而不是文本。

但我不知道如何放置圖像而不是標題文本？

我的代碼如下：

func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [AnyObject]?  {

    var shareAction = UITableViewRowAction(style: UITableViewRowActionStyle.Default, title: "Share" , handler: { (action:UITableViewRowAction!, indexPath:NSIndexPath!) -> Void in
        // 2
        let shareMenu = UIAlertController(title: nil, message: "Share using", preferredStyle: .ActionSheet)

        let twitterAction = UIAlertAction(title: "Twitter", style: UIAlertActionStyle.Default, handler: nil)
        let cancelAction = UIAlertAction(title: "Cancel", style: UIAlertActionStyle.Cancel, handler: nil)

        shareMenu.addAction(twitterAction)
        shareMenu.addAction(cancelAction)


        self.presentViewController(shareMenu, animated: true, completion: nil)
    })
    // 3
    var rateAction =    (style: UITableViewRowActionStyle.Default, title: "rate",im , handler: { (action:UITableViewRowAction!, indexPath:NSIndexPath!) -> Void in
        // 4

        let rateMenu = UIAlertController(title: nil, message: "Rate this App", preferredStyle: .ActionSheet)

        let appRateAction = UIAlertAction(title: "Rate", style: UIAlertActionStyle.Default, handler: nil)
        let cancelAction = UIAlertAction(title: "Cancel", style: UIAlertActionStyle.Cancel, handler: nil)

        rateMenu.addAction(appRateAction)
        rateMenu.addAction(cancelAction)


        self.presentViewController(rateMenu, animated: true, completion: nil)
    })

    // 5
    return [shareAction,rateAction]
}

你能幫我解決這個問題嗎？

提前致謝

Answer 1

有兩種方法可以實現這一點。

• 在您的文本中使用 Unicode 字符，如果它符合您的目的，但是 unicode 字符是有限的。
• 使用表情符號，前提是它符合您的目的。

這就是你在代碼中的做法

 override func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? {
    let delete = UITableViewRowAction(style: .Default, title: "\u{267A}\n Delete") { action, index in
        print("more button tapped")
        self.tableView(tableView, commitEditingStyle: UITableViewCellEditingStyle.Delete, forRowAtIndexPath: indexPath)
    }
    delete.backgroundColor = UIColor(rgba: "#ef3340")

    let apply = UITableViewRowAction(style: .Default, title: "\u{2606}\n Like") { action, index in
        print("favorite button tapped")
        self.tableView(tableView, commitEditingStyle: UITableViewCellEditingStyle.Insert, forRowAtIndexPath: indexPath)
    }
    apply.backgroundColor = UIColor.orangeColor()

    let take = UITableViewRowAction(style: .Normal, title: "\u{2605}\n Rate") { action, index in
        print("share button tapped")
        self.tableView(tableView, commitEditingStyle: UITableViewCellEditingStyle.None, forRowAtIndexPath: indexPath)
    }
    take.backgroundColor = UIColor(rgba: "#00ab84")

    return [take, apply, delete]
}

這就是我可以通過上述方式實現的目標 -

Answer 2

在iOS 11 中，Apple 提供了一種方法來幫助我們做到這一點。 您需要實現 2 個函數來向左或向右滑動單元格

public func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
public func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?

例如：

func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let deleteAction = UIContextualAction(style: .normal, title:  "", handler: { (ac:UIContextualAction, view:UIView, success:(Bool) -> Void) in
            // Call edit action

            // Reset state
            success(true)
        })
        deleteAction.image = UIImage(named: "ic_delete")
        deleteAction.backgroundColor = .red
        return UISwipeActionsConfiguration(actions: [deleteAction])
    }

如果你想將它應用於iOS < 11.0 ，你可以通過一個棘手的方式來完成

func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? {

        let deleteAction = UITableViewRowAction(style: .default, title: "") { action, indexPath in
            // Handle delete action
        }
        (UIButton.appearance(whenContainedInInstancesOf: [UIView.self])).setImage(UIImage(named: "ic_delete"), for: .normal)
        return [deleteAction]
    }

Answer 3

不是斯威夫特，但對於任何來到這里尋找解決方案的人......我用以下簡單的子類得到了很好的結果：

@interface GSBTableViewRowAction : UITableViewRowAction
@property UIImage *icon;
@property UIFont *font;
+ (instancetype)rowActionWithStyle:(UITableViewRowActionStyle)style title:(NSString *)title icon:(UIImage*)icon handler:(void (^)(UITableViewRowAction *action, NSIndexPath *indexPath))handler;
@end

@implementation GSBTableViewRowAction
+ (instancetype)rowActionWithStyle:(UITableViewRowActionStyle)style title:(NSString *)title icon:(UIImage*)icon handler:(void (^)(UITableViewRowAction *action, NSIndexPath *indexPath))handler
{
    if (title.length) title = [@"\n" stringByAppendingString:title]; // move title under centerline; icon will go above
    GSBTableViewRowAction *action = [super rowActionWithStyle:style title:title handler:handler];
    action.icon = icon;
    return action;
}

- (void)_setButton:(UIButton*)button
{
    if (self.font) button.titleLabel.font = self.font;
    if (self.icon) {
        [button setImage:[self.icon imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] forState:UIControlStateNormal];
        button.tintColor = button.titleLabel.textColor;
        CGSize titleSize = [button.titleLabel.text sizeWithAttributes:@{NSFontAttributeName:button.titleLabel.font}];
        button.imageEdgeInsets = UIEdgeInsetsMake(-(titleSize.height/2 + 5), 0, 0, -titleSize.width); // +5px gap under icon
    }

rowActionWithStyle:title:icon:handler實際上只是一種方便的方法 - “秘訣”覆蓋了（私有？）_setButton 方法 [為此歸功於 Jayesh！]。

這將為您提供一個以標題為中心的圖標，或者如果您將標題留空，則僅顯示圖標。 不幸的是，您不能使用button.titleEdgeInsets來button.titleEdgeInsets標題的位置，就像您可以使用button.titleEdgeInsets一樣，所以我能做的就是將標題立即放在中心線下方（因此是“\\n”），並在圖標下方imageEdgeInsets出一個小間隙（ 5px 以上）。 結果看起來像

作為獎勵，您還可以通過設置新的font屬性來更改標題字體，比如更小的font 。 例如，上面的“添加”操作是通過

GSBTableViewRowAction *add = [GSBTableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal
                                                               title:@"Add"
                                                                icon:[UIImage imageNamed:@"Today-25"]
                                                             handler:^(UITableViewRowAction *action, NSIndexPath *indexPath){
                                                                 [self addToCalendar:self];
                                                                 [tableView setEditing:NO animated:YES];
                                                             }];
add.font = [UIFont preferredFontForTextStyle:UIFontTextStyleFootnote];
add.backgroundColor = UIColor.orangeColor;

警告：_setButton 是私有 API，所以 YMMV ......我們都希望 Apple 將公開一個公共 API 來做他們在 Mail.app 中明顯做的事情 [原文如此]

Answer 4

嘗試這個

func tableView(tableView: UITableView, editActionsForRowAtIndexPath indexPath: NSIndexPath) -> [UITableViewRowAction]? {

    let remove = UITableViewRowAction(style: .Default, title: "      ") { action, indexPath in


        print("delete button tapped")
    }

    remove.backgroundColor = UIColor(patternImage: UIImage(named: "Delete")!)

    return [remove]
}

Answer 5

檢查以下工作代碼

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


            let backView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: tableView.frame.size.height))
            backView.backgroundColor = UIColor(red: 239/255.0, green: 34/255.0, blue: 91/255.0, alpha: 1.0)

            let frame = tableView.rectForRow(at: indexPath)


            let myImage = UIImageView(frame: CGRect(x: 20, y: frame.size.height/2-20, width: 35, height: 35))
            myImage.image = UIImage(named: "delete_white")!
            backView.addSubview(myImage)

            let imgSize: CGSize = tableView.frame.size
            UIGraphicsBeginImageContextWithOptions(imgSize, false, UIScreen.main.scale)
            let context = UIGraphicsGetCurrentContext()
            backView.layer.render(in: context!)
            let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
            UIGraphicsEndImageContext()

            let deleteAction = UITableViewRowAction(style: .destructive, title: "           ") {
                (action, indexPath) in
                self.deleteCartItem(indexPath: indexPath )
                self.addWebtrendsForCart(path: "/Basket/EditBasket", description: "Edit Basket")
            }

             deleteAction.backgroundColor = UIColor(patternImage: newImage)
             return \[deleteAction\]
        }

Answer 6

trailingSwipeActionsConfigurationForRowAtIndexPath僅適用於 iOS 11，並且完全不可定制。 您可以更改按鈕的背景顏色，但即使您使用UIImageRenderingModeAlwaysOriginal也無法使用您自己的顏色添加圖像。

我最終使用了MGSwipeTableCell 。

Answer 7

我正在尋找做同樣的事情並在這里找到答案。 這是一種解決方法。

此外，從 iOS 9 測試版中可以看出，我認為這是可能的，但我還沒有看過 API。

Answer 8

如果您使用“Apps Wise”（ https://stackoverflow.com/a/32735211/6249148 ）的答案，則可以將此表用於常見的unicode字符： https : //tutorialzine.com/2014/12/you-dont -need-icons-here-are-100-unicode-symbols-that-you-can-use

或者這個適用於所有 unicode 字符： https : //unicode-table.com/en/#control-character