WBSwipeableCell
SwipeableMenu works well for both UITableViewCell and UICollectionViewCell, implemented in Swift.*
About
A swipeable Menu has below mentioned features:
- Left and right swipe actions
- Menu Action button with: image only*
- Menu Style: Horizontal, Square and Vertical
- Animated expansion from left, right, top and bottom
- Custom Menu: Alignment, Menu Style and direction
- Custom Menu Items: title text and Image
Background
I have used many menus for a tableviewcell and collectionviewcell but WBSwipeableCell is used where we have lengthy number of menu items and needs to display in one view.
Demo
Menu Styles
The transition style describes how the action buttons are exposed during the swipe.
Horizontal Layout | Square Layout | Vertical Layout |
---|---|---|
Horizontal
For Horizontal menu layout, we need to implement one optional delegate method of MenuViewDelegate
protocol which is given below
func menuView(_ view: MenuView, menuLayoutForRowAtIndexPath indexPath: IndexPath) -> MenuLayout {
return .horizontal
}
Vertical
For Vertical menu layout, we need to implement one optional delegate method of MenuViewDelegate
protocol which is given below
func menuView(_ view: MenuView, menuLayoutForRowAtIndexPath indexPath: IndexPath) -> MenuLayout {
return .vertical
}
Square
For Square menu layout, we need to implement one optional delegate method of MenuViewDelegate
protocol which is given below
func menuView(_ view: MenuView, menuLayoutForRowAtIndexPath indexPath: IndexPath) -> MenuLayout {
return .square
}
Expansion Styles
The expansion style describes the behavior when we call the open
and close
function of Menu View.
Left | Right | Top | Bottom |
---|---|---|---|
Left
Expansion from the left side of the cell we need to implement one optinal method of 'MenuViewDelegate' protocol which is given below
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .left
}
Right
Expansion from the right side of the cell we need to implement one optinal method of 'MenuViewDelegate' protocol which is given below
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .right
}
Top
Expansion from the top side of the cell we need to implement one optinal method of 'MenuViewDelegate' protocol which is given below
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .top
}
Bottom
Expansion from the bottom side of the cell we need to implement one optinal method of 'MenuViewDelegate' protocol which is given below
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .bottom
}
Menu Icon show/hide & Dimension
- If we want to show/hide icon, we need to implement below mentiond protocol method. It will show/hide based on the method return type value.
func menuView(_ menuview: MenuView, showMenuIconForRowAtIndexPath indexPath: IndexPath) -> Bool {
return true
}
- Below mentioned protocol method controls the position of the menu icon that will be left, right, top, bottom.
func menuView(_ menuview: MenuView, positionOfMenuIconForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .top
}
Menu View
we can customize menu View with the below mentioned functions.
let menu = MenuView(mCell: cell, items: [], indexPath: indexPath)
menu.setMenuContentAlignment(.center)
menu.setBgColor(UIColor(red: 90.0/255.0, green: 200.0/255.0, blue: 250.0/255.0, alpha: 1.0))
menu.setMenuItemSpacingVertical(5.0)
menu.setMenuItemSpacingHorizontal(15.0)
menu.setMenuContentInset(10, left: 10, bottom: 10, right: -10)
Menu Items
we can customize each menu item with the below mentioned functions.
let firstItem = MenuItem(title: "Delete", icon: "delete") { (item) in
}
firstItem.itemBorderColor = UIColor.white
firstItem.itemBorderWidth = 2.0
firstItem.itemIconSize = CGSize(width: 50, height: 30)
firstItem.titleColor = UIColor.gray
firstItem.titleFont = UIFont.systemFont(ofSize: 11.0)
firstItem.backgroundColor = UIColor.blue
Requirements
- Swift 4.0
- Xcode 9+
- iOS 9.0+
Installation
CocoaPods (recommended)
use_frameworks!
# Latest release in CocoaPods
pod 'WBSwipeableCell'
Usage
You need to add below mentioned code in cellForRowAt
for UITableView or cellForItemAt
for UICollectionView
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let firstItem = MenuItem(title: "Delete", icon: "delete") { (item) in
// Menu Item click Handler
}
let secondItem = MenuItem(title: "Submit", icon: "save"){ (item) in
// Menu Item click Handler
}
let thirdItem = MenuItem(title: "Save", icon: "submit"){ (item) in
// Menu Item click Handler
}
let fourthItem = MenuItem(title: "Edit", icon: "edit"){ (item) in
// Menu Item click Handler
}
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
let menu = MenuView(mCell: cell, items: [firstItem, secondItem, thirdItem, fourthItem], indexPath: indexPath)
menu.delegate = self
return cell
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let firstItem = MenuItem(title: "Delete", icon: "delete") { (item) in
// Menu Item click Handler
}
let secondItem = MenuItem(title: "Submit", icon: "save"){ (item) in
// Menu Item click Handler
}
let thirdItem = MenuItem(title: "Save", icon: "submit"){ (item) in
// Menu Item click Handler
}
let fourthItem = MenuItem(title: "Edit", icon: "edit"){ (item) in
// Menu Item click Handler
}
let menu = MenuView(mCell: cell, items: [firstItem, secondItem, thirdItem, fourthItem], indexPath: indexPath)
menu.delegate = self
return cell
}
MenuViewDelegate
Adopt the MenuViewDelegate
protocol:
func menuView(_ menuview: MenuView, directionForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .bottom
}
func menuView(_ menuview: MenuView, menuLayoutForRowAtIndexPath indexPath: IndexPath) -> MenuLayout {
return .horizontal
}
func menuView(_ menuview: MenuView, showMenuIconForRowAtIndexPath indexPath: IndexPath) -> Bool {
return true
}
func menuView(_ menuview: MenuView, positionOfMenuIconForRowAtIndexPath indexPath: IndexPath) -> Direction {
return .top
}
Author
mwaqasbhati, [email protected]
License
WBSwipeableCell is available under the MIT license. See the LICENSE file for more info.