[英]UITableViewRowAction title as image icon instead of text
I want put the icon (image) instead of text in swipe actions in tableviewCell in Swift.我想在 Swift 的 tableviewCell 中的滑动操作中放置图标(图像)而不是文本。
But i dont how to put the image instead of title text?但我不知道如何放置图像而不是标题文本?
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]
}
Can you someone pls help me on this?你能帮我解决这个问题吗?
Thanks in advance提前致谢
There are two ways you can achieve this.有两种方法可以实现这一点。
This is how you do it in the code这就是你在代码中的做法
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]
}
This is what I could achieve by above mentioned ways -这就是我可以通过上述方式实现的目标 -
In iOS 11 , Apple provides a way to help us do that.在iOS 11 中,Apple 提供了一种方法来帮助我们做到这一点。 There are 2 functions you need to implement to swipe cell to left or right
您需要实现 2 个函数来向左或向右滑动单元格
public func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
public func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration?
For example:例如:
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])
}
If you want to apply it for iOS < 11.0 , you can do it by a tricky way如果你想将它应用于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]
}
Not Swift, but for anybody else who lands here looking for a solution... I've got good results with the following simple subclass:不是斯威夫特,但对于任何来到这里寻找解决方案的人......我用以下简单的子类得到了很好的结果:
@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
}
The rowActionWithStyle:title:icon:handler
is really just a convenience method - the 'secret sauce' is overriding the (private?) _setButton method [credit to Jayesh for this!]. rowActionWithStyle:title:icon:handler
实际上只是一种方便的方法 - “秘诀”覆盖了(私有?)_setButton 方法 [为此归功于 Jayesh!]。
This will give you an icon centered over the title, or just the icon alone if you leave the title nil.这将为您提供一个以标题为中心的图标,或者如果您将标题留空,则仅显示图标。 Unfortunately, you cant fiddle with the position of the title using
button.titleEdgeInsets
, like you can imageEdgeInsets
, so best I can do is put the title immediately under the centerline (hence the '\\n') with a small gap under the icon (5px above).不幸的是,您不能使用
button.titleEdgeInsets
来button.titleEdgeInsets
标题的位置,就像您可以使用button.titleEdgeInsets
一样,所以我能做的就是将标题立即放在中心线下方(因此是“\\n”),并在图标下方imageEdgeInsets
出一个小间隙( 5px 以上)。 Results look like结果看起来像
As a bonus, you can also change the title font, to say something smaller, by setting the new font
property.作为奖励,您还可以通过设置新的
font
属性来更改标题字体,比如更小的font
。 eg the above 'Add' action was accomplished with例如,上面的“添加”操作是通过
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;
Caveat: _setButton is private API, so YMMV... We're all hoping Apple will expose a public API to do what they apparantly do in their Mail.app [sic]警告:_setButton 是私有 API,所以 YMMV ......我们都希望 Apple 将公开一个公共 API 来做他们在 Mail.app 中明显做的事情 [原文如此]
Try this尝试这个
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]
}
Check below working code检查以下工作代码
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\]
}
trailingSwipeActionsConfigurationForRowAtIndexPath
works from iOS 11 only and is completely not customizable. trailingSwipeActionsConfigurationForRowAtIndexPath
仅适用于 iOS 11,并且完全不可定制。 You can change background color of a button, but you cannot add an image with you own colors even if you use UIImageRenderingModeAlwaysOriginal
.您可以更改按钮的背景颜色,但即使您使用
UIImageRenderingModeAlwaysOriginal
也无法使用您自己的颜色添加图像。
I ended up using MGSwipeTableCell
.我最终使用了
MGSwipeTableCell
。
If you use answer of "Apps Wise"( https://stackoverflow.com/a/32735211/6249148 ), you can use this table for common unicode characters: https://tutorialzine.com/2014/12/you-dont-need-icons-here-are-100-unicode-symbols-that-you-can-use如果您使用“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
Or this one for ALL unicode characters: https://unicode-table.com/en/#control-character或者这个适用于所有 unicode 字符: https : //unicode-table.com/en/#control-character
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.