Home

Awesome

ExpandableButton

Swift 4.2 CocoaPods compatible Packagist

Requirements

Installation

CocoaPods:

pod 'ExpandableButton'

#for swift less than 4.2 use:
pod 'ExpandableButton', '~> 1.0.0'
import ExpandableButton  

Usage

You can init ExpandableButton with frame (default is .zero), direction (default is .right) and items (each item will be button). direction is opening direction. items is [ExpandableButtonItem] whiches contain information about future buttons. Diretions example:

let rightButton = ExpandableButtonView(frame: frame, direction: .right, items: items)
let leftButton = ExpandableButtonView(frame: frame, direction: .left, items: items)
let upButton = ExpandableButtonView(frame: frame, direction: .up, items: items)
let downButton = ExpandableButtonView(frame: frame, direction: .down, items: items)

Items with image and action:

// create items with images and actions
let items = [
    ExpandableButtonItem(
        image: UIImage(named: "delete"), 
        action: {_ in
            print("delete")
        }
    ),
    ExpandableButtonItem(
        image: UIImage(named: "edit"),
        action: {_ in
            print("edit")
        }
    ),
    ExpandableButtonItem(
        image: UIImage(named: "share"), 
        action: { _ in
           print("share")
        }
    )
]
             
// create ExpandableButton
let buttonView = ExpandableButtonView(items: items)
buttonView.frame = CGRect(x: 0, y: 0, width: 60, height: 60)
buttonView.backgroundColor = .white
view.addSubview(buttonView)

With image, highlightedImage, imageEdgeInsets:

let insets = UIEdgeInsets(top: 16, left: 16, bottom: 16, right: 16)
        
// create items with image, highlighted image, image insets.        
let items = [
    ExpandableButtonItem(
        image: UIImage(named: "delete"),
        highlightedImage: UIImage(named: "highlightedDelete"),
        imageEdgeInsets: insets,
        action: {_ in
            print("delete")
        }
    )
    ...
]

arrowWidth, separatorWidth and cornerRadius:

buttonView.arrowWidth = 2
buttonView.separatorWidth = 2
buttonView.layer.cornerRadius = 30

Custom icons for open and close actions, closeOpenImagesInsets:

// custom open and close images
buttonView.openImage = UIImage(named: "open")
buttonView.closeImage = UIImage(named: "close")
buttonView.closeOpenImagesInsets = insets

With attributedTitle, highlightedAttributedTitle and custom item size:

// with attributed string, highlighted attributed string, custom size.
let items = [
    ExpandableButtonItem(
        attributedTitle: NSAttributedString(
            string: "Attributed Text",
            attributes: [.foregroundColor: UIColor.red]
        ),
        highlightedAttributedTitle: NSAttributedString(
            string: "Attributed Text",
            attributes: [.foregroundColor: UIColor.green]
        ),
        size: CGSize(width: 160, height: 60)
    )
]

With attributedTitle under image (using contentEdgeInsets, titleEdgeInsets, imageEdgeInsets, titleAlignment, imageContentMode, size):

let attributedTitle =  NSAttributedString(
    string: "Share",
    attributes: [.foregroundColor: UIColor.black,
                 .font: UIFont.systemFont(ofSize: 12)]
)

let highlightedAttributedTitle =  NSAttributedString(
    string: "Share",
    attributes: [.foregroundColor: UIColor.lightGray,
                 .font: UIFont.systemFont(ofSize: 12)]
)

let items = [
    ExpandableButtonItem(
        image: UIImage(named: "share"),
        highlightedImage: UIImage(named: "haglightedShare"),
        attributedTitle: attributedTitle,
        highlightedAttributedTitle: highlightedAttributedTitle,
        contentEdgeInsets: UIEdgeInsets(top: 6, left: 6, bottom: 6, right: 6),
        titleEdgeInsets: UIEdgeInsets(top: 24, left: -200, bottom: 0, right: 0),
        imageEdgeInsets: UIEdgeInsets(top: 6, left: 0, bottom: 24, right: 0),
        size: CGSize(width: 80, height: 60),
        titleAlignment: .center,
        imageContentMode: .scaleAspectFit
    )
]

You can also open() and close():

let buttonView = ExpandableButtonView(items: items)

buttonView.open() 
buttonView.close()

All options

ExpandableButtonView

NameTypeDefault valueDescription
directionDirection.rightOpening direction. Could be .left, .right, .up, .down. Set only on init(frame:direction:items:).
stateState.closedCurrent state. Could be .opened, .closed or .animating.
animationDurationTimeInterval0.2Opening, closing and arrow animation duration.
closeOnActionBoolfalseIf true call close() after any item action.
isHapticFeedbackBooltrueTurn on haptic feedback (Taptic engine)
arrowInsetsUIEdgeInsetstop: 12 left: 12 bottom: 12 right: 12Arrow insets.
arrowWidthCGFloat1Arrow line width.
arrowColorUIColorUIColor.blackArrow color.
closeOpenImagesInsetsUIEdgeInsets.zeroInsets for custom close and open images.
closeImageUIImage?nilCustom close image.
openImageUIImage?nilCustom open image.
isSeparatorHiddenBoolfalseIf true hide separator view.
separatorColorUIColorUIColor.blackSeparator color.
separatorInsetCGFloat8Separator inset from top, bottom for .left, .right directions and from left, right for up, down.
separatorWidthCGFloat1Separator view width.

ExpandableButtonItem

NameTypeDefault valueDescription
imageUIImage?nilImage for .normal state.
highlightedImageUIImage?nilImage for .highlighted state.
attributedTitleNSAttributedString?nilAttributed string for .normal state.
highlightedAttributedTitleNSAttributedString?nilAttributed string for .highlighted state.
contentEdgeInsetsUIEdgeInsets.zerocontentEdgeInsets for UIButton
titleEdgeInsetsUIEdgeInsets.zerotitleEdgeInsets for UIButton.
imageEdgeInsetsUIEdgeInsets.zeroimageEdgeInsets for UIButton.
sizeCGSize?nilUIButton size for current item. If nil will be equal to arrow button size.
titleAlignmentNSTextAlignment.centertitleAlignment for titleLabel in UIButton.
imageContentModeUIViewContentMode.scaleAspectFitimageContentMode for imageView in UIButton.
action(ExpandableButtonItem) -> Void{_ in}Action closure. Calls on .touchUpInside
identifierString""Identifier for ExpandableButtonItem.

You can also use ArrowButton (button which can drow left, right, up and down arrows using core graphics, just call showLeftArrow(), showRightArrow(), showUpArrow() or showDownArrow()) and ActionButton (simple UIButton but with actionBlock propertie which calls on .touchUpInside) in your projects.

License

ExpandableButton is under MIT license. See the LICENSE file for more info.