- GitHub: MGSwipeTableCell
- Star: 6.8k+
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.leftButtons
或 cell.rightButtons
屬性按摘。 MGSwipeButton
是一個(gè)便捷類包券,你不必被迫使用它。 你可以使用自己的 UIButtons
或 UIViews
炫贤。 你也可以使用 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
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;
}
參考
- GitHub:SWTableViewCell ?? 7000+蟹演,但是這個(gè)庫(kù)好像很久沒(méi)有更新了(最后更新是4年前。顷蟀。酒请。)
- GitHub:MGSwipeTableCell ??6500+