[iOS][CocoaPods] MailboxのUIを実現するライブラリ「MCSwipeTableViewCell」
2014年3月10日 tinpay iOSアプリ開発,
こんにちは。ちんぺい（@tinpay）です。
最近、CocoaPodsからいろいろ入れて試してみてるので、よさげなものを随時ご紹介していこうと思ってます。
今回は、Mailboxのようなリストを左右にスワイプするようなUIを実現させるライブラリ「MCSwipeTableViewCell」のご紹介です。
右にスワイプすると「完了」、さらに右にスワイプすると「削除」というようなUIが簡単に実装できます。
左スワイプで「時間指定」、「リスト登録」など、まさにMailbox！！
どのくらいスライドすると最初のトリガー、２回目のトリガーか、スワイプの幅も割合で指定することができます。
MCSwipeTableViewCell
git : https://github.com/alikaragoz/MCSwipeTableViewCell
License : MIT
CocoaPods : pod “MCSwipeTableViewCell”
Requirements : iOS >= 5.0 , ARC
Devloper : Ali Karagoz
TableCellを作成するところのカスタマイズなのですごく簡単です。
各アクションもBlocksで、見た目もシンプルでわかりやすい！
1 | - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { |
2 | static NSString *CellIdentifier = @"Cell"; |
4 | MCSwipeTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier]; |
7 | cell = [[MCSwipeTableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier]; |
10 | if ([cell respondsToSelector:@selector(setSeparatorInset:)]) { |
11 | cell.separatorInset = UIEdgeInsetsZero; |
14 | [cell setSelectionStyle:UITableViewCellSelectionStyleGray]; |
16 | cell.contentView.backgroundColor = [UIColor whiteColor]; |
20 | UIView *checkView = [self viewWithImageName:@"check"]; |
21 | UIColor *greenColor = [UIColor colorWithRed:85.0 / 255.0 green:213.0 / 255.0 blue:80.0 / 255.0 alpha:1.0]; |
23 | UIView *crossView = [self viewWithImageName:@"cross"]; |
24 | UIColor *redColor = [UIColor colorWithRed:232.0 / 255.0 green:61.0 / 255.0 blue:14.0 / 255.0 alpha:1.0]; |
26 | UIView *clockView = [self viewWithImageName:@"clock"]; |
27 | UIColor *yellowColor = [UIColor colorWithRed:254.0 / 255.0 green:217.0 / 255.0 blue:56.0 / 255.0 alpha:1.0]; |
29 | UIView *listView = [self viewWithImageName:@"list"]; |
30 | UIColor *brownColor = [UIColor colorWithRed:206.0 / 255.0 green:149.0 / 255.0 blue:98.0 / 255.0 alpha:1.0]; |
33 | [cell setDefaultColor:self.mainTableView.backgroundView.backgroundColor]; |
35 | [cell.textLabel setText:@"左右スワイプする"]; |
36 | [cell.detailTextLabel setText:@"右でチェック、削除。左でタイマー、リスト"]; |
39 | [cell setSwipeGestureWithView:checkView color:greenColor mode:MCSwipeTableViewCellModeSwitch state:MCSwipeTableViewCellState1 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) { |
40 | NSLog(@"Did swipe \"Checkmark\" cell"); |
43 | [cell setSwipeGestureWithView:crossView color:redColor mode:MCSwipeTableViewCellModeExit state:MCSwipeTableViewCellState2 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) { |
44 | NSLog(@"Did swipe \"Cross\" cell"); |
45 | [self deleteCell:cell]; |
48 | [cell setSwipeGestureWithView:clockView color:yellowColor mode:MCSwipeTableViewCellModeSwitch state:MCSwipeTableViewCellState3 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) { |
49 | NSLog(@"Did swipe \"Clock\" cell"); |
53 | [cell setSwipeGestureWithView:listView color:brownColor mode:MCSwipeTableViewCellModeSwitch state:MCSwipeTableViewCellState4 completionBlock:^(MCSwipeTableViewCell *cell, MCSwipeTableViewCellState state, MCSwipeTableViewCellMode mode) { |
54 | NSLog(@"Did swipe \"List\" cell"); |
1 | - (UIView *)viewWithImageName:(NSString *)imageName { |
2 | UIImage *image = [UIImage imageNamed:imageName]; |
3 | UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; |
4 | imageView.contentMode = UIViewContentModeCenter; |
お試しあれ。
CocoaPods, iOS, Tips, UI
iOSアプリを作っています。
iPhoneL♡VE部