MGSwipeTableCell——為 cell 添加帶過(guò)渡動(dòng)畫的工具按鈕

MGSwipeTableCell 是一個(gè)易于使用的 UITableViewCell 子類适贸,允許顯示具有各種過(guò)渡效果的可滑動(dòng)按鈕穴肘。

該庫(kù)與創(chuàng)建 UITableViewCell 的所有方法兼容:系統(tǒng)預(yù)定義樣式婴栽,以編程方式創(chuàng)建的 cell坝冕,從 xib 加載的單元格以及故事板中的原型 cell场躯。 如果需要剩蟀,你也可以使用 autolayout嚎尤。

適用于 iOS> = 5.0 版本。 在 iPhone 和 iPad 上的所有 iOS 版本上進(jìn)行測(cè)試:iOS 7酥泞,iOS 8砚殿,iOS 9,iOS 10芝囤,iOS 11似炎,iOS 12,iOS 13悯姊。

過(guò)渡動(dòng)畫演示

Border transition - 邊緣過(guò)渡

Clip transition - 裁剪過(guò)渡

3D transition - 3D 過(guò)渡

Static transition - 靜態(tài)過(guò)渡

Drag transition - 拖動(dòng)過(guò)渡

API 參考

參見(jiàn) MGSwipeTableCell.h 頭文件查看有關(guān)該類功能的完整概述羡藐。
參見(jiàn) MailAppDemo 查看一個(gè)模仿 Apple 的郵件應(yīng)用程序的完整項(xiàng)目(用 Objective-C 編寫)。
參見(jiàn) MailAppDemoSwift 查看一個(gè)模仿 Apple 的郵件應(yīng)用程序的完整項(xiàng)目(用 Swift 編寫)悯许。
參見(jiàn) SpotifyDemo 查看一個(gè)模仿 Spotify App 滑動(dòng)樣式的完整項(xiàng)目仆嗦。
參見(jiàn) MGSwipeDemo 查看一個(gè)完整的項(xiàng)目示例,您可以在真實(shí)設(shè)備 / 模擬器上測(cè)試各種過(guò)渡先壕。

項(xiàng)目設(shè)置

You can use CocoaPods to include MGSwipeTableCell into you project:

pod 'MGSwipeTableCell'

You can use Carthage to include MGSwipeTableCell into your project. Just add this dependency to your Cartfile:

github "MortimerGoro/MGSwipeTableCell"

用法

概述

在項(xiàng)目中集成 MGSwipeTableCell 非常簡(jiǎn)單瘩扼。 基本上,你只需繼承 MGSwipeTableCell 而不是 UITableViewCell垃僚,或直接使用 iOS 預(yù)定義單元格樣式實(shí)例化 MGSwipeTableCell 實(shí)例集绰。 你可以按照以前的方式布置單元格內(nèi)容,MGSwipeTableCell 不會(huì)強(qiáng)制您更改布局冈在。

以下是使用 iOS 預(yù)定義樣式的 MGSwipeTableCell 的示例倒慧。 您可以將按鈕數(shù)組設(shè)置為 cell.leftButtonscell.rightButtons 屬性按摘。 MGSwipeButton 是一個(gè)便捷類包券,你不必被迫使用它。 你可以使用自己的 UIButtonsUIViews炫贤。 你也可以使用 leftSwipeSettings 和 / 或 rightSwipeSettings 屬性配置轉(zhuǎn)場(chǎng)(和滑動(dòng)閾值)

Objective-C
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString * reuseIdentifier = @"programmaticCell";
    MGSwipeTableCell * cell = [self.tableView dequeueReusableCellWithIdentifier:reuseIdentifier];
    if (!cell) {
        cell = [[MGSwipeTableCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:reuseIdentifier];
    }

    cell.textLabel.text = @"Title";
    cell.detailTextLabel.text = @"Detail text";
    cell.delegate = self; //optional

    //配置左邊按鈕
    cell.leftButtons = @[[MGSwipeButton buttonWithTitle:@"" icon:[UIImage imageNamed:@"check.png"] backgroundColor:[UIColor greenColor]],
                          [MGSwipeButton buttonWithTitle:@"" icon:[UIImage imageNamed:@"fav.png"] backgroundColor:[UIColor blueColor]]];
    // 按鈕過(guò)渡樣式,3D轉(zhuǎn)換
    cell.leftSwipeSettings.transition = MGSwipeTransition3D;

    //配置右邊按鈕
    cell.rightButtons = @[[MGSwipeButton buttonWithTitle:@"Delete" backgroundColor:[UIColor redColor]],
                           [MGSwipeButton buttonWithTitle:@"More" backgroundColor:[UIColor lightGrayColor]]];
    cell.rightSwipeSettings.transition = MGSwipeTransition3D;
    return cell;
}
Swift
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
    let reuseIdentifier = "programmaticCell"
    var cell = tableView.dequeueReusableCell(withIdentifier: reuseIdentifier, for: indexPath) as! MGSwipeTableCell

    cell.textLabel!.text = "Title"
    cell.detailTextLabel!.text = "Detail text"
    cell.delegate = self //optional

    //configure left buttons
    cell.leftButtons = [MGSwipeButton(title: "", icon: UIImage(named:"check.png"), backgroundColor: .green),
                        MGSwipeButton(title: "", icon: UIImage(named:"fav.png"), backgroundColor: .blue)]
    cell.leftSwipeSettings.transition = .rotate3D

    //configure right buttons
    cell.rightButtons = [MGSwipeButton(title: "Delete", backgroundColor: .red),
                         MGSwipeButton(title: "More",backgroundColor: .lightGray)]
    cell.rightSwipeSettings.transition = .rotate3D

    return cell
}

為了監(jiān)聽(tīng)按鈕點(diǎn)擊事件溅固,你可以實(shí)現(xiàn)可選的 MGSwipeTableCellDelegate 協(xié)議,或者如果您懶得這樣做兰珍,MGSwipeButton 類也附帶一個(gè)便捷 block 回調(diào);)

Objective-c
// 創(chuàng)建按鈕時(shí)侍郭,同時(shí)設(shè)置 block 回調(diào)
[MGSwipeButton buttonWithTitle:@"More" backgroundColor:[UIColor lightGrayColor] callback:^BOOL(MGSwipeTableCell *sender) {
      NSLog(@"Convenience callback for swipe buttons!");
}]
Swift
MGSwipeButton(title: "Delete", backgroundColor: .red) {
      (sender: MGSwipeTableCell!) -> Bool in
      print("Convenience callback for swipe buttons!")
      return true
    }

Delegate - 代理協(xié)議

MGSwipeTableCellDelegate 是一個(gè)可選的委托協(xié)議,用于配置滑動(dòng)按鈕或接收觸發(fā)的操作或其他事件掠河。 按鈕可以在cell 被創(chuàng)建時(shí)內(nèi)聯(lián)配置亮元,如果你不想使用此委托方法。但是使用委托可以提高內(nèi)存使用率唠摹,因?yàn)榘粹o僅按需創(chuàng)建爆捞。

@protocol MGSwipeTableCellDelegate <NSObject>

@optional
/**
 * Delegate method to enable/disable swipe gestures
 * 開(kāi)關(guān)
 * @return YES if swipe is allowed
 **/
-(BOOL) swipeTableCell:(MGSwipeTableCell*) cell canSwipe:(MGSwipeDirection) direction;
/**
 * Delegate method invoked when the current swipe state changes
 * 當(dāng)前滑動(dòng)狀態(tài)更改時(shí)調(diào)用的 Delegate 方法
 @param state the current Swipe State
 @param gestureIsActive YES if the user swipe gesture is active. No if the uses has already ended the gesture
 **/
-(void) swipeTableCell:(MGSwipeTableCell*) cell didChangeSwipeState:(MGSwipeState) state gestureIsActive:(BOOL) gestureIsActive;
/**
 * Called when the user clicks a swipe button or when a expandable button is automatically triggered
 * 當(dāng)用戶單擊滑動(dòng)按鈕或自動(dòng)觸發(fā)可展開(kāi)按鈕時(shí)調(diào)用
 * @return YES to autohide the current swipe buttons
 **/
-(BOOL) swipeTableCell:(MGSwipeTableCell*) cell tappedButtonAtIndex:(NSInteger) index direction:(MGSwipeDirection)direction fromExpansion:(BOOL) fromExpansion;
/**
 * Delegate method to setup the swipe buttons and swipe/expansion settings
 * 配置按鈕協(xié)議方法
 * Buttons can be any kind of UIView but it's recommended to use the convenience MGSwipeButton class
 * Setting up buttons with this delegate instead of using cell properties improves memory usage because buttons are only created in demand
 * @param swipeTableCell the UITableViewCell to configure. You can get the indexPath using [tableView indexPathForCell:cell]
 * @param direction The swipe direction (left to right or right to left)
 * @param swipeSettings instance to configure the swipe transition and setting (optional)
 * @param expansionSettings instance to configure button expansions (optional)
 * @return Buttons array
 **/
-(NSArray*) swipeTableCell:(MGSwipeTableCell*) cell swipeButtonsForDirection:(MGSwipeDirection)direction
             swipeSettings:(MGSwipeSettings*) swipeSettings expansionSettings:(MGSwipeExpansionSettings*) expansionSettings;

@end

Expandable buttons - 可擴(kuò)展按鈕

默認(rèn)情況下,按鈕不可擴(kuò)展勾拉。 你可以使用 cell.leftExpansion 和 cell.rightExpansion 屬性設(shè)置可擴(kuò)展按鈕

當(dāng)用戶結(jié)束滑動(dòng)手勢(shì)并且擴(kuò)展處于活動(dòng)狀態(tài)時(shí)(可通過(guò)閾值配置)煮甥,將自動(dòng)觸發(fā)可擴(kuò)展按鈕事件盗温。 觸發(fā)的可擴(kuò)展按鈕可以彈回到其初始位置或填充整個(gè) UITableViewCell,您可以使用 fillOnTrigger 屬性選擇所需的動(dòng)畫成肘。

@interface MGSwipeExpansionSettings: NSObject
/** index of the expandable button (in the left or right buttons arrays) */
@property (nonatomic, assign) NSInteger buttonIndex;
/** if true the button fills the cell on trigger, else it bounces back to its initial position */
@property (nonatomic, assign) BOOL fillOnTrigger;
/** Size proportional threshold to trigger the expansion button. Default value 1.5 */
@property (nonatomic, assign) CGFloat threshold;
@end

Rounded corners and swipe buttons - 圓角和滑動(dòng)按鈕

MGSwipeTableCell 支持圓角卖局。 例:

cell.layer.cornerRadius = 50
cell.backgroundColor = UIColor.gray
cell.clipsToBounds = true
cell.swipeBackgroundColor = UIColor.gray
RoundTableViewCell

License - 許可證

The MIT License (MIT)

Copyright (c) 2014 Imanol Fernandez @MortimerGoro

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

示例代碼

#pragma mark - MGSwipeTableCellDelegate

/**
 * Delegate method to setup the swipe buttons and swipe/expansion settings
 * Buttons can be any kind of UIView but it's recommended to use the convenience MGSwipeButton class
 * Setting up buttons with this delegate instead of using cell properties improves memory usage because buttons are only created in demand
 * @param cell the UITableViewCell to configure. You can get the indexPath using [tableView indexPathForCell:cell]
 * @param direction The swipe direction (left to right or right to left)
 * @param swipeSettings instance to configure the swipe transition and setting (optional)
 * @param expansionSettings instance to configure button expansions (optional)
 * @return Buttons array
 **/
-(nullable NSArray<UIView*>*) swipeTableCell:(nonnull MGSwipeTableCell*) cell swipeButtonsForDirection:(MGSwipeDirection)direction
                               swipeSettings:(nonnull MGSwipeSettings*) swipeSettings expansionSettings:(nonnull MGSwipeExpansionSettings*) expansionSettings {
    
    if (direction == MGSwipeDirectionRightToLeft) {
        // MGSwipeSettings 按鈕設(shè)置
        swipeSettings.transition = MGSwipeTransitionBorder;
        swipeSettings.threshold = 1.5; // 工具按鈕被顯示出來(lái)的閾值 (手勢(shì)拉伸的長(zhǎng)度/按鈕自身寬度)
        swipeSettings.keepButtonsSwiped = YES; // 手勢(shì)停止時(shí),按鈕是否自動(dòng)隱藏
        
        // MGSwipeExpansionSettings 拉伸設(shè)置
        expansionSettings.buttonIndex = 0; // 被拉伸的按鈕索引
        expansionSettings.fillOnTrigger = NO; // 拉伸時(shí)是否填充整個(gè) cell
        expansionSettings.threshold = 2.0; // 拉伸動(dòng)作被觸發(fā)的閾值(與按鈕的寬度相關(guān))
        
        // 刪除按鈕
        CGFloat padding = 20; // 按鈕右側(cè) - contentView 右側(cè)邊距
        MGSwipeButton *trashButton = [MGSwipeButton buttonWithTitle:@"" icon:[UIImage imageNamed:@"trash"] backgroundColor:[UIColor clearColor] padding:padding];
        return @[trashButton];
    }
    return nil;
}

/**
 * 當(dāng)用戶單擊滑動(dòng)按鈕或可展開(kāi)按鈕被自動(dòng)自動(dòng)觸發(fā)時(shí)調(diào)用
 * Called when the user clicks a swipe button or when a expandable button is automatically triggered
 * @return YES to autohide the current swipe buttons
 **/
-(BOOL) swipeTableCell:(nonnull MGSwipeTableCell*) cell tappedButtonAtIndex:(NSInteger) index direction:(MGSwipeDirection)direction fromExpansion:(BOOL) fromExpansion {
    
    // 刪除按鈕觸發(fā)事件
    if (direction == MGSwipeDirectionRightToLeft && index == 0) {
        // 這里直接刪除双霍,業(yè)務(wù)層還需要做刪除前的提示和判斷的Q馀肌!洒闸!
        NSIndexPath *indexPath = [self.tableView indexPathForCell:cell];
        [self.dataSourceArray removeObjectAtIndex:indexPath.row];
        [self.tableView deleteRowAtIndexPath:indexPath withRowAnimation:UITableViewRowAnimationLeft];
        return NO;
    }
    return YES;
}

參考

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市鸣个,隨后出現(xiàn)的幾起案子羞反,更是在濱河造成了極大的恐慌,老刑警劉巖囤萤,帶你破解...
    沈念sama閱讀 219,427評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件昼窗,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡涛舍,警方通過(guò)查閱死者的電腦和手機(jī)澄惊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)富雅,“玉大人掸驱,你說(shuō)我怎么就攤上這事∶挥樱” “怎么了毕贼?”我有些...
    開(kāi)封第一講書人閱讀 165,747評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)蛤奢。 經(jīng)常有香客問(wèn)我鬼癣,道長(zhǎng),這世上最難降的妖魔是什么啤贩? 我笑而不...
    開(kāi)封第一講書人閱讀 58,939評(píng)論 1 295
  • 正文 為了忘掉前任待秃,我火速辦了婚禮,結(jié)果婚禮上痹屹,老公的妹妹穿的比我還像新娘章郁。我一直安慰自己,他們只是感情好痢掠,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布驱犹。 她就那樣靜靜地躺著嘲恍,像睡著了一般。 火紅的嫁衣襯著肌膚如雪雄驹。 梳的紋絲不亂的頭發(fā)上佃牛,一...
    開(kāi)封第一講書人閱讀 51,737評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音医舆,去河邊找鬼俘侠。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蔬将,可吹牛的內(nèi)容都是我干的爷速。 我是一名探鬼主播,決...
    沈念sama閱讀 40,448評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼霞怀,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼惫东!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起毙石,我...
    開(kāi)封第一講書人閱讀 39,352評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤廉沮,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后徐矩,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體滞时,經(jīng)...
    沈念sama閱讀 45,834評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評(píng)論 3 338
  • 正文 我和宋清朗相戀三年滤灯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了坪稽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,133評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡鳞骤,死狀恐怖窒百,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情弟孟,我是刑警寧澤贝咙,帶...
    沈念sama閱讀 35,815評(píng)論 5 346
  • 正文 年R本政府宣布样悟,位于F島的核電站拂募,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏窟她。R本人自食惡果不足惜陈症,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望震糖。 院中可真熱鬧录肯,春花似錦、人聲如沸吊说。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,022評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至厅贪,卻和暖如春蠢护,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背养涮。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,147評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工葵硕, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人贯吓。 一個(gè)月前我還...
    沈念sama閱讀 48,398評(píng)論 3 373
  • 正文 我出身青樓懈凹,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親悄谐。 傳聞我的和親對(duì)象是個(gè)殘疾皇子介评,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi閱讀 7,336評(píng)論 0 10
  • PLEASE READ THE FOLLOWING APPLE DEVELOPER PROGRAM LICENSE...
    念念不忘的閱讀 13,478評(píng)論 5 6
  • 今天的文章,繼續(xù)延續(xù)昨天接受這個(gè)文章爬舰。我一直和大家分享這么一個(gè)觀點(diǎn)威沫,就是人性的...
    戴老師成長(zhǎng)記錄儀閱讀 544評(píng)論 1 6
  • 放下面子,愛(ài)就簡(jiǎn)單純粹的多洼专。 面子是什么棒掠?里子足了才有面子,要求別人配合的刻意營(yíng)造也只是戲屁商,戲演多了難免委屈了自己...
    會(huì)呼吸的山閱讀 177評(píng)論 0 0
  • 看一個(gè)人的教養(yǎng)就看他離開(kāi)的時(shí)候烟很。 一個(gè)教養(yǎng)好的人,做什么事情都會(huì)想著下一個(gè)人蜡镶。 學(xué)心理學(xué)后才知道:沖動(dòng)打架是內(nèi)心沒(méi)...
    施良傑閱讀 290評(píng)論 0 1