UITableViewRowAction标题为图像图标而不是文本

时间:2015-01-02 10:45:25

标签: ios uitableview swift

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

有人可以帮助我吗?

提前致谢

8 个答案:

答案 0 :(得分:50)

有两种方法可以实现这一目标。

  • 如果符合您的目的,请在文本中使用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]
}

这是我可以通过上述方式实现的目标 -

enter image description here

答案 1 :(得分:23)

iOS 11 中,Apple提供了一种帮助我们实现这一目标的方法。 您需要实现两个功能才能向左或向右滑动单元格

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

答案 2 :(得分:3)

试试这个

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

enter image description here

答案 3 :(得分:3)

检查以下工作代码

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="it.dobeedo.dobeedo.Activities.MainActivity">

<include
    android:id="@+id/action_bar"
    layout="@layout/action_bar"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />


<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:layout_constraintBottom_toTopOf="@+id/navigationView"
    app:layout_constraintTop_toBottomOf="@+id/action_bar" />

<android.support.design.widget.BottomNavigationView
    android:id="@+id/navigationView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:itemBackground="@color/colorPrimary"
    app:itemIconTint="@color/colorPrimaryDark"
    app:itemTextColor="@color/colorAccent"
    app:menu="@menu/bottom_navigation"/>

</android.support.constraint.ConstraintLayout>

enter image description here

答案 4 :(得分:2)

不是Swift,但对于那些寻找解决方案的其他人来说......我通过以下简单的子类得到了很好的结果:

@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来调整标题的位置,就像你可以imageEdgeInsets一样,所以我能做的最好就是把标题放在中心线下面(因此'\ n')图标下方的小间隙(5px以上)。结果看起来像

row action with title + icon

作为奖励,您还可以通过设置新的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中做的事情[原文如此]

答案 5 :(得分:1)

我希望做同样的事情并找到答案here。这是一个解决方法。

另外,从iOS 9测试版看,我认为这是可能的,但我还没有看过API。

答案 6 :(得分:1)

constraints仅适用于iOS 11,完全无法自定义。您可以更改按钮的背景颜色,但即使使用RelativeLayout,也无法使用自己的颜色添加图像。

我最终使用trailingSwipeActionsConfigurationForRowAtIndexPath

答案 7 :(得分:0)

如果使用&#34; Apps Wise&#34;(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