Instantly share code, notes, and snippets.
Last active
April 2, 2021 08:38
-
Star
(10)
10
You must be signed in to star a gist -
Fork
(6)
6
You must be signed in to fork a gist
-
Save gbitaudeau/6540847de8f5ee9f2e0393a00d2cb11e to your computer and use it in GitHub Desktop.
I created a UIButton subclass whose purpose is to be able to choose where the button's image is layout, either vertically or horizontally. See http://stackoverflow.com/a/41744464/1661338
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Created by Guillaume BITAUDEAU on 19/01/2017. | |
// @see : http://stackoverflow.com/a/41744464/1661338 | |
import UIKit | |
@IBDesignable | |
class LayoutableButton: UIButton { | |
enum VerticalAlignment : String { | |
case center, top, bottom, unset | |
} | |
enum HorizontalAlignment : String { | |
case center, left, right, unset | |
} | |
@IBInspectable | |
var imageToTitleSpacing: CGFloat = 8.0 { | |
didSet { | |
setNeedsLayout() | |
} | |
} | |
var imageVerticalAlignment: VerticalAlignment = .unset { | |
didSet { | |
setNeedsLayout() | |
} | |
} | |
var imageHorizontalAlignment: HorizontalAlignment = .unset { | |
didSet { | |
setNeedsLayout() | |
} | |
} | |
@available(*, unavailable, message: "This property is reserved for Interface Builder. Use 'imageVerticalAlignment' instead.") | |
@IBInspectable | |
var imageVerticalAlignmentName: String { | |
get { | |
return imageVerticalAlignment.rawValue | |
} | |
set { | |
if let value = VerticalAlignment(rawValue: newValue) { | |
imageVerticalAlignment = value | |
} else { | |
imageVerticalAlignment = .unset | |
} | |
} | |
} | |
@available(*, unavailable, message: "This property is reserved for Interface Builder. Use 'imageHorizontalAlignment' instead.") | |
@IBInspectable | |
var imageHorizontalAlignmentName: String { | |
get { | |
return imageHorizontalAlignment.rawValue | |
} | |
set { | |
if let value = HorizontalAlignment(rawValue: newValue) { | |
imageHorizontalAlignment = value | |
} else { | |
imageHorizontalAlignment = .unset | |
} | |
} | |
} | |
var extraContentEdgeInsets:UIEdgeInsets = UIEdgeInsets.zero | |
override var contentEdgeInsets: UIEdgeInsets { | |
get { | |
return super.contentEdgeInsets | |
} | |
set { | |
super.contentEdgeInsets = newValue | |
self.extraContentEdgeInsets = newValue | |
} | |
} | |
var extraImageEdgeInsets:UIEdgeInsets = UIEdgeInsets.zero | |
override var imageEdgeInsets: UIEdgeInsets { | |
get { | |
return super.imageEdgeInsets | |
} | |
set { | |
super.imageEdgeInsets = newValue | |
self.extraImageEdgeInsets = newValue | |
} | |
} | |
var extraTitleEdgeInsets:UIEdgeInsets = UIEdgeInsets.zero | |
override var titleEdgeInsets: UIEdgeInsets { | |
get { | |
return super.titleEdgeInsets | |
} | |
set { | |
super.titleEdgeInsets = newValue | |
self.extraTitleEdgeInsets = newValue | |
} | |
} | |
//Needed to avoid IB crash during autolayout | |
override init(frame: CGRect) { | |
super.init(frame: frame) | |
} | |
required init?(coder aDecoder: NSCoder) { | |
super.init(coder: aDecoder) | |
self.imageEdgeInsets = super.imageEdgeInsets | |
self.titleEdgeInsets = super.titleEdgeInsets | |
self.contentEdgeInsets = super.contentEdgeInsets | |
} | |
override func layoutSubviews() { | |
if let imageSize = self.imageView?.image?.size, | |
let font = self.titleLabel?.font, | |
let textSize = self.titleLabel?.attributedText?.size() ?? self.titleLabel?.text?.size(attributes: [NSFontAttributeName: font]) { | |
var _imageEdgeInsets = UIEdgeInsets.zero | |
var _titleEdgeInsets = UIEdgeInsets.zero | |
var _contentEdgeInsets = UIEdgeInsets.zero | |
let halfImageToTitleSpacing = imageToTitleSpacing / 2.0 | |
switch imageVerticalAlignment { | |
case .bottom: | |
_imageEdgeInsets.top = (textSize.height + imageToTitleSpacing) / 2.0 | |
_imageEdgeInsets.bottom = (-textSize.height - imageToTitleSpacing) / 2.0 | |
_titleEdgeInsets.top = (-imageSize.height - imageToTitleSpacing) / 2.0 | |
_titleEdgeInsets.bottom = (imageSize.height + imageToTitleSpacing) / 2.0 | |
_contentEdgeInsets.top = (min (imageSize.height, textSize.height) + imageToTitleSpacing) / 2.0 | |
_contentEdgeInsets.bottom = (min (imageSize.height, textSize.height) + imageToTitleSpacing) / 2.0 | |
//only works with contentVerticalAlignment = .center | |
contentVerticalAlignment = .center | |
case .top: | |
_imageEdgeInsets.top = (-textSize.height - imageToTitleSpacing) / 2.0 | |
_imageEdgeInsets.bottom = (textSize.height + imageToTitleSpacing) / 2.0 | |
_titleEdgeInsets.top = (imageSize.height + imageToTitleSpacing) / 2.0 | |
_titleEdgeInsets.bottom = (-imageSize.height - imageToTitleSpacing) / 2.0 | |
_contentEdgeInsets.top = (min (imageSize.height, textSize.height) + imageToTitleSpacing) / 2.0 | |
_contentEdgeInsets.bottom = (min (imageSize.height, textSize.height) + imageToTitleSpacing) / 2.0 | |
//only works with contentVerticalAlignment = .center | |
contentVerticalAlignment = .center | |
case .center: | |
//only works with contentVerticalAlignment = .center | |
contentVerticalAlignment = .center | |
break | |
case .unset: | |
break | |
} | |
switch imageHorizontalAlignment { | |
case .left: | |
_imageEdgeInsets.left = -halfImageToTitleSpacing | |
_imageEdgeInsets.right = halfImageToTitleSpacing | |
_titleEdgeInsets.left = halfImageToTitleSpacing | |
_titleEdgeInsets.right = -halfImageToTitleSpacing | |
_contentEdgeInsets.left = halfImageToTitleSpacing | |
_contentEdgeInsets.right = halfImageToTitleSpacing | |
case .right: | |
_imageEdgeInsets.left = textSize.width + halfImageToTitleSpacing | |
_imageEdgeInsets.right = -textSize.width - halfImageToTitleSpacing | |
_titleEdgeInsets.left = -imageSize.width - halfImageToTitleSpacing | |
_titleEdgeInsets.right = imageSize.width + halfImageToTitleSpacing | |
_contentEdgeInsets.left = halfImageToTitleSpacing | |
_contentEdgeInsets.right = halfImageToTitleSpacing | |
case .center: | |
_imageEdgeInsets.left = textSize.width / 2.0 | |
_imageEdgeInsets.right = -textSize.width / 2.0 | |
_titleEdgeInsets.left = -imageSize.width / 2.0 | |
_titleEdgeInsets.right = imageSize.width / 2.0 | |
_contentEdgeInsets.left = -((imageSize.width + textSize.width) - max (imageSize.width, textSize.width)) / 2.0 | |
_contentEdgeInsets.right = -((imageSize.width + textSize.width) - max (imageSize.width, textSize.width)) / 2.0 | |
case .unset: | |
break | |
} | |
_contentEdgeInsets.top += extraContentEdgeInsets.top | |
_contentEdgeInsets.bottom += extraContentEdgeInsets.bottom | |
_contentEdgeInsets.left += extraContentEdgeInsets.left | |
_contentEdgeInsets.right += extraContentEdgeInsets.right | |
_imageEdgeInsets.top += extraImageEdgeInsets.top | |
_imageEdgeInsets.bottom += extraImageEdgeInsets.bottom | |
_imageEdgeInsets.left += extraImageEdgeInsets.left | |
_imageEdgeInsets.right += extraImageEdgeInsets.right | |
_titleEdgeInsets.top += extraTitleEdgeInsets.top | |
_titleEdgeInsets.bottom += extraTitleEdgeInsets.bottom | |
_titleEdgeInsets.left += extraTitleEdgeInsets.left | |
_titleEdgeInsets.right += extraTitleEdgeInsets.right | |
super.imageEdgeInsets = _imageEdgeInsets | |
super.titleEdgeInsets = _titleEdgeInsets | |
super.contentEdgeInsets = _contentEdgeInsets | |
} else { | |
super.imageEdgeInsets = extraImageEdgeInsets | |
super.titleEdgeInsets = extraTitleEdgeInsets | |
super.contentEdgeInsets = extraContentEdgeInsets | |
} | |
super.layoutSubviews() | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment