Як зробити комірку таблиці зрушуваної для відображення додаткових опцій в додатках iOS

Як перекладач заздалегідь прошу вибачення за можливі помилки в перекладі. Буду вдячний повідомленнями про помилки для їх якнайшвидшого виправлення.

Коли iOS 7 була вперше анонсована, одним з багатьох візуальних нововведень, що особливо зацікавило мене, був жест swipe-to-delete (смахни щоб видалити) у додатку Mail. Ви вже давно чудово знайомі з цією функцією програми. Після того як проводите по комірці таблиці, ви бачите кнопки кошика, додаткових опцій («Ще») і помітки листи прапором. При натисканні на кнопку «Ще» стає активною панель вибору дії, на якій ви можете вибрати одну з опцій дії з листом — Відповісти, Помітити прапором і т. д.

Думаю, що це відмінний інструмент для маніпулювання записами таблиці. Однак, як ви чудово знаєте, що Apple не надає цій можливості для розробників iOS 7. Ви можете лише додати жест для функції видалення записів з таблиці. Інші опції роботи з записом таблиці обмежені стандартним додатком Mail. Поняття не маю чому Apple обмежує використання такого прекрасного інструменту тільки своїми додатками. На щастя, деякі розробники створили рішення (такі як UITableView-Swipe-for-Options, MCSwipeTableViewCell) і зробили їх абсолютно безкоштовними.

У цьому уроці я буду використовувати бібліотеку SWTableViewCell. Подивимося, як вона допоможе нам реалізувати функцію swipe-to-show-options (смахни щоб побачити опції) у вашому додатку. SWTableViewCell досить проста у використанні і якщо ви розумієте як працює UITableView, у вас не повинно виникнути проблем з SWTableViewCell. Крім того, цей компонент підтримує відображення кнопок опцій при свайпе в обидві сторони. Ви швидко зрозумієте що це означає.

Отже, давайте приступимо і створимо наше демонстраційне додаток.



Шаблон проекту XCode для демонстраційного додатка

Я настійно рекомендую вам створити проект демонстраційного додатка з нуля. Однак для того щоб сфокусуватися виключно на використанні бібліотеки SWTableViewCell, я підготував шаблон проекту для вас. Ви можете завантажити тут. Якщо ви знаєте, як створити подання користувача таблиці, ви повинні зрозуміти як працює цей шаблон. Після того як ви завантажите його, можете спробувати скомпілювати і запустити проект. Додаток повинен відобразити список зображень-патернів (люб'язно наданих thepatternlibrary.com).



Додавання бібліотеки SWTableViewCell в наш проект

SWTableViewCell розроблена Крісом Ванделом (Chris Wendel) і абсолютно безкоштовно доступна на GitHub. Для її використання, спочатку скачайте її з GitHub, розпакуйте архів і додайте розпаковані файлу в групу SWTableViewCell або PodFiles у вашому проекті.



Використання SWTableViewCell

Бібліотеку SWTableViewCell дуже просто використовувати. Якщо ви знайомі з UITableView і UITableViewCell, ви не повинні зазнати труднощів з її використанням. Ось що ви повинні зробити:

1. Вибрати в якості класу, який буде обслуговувати осередки нашої таблиці SWTableViewCell замість UITableViewCell. SWTableViewCell насправді успадковується від UITableViewCell, надаючи додаткові інструменти відображення кнопок опцій при свайпе по комірці таблиці.
2. Модифікувати метод cellForRowAtIndexPath: для створення нових кнопок — SWTableViewCell надає дві властивості з іменами leftUtilityButtons rightUtilityButtons. Ці дві властивості надають собою набори кнопок опцій, показуються при свайпах вправо і вліво відповідно. Ви повинні попередньо створити масиви кнопок опцій і присвоїти їм всі необхідні властивості. При цьому не обов'язково призначати набори кнопок відразу обом властивостям leftUtilityButtons rightUtilityButtons.
3. Реалізувати протокол SWTableViewCellDelegate. Методи цього протоколу дозволяють розробникам керувати діями додаткових кнопок. Коли користувач зробить свайп по комірці таблиці, ця клітинка покаже набір кнопок опцій. В залежності від напрямку свайпа, при натисканні на кнопку опції буде викликаний один з методів didTriggerRightUtilityButtonWithindex: або didTriggerLeftUtilityButtonWithIndex:. Ви повинні реалізувати ці методи для реакції на натиснення кнопок.

Щож давайте змінимо шаблон програми для використання SWTableViewCell.

Зміна класу обслуговуючого Table View Cell на SWTableViewCell

Для початку відкрийте файл CustomTableViewCell.h і змініть батьківський клас на SWTableViewCell. Ваш код повинен виглядати приблизно так після внесення змін:

#import <UIKit/UIKit.h>
#import "SWTableViewCell.h"

@interface CustomTableViewCell : SWTableViewCell
@property (weak, nonatomic) IBOutlet UIImageView *patternImageView;
@property (weak, nonatomic) IBOutlet UILabel *patternLabel;

@end


Створення кнопок опцій

Тепер ми змінимо метод cellForRowAtIndexPath:у файлі SwipeTableViewController.m для створення кнопок опцій осередку. Але перш ніж ми це зробимо, додайте оператор імпорту бібліотеці та вкажіть реалізуєте протокол SWTableViewCellDelegate у файлі SwipeTableViewController.h. Ми поговоримо про реалізацію протоколу трохи пізніше, у наступному розділі, для початку давайте внесемо зміни в код. Після внесення змін він повинен виглядати приблизно так:


#import <UIKit/UIKit.h>
#import "SWTableViewCell.h"

@interface SwipeTableViewController : UITableViewController <SWTableViewCellDelegate>

@end


Відкрийте файл SwipeTableViewController.m і внесіть зміни в метод cellForRowAtIndexPath:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *cellIdentifier = @"Cell";

CustomTableViewCell *cell = (CustomTableViewCell *)[tableView dequeueReusableCellWithIdentifier:cellIdentifier forIndexPath:indexPath];

// Add utility buttons
NSMutableArray *leftUtilityButtons = [NSMutableArray new];
NSMutableArray *rightUtilityButtons = [NSMutableArray new];

[leftUtilityButtons sw_addUtilityButtonWithColor:
[UIColor colorWithRed:1.0 f green:1.0 f blue:0.35 f alpha:0.7]
icon:[UIImage imageNamed:@"like.png"</a>;
[leftUtilityButtons sw_addUtilityButtonWithColor:
[UIColor colorWithRed:1.0 f green:1.0 f blue:0.35 f alpha:0.7]
icon:[UIImage imageNamed:@"message.png"</a>;
[leftUtilityButtons sw_addUtilityButtonWithColor:
[UIColor colorWithRed:1.0 f green:1.0 f blue:0.35 f alpha:0.7]
icon:[UIImage imageNamed:@"facebook.png"</a>;
[leftUtilityButtons sw_addUtilityButtonWithColor:
[UIColor colorWithRed:1.0 f green:1.0 f blue:0.35 f alpha:0.7]
icon:[UIImage imageNamed:@"twitter.png"</a>;

[rightUtilityButtons sw_addUtilityButtonWithColor:
[UIColor colorWithRed:0.78 f green:0.78 f blue:0.8 f alpha:1.0]
title:@"More"];
[rightUtilityButtons sw_addUtilityButtonWithColor:
[UIColor colorWithRed:1.0 f green:0.231 f blue:0.188 alpha:1.0 f]
title:@"Delete"];

cell.leftUtilityButtons = leftUtilityButtons;
cell.rightUtilityButtons = rightUtilityButtons;
cell.delegate = self;

// Configure the cell...
cell.patternLabel.text = [patterns objectAtIndex:indexPath.row];
cell.patternImageView.image = [UIImage imageNamed:[patternImages objectAtIndex:indexPath.row</a>;

return cell;
}


У цьому прикладі ми створили два набору кнопок опцій. Один з них буде показаний при свайпе вліво, інший при свайпе вправо. Ми створили набір кнопок для шарінга і помістили його в змінну leftUtilityButtons, а також ми створили кнопки «More» (Додатково) і «Delete» і помістили їх в змінну rightUtilityButtons. Як видно з коду вище, ви можете просто створити масив NSMutableArray і його елементів додати в нього необхідні кнопки за допомогою методу sw_addUtilityButtonWithColor:.

Тепер ви готові до того, щоб скомпілювати і запустити тестове додаток. Після запуску спробуйте провести по будь-якій комірці таблиці і ви повинні побачити кнопки опцій осередку. Тим не менш кнопки не працюють і ми знаємо чому. Ми не реалізували деякі методи протоколу SWTableViewCellDelegate. Що-ж давайте рухатися далі.

Реаализация протоколу SWTableViewCellDelegate

Протокол SWTableViewCellDelegate надає методи для управління діями на натискання кнопок опцій. Уважний читач, звичайно ж помітив що SwipeTableViewController призначений в якості делегата SWTableViewCell в коді вище. Що-ж, реалізуємо наступні два методу в SwipeTableViewController.m:

1. Метод didTriggerLeftUtilityButtonWithIndex: — спрацьовує коли натиснута будь-яка з кнопок опцій в лівій частині клітинки
2. Метод didTriggerRightUtilityButtonWithindex: — спрацьовує коли натиснута будь-яка з кнопок опцій в правій частині клітинки

Додайте наступний код в SwipeTableViewController.m:

- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerLeftUtilityButtonWithIndex:(NSInteger)index {

switch (index) {
case 0:
{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Bookmark" message:@"Save to favorites successfully" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];
[alertView show];
break;
}
case 1:
{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Email sent" message:@"Just sent the image to your INBOX" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];
[alertView show];
break;
}
case 2:
{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Facebook Sharing" message:@"Just shared the pattern image on Facebook" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];
[alertView show];
break;
}
case 3:
{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"Twitter Sharing" message:@"Just shared the pattern image on Twitter" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];
[alertView show];
}
default:
break;
}
}


Щоб зберегти простоту нашого прикладу, ми просто показуємо оповіщення, коли натискається будь-яка з кнопок шарінга. В реальному додатку ви можете реалізувати справжній шарінг в Facebook і Twitter, наприклад.

Для кнопок опцій, які знаходяться в правій частині клітинки ми реалізували метод didTriggerRightUtilityButtonWithindex: з наступним кодом:

- (void)swipeableTableViewCell:(SWTableViewCell *)cell didTriggerRightUtilityButtonWithindex:(NSInteger)index {
switch (index) {
case 0:
{
// More button is pressed
UIActionSheet *shareActionSheet = [[UIActionSheet alloc] initWithTitle:@"Share" delegate:nil cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Share on Facebook", @"Share on Twitter", nil];
[shareActionSheet showInView:self.view];

[cell hideUtilityButtonsAnimated:YES];
break;
}
case 1:
{
// Delete button is pressed
NSIndexPath *cellIndexPath = [self.tableView indexPathForCell:cell];
[patterns removeObjectAtIndex:cellIndexPath.row];
[patternImages removeObjectAtIndex:cellIndexPath.row];
[self.tableView deleteRowsAtIndexPaths:@[cellIndexPath] withRowAnimation:UITableViewRowAnimationLeft];
break;
}
default:
break;
}
}


І знову код простий і зрозумілий. Коли натискається кнопка «More» (Додатково), додаток показує панель дій (action sheet) містить перелік соціальних мереж для шарінга. Для опції «delete (видалення), нам потрібно просто видалити елемент зі списку шаблонів і масиву patternImages, а потім викликати його метод deleteRowsAtIndexPaths: для видалення записи з відображення таблиці.

От і все! Тепер ви можете скомпілювати і запустити вашу програму. Кнопки опцій повинні працювати як-то так:



Підведемо підсумки

SWTableViewCell дозволяє дуже просто реалізувати функцію swipe-for-options для таблиць. При розробці вашого наступного додатки, задумайтеся про реалізацію цієї функції. Я думаю це підніме рівень вашого застосування для користувача.

І хоча ми можемо реалізувати даний функціонал за допомогою безлічі сторонніх бібліотек або реалізувати його своїми власними силами, я сподіваюся, що Apple розгляне можливість надання розробникам даного інструменту в наступних версіях iOS.

Ви можете завантажити готовий проект, якщо він раптом вам знадобиться.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.