2016-04-07 3 views
8

Как добавить пользовательскую картинку для удаления кнопки при прокручивании ячейки справа на UITableview, как показано на рисунке ниже?Как добавить изображение в строку действий в виде таблицы?

enter image description here

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

    let remove = UITableViewRowAction(style: .Default, title: "\nRemove") { action, indexPath in } 
    remove.backgroundColor = UIColor(patternImage: UIImage(named: "remove")!) } 

Из приведенного выше кода, изображение показывает, но, она показывает, как группа изображений сложены вместе. Я имею в виду, что я не могу установить "ContentMode" на ".ScaleToAspectFit" для "UIImage"

Каков наилучший способ для этого подхода?

образец код может быть заметным.

+1

https://github.com/MortimerGoro/MGSwipeTableCell должен быть полезным –

+0

Ответил здесь - https://stackoverflow.com/questions/44771778/how-to-add-image-in-uitableviewrowaction/45301272#45301272 – Jack

ответ

4

попробовать этот

let backImage = UIImageView(image: UIImage(named: "remove")) 
backImage.contentMode = .scaleAspectFit 
remove.backgroundColor = UIColor(patternImage:backImage.image!) 

Choice-2

var img: UIImage = UIImage(named: "remove") 
var imgSize: CGSize = tableView.frame.size 
UIGraphicsBeginImageContext(imgSize) 
img.drawInRect(CGRectMake(20, 0, 20, 20)) 
var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext() 
UIGraphicsEndImageContext() 
remove.backgroundColor = UIColor(patternImage: newImage) 
+0

Спасибо Anbu. Я уже пробовал первый подход, но не использовал. Теперь, при попытке второго подхода, отображается ошибка 'Значение типа 'UITableViewRowAction' не имеет членского фрейма' '. Я понял, что нам нужно дать высоту и ширину действия. – kumar

+0

мы не можем использовать высоту tableView, так как она намного больше, чем строка справа? – kumar

+0

@kumar - ok выбор нет 2 работает правильно, если да, мы делаем следующий шаг –

4

По существу, вы рисуете в контексте, а затем получить новое изображение из контекста.

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 80, height: 100)) 
label.text = "ADD" 
label.textAlignment = .Center 
label.textColor = UIColor.whiteColor() 

let img: UIImage = UIImage(named: "delete") 

UIGraphicsBeginImageContextWithOptions(imgSize, false, UIScreen.mainScreen().scale) 
let context = UIGraphicsGetCurrentContext() 

// Set background color 
CGContextSetFillColorWithColor(context, UIColor.raangeRed().CGColor) 
CGContextFillRect(context, CGRect(x: 0, y: 0, width: 80, height: 80)) 

// Draw image 
img.drawInRect(CGRectMake(30, 15, 20, 20)) 

// Draw View 
label.layer.renderInContext(context!) 

// Retrieve new UIImage 
let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext() 
UIGraphicsEndImageContext() 

let deleteRowAction = UITableViewRowAction(style: .Normal, title: "   ") { (rowAction, indexPath) in 
    // Do stuff 
    } 
deleteRowAction.backgroundColor = UIColor(patternImage: newImage) 

Вы также можете создать пользовательский вид (с UIImageView и UILabel) и сделать его в контексте.

+0

Ничего себе, отличный пример! Спасибо, что вы указали, как использовать CGContext для рисования метки и применения цвета фона! Только то, что мне нужно – daisura99

+0

Хотя ярлык кажется слегка «размытым» и не дает приятного визуального. Это определенно будет работать лучше, если изображение также содержит текст. – daisura99

+0

Точно, в зависимости от вашего дизайнера, если вы оба согласитесь, будут ли кнопки динамическими или нет –

3

Вдохновленный ответом Денни. Вот объективная версия его кода.

- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath { 

    UITableViewRowAction *deleteAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"   " handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) 
    { 
     UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Do you really want to delete this comment?" message:@"" delegate:self cancelButtonTitle:@"NO" otherButtonTitles:@"YES", nil]; 

     [alertView setTag:101]; 
     [alertView show]; 
    }]; 

    UITableViewCell *commentCell = (UITableViewCell *)[tableView cellForRowAtIndexPath:indexPath]; 

    CGFloat height = commentCell.frame.size.height; 

    UIImage *backgroundImage = [self deleteImageForHeight:height]; 

    deleteAction.backgroundColor = [UIColor colorWithPatternImage:backgroundImage]; 

    return @[deleteAction]; 
} 

И ниже метод рисования изображения:

- (UIImage*)deleteImageForHeight:(CGFloat)height{ 

    CGRect frame = CGRectMake(0, 0, 62, height); 

    UIGraphicsBeginImageContextWithOptions(CGSizeMake(62, height), NO, [UIScreen mainScreen].scale); 

    CGContextRef context = UIGraphicsGetCurrentContext(); 

    CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor); 
    CGContextFillRect(context, frame); 

    UIImage *image = [UIImage imageNamed:@"icon-delete"]; 

    [image drawInRect:CGRectMake(frame.size.width/2.0, frame.size.height/2.0 - 10, 18, 20)]; 

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext(); 

    UIGraphicsEndImageContext(); 

    return newImage; 
} 

И результат: Table view cell delete image