ExpandableButton
需求
- iOS 9.0+
安装
CocoaPods
- 将以下行添加到您的
Podfile
pod 'ExpandableButton'
- 在您的
Podfile
中添加use_frameworks!
- 运行
pod install
- 添加到文件中
import ExpandableButton
使用方法
您可以使用 frame
(默认为 .zero
)、direction
(默认为 .right
)和项目(每个项目都是按钮)初始化 ExpandableButton。direction
是打开方向。items
是包含有关将来按钮信息的 [ExpandableButtonItem]
。方向示例
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)
带有 image
和 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)
带有 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
以及 cornerRadius
buttonView.arrowWidth = 2
buttonView.separatorWidth = 2
buttonView.layer.cornerRadius = 30
自定义 open
和 close
动作的图标,closeOpenImagesInsets
// custom open and close images
buttonView.openImage = UIImage(named: "open")
buttonView.closeImage = UIImage(named: "close")
buttonView.closeOpenImagesInsets = insets
支持 attributedTitle
,highlightedAttributedTitle
和自定义项 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)
)
]
将 attributedTitle
放置于 image
下方(使用 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
)
]
您可以调用 open()
和 close()
let buttonView = ExpandableButtonView(items: items)
buttonView.open()
buttonView.close()
所有选项
ExpandableButtonView
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
direction |
方向 |
.right |
打开方向。可以是 .left 、.right 、.up 或 .down 。只在 init(frame:direction:items:) 中设置。 |
state |
状态 |
.closed |
当前状态。可以是 .opened 、.closed 或 .animating 。 |
animationDuration |
时间间隔 |
0.2 |
打开、关闭和箭头动画持续时间。 |
closeOnAction |
布尔值 |
false |
如果为 true ,则在任何项目动作后调用 close() 。 |
isHapticFeedback |
布尔值 |
true |
开启触觉反馈(Taptic engine) |
arrowInsets |
UIEdgeInsets |
top: 12 left: 12 bottom: 12 right: 12 |
箭头内边距。 |
arrowWidth |
CGFloat |
1 |
箭头线宽。 |
arrowColor |
UIColor |
UIColor.black |
箭头颜色。 |
closeOpenImagesInsets |
UIEdgeInsets |
.zero |
自定义关闭和打开图像的内边距。 |
closeImage |
UIImage? |
nil |
自定义关闭图像。 |
openImage |
UIImage? |
nil |
自定义打开图像。 |
isSeparatorHidden |
布尔值 |
false |
如果为 true ,则隐藏分隔视图。 |
separatorColor |
UIColor |
UIColor.black |
分隔线颜色。 |
separatorInset |
CGFloat |
8 |
分隔线从顶部、底部对 .left 、.right 方向的偏移量和从左边、右边对 up 、down 方向的偏移量。 |
separatorWidth |
CGFloat |
1 |
分隔视图宽度。 |
ExpandableButtonItem
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
image |
UIImage? |
nil |
.normal 状态的图标。 |
highlightedImage |
UIImage? |
nil |
.highlighted 状态的图标。 |
attributedTitle |
NSAttributedString? |
nil |
.normal 状态的属性字符串。 |
highlightedAttributedTitle |
NSAttributedString? |
nil |
.highlighted 状态的属性字符串。 |
contentEdgeInsets |
UIEdgeInsets |
.zero |
对应于 UIButton 的 contentEdgeInsets 。 |
titleEdgeInsets |
UIEdgeInsets |
.zero |
对应于 UIButton 的 titleEdgeInsets 。 |
imageEdgeInsets |
UIEdgeInsets |
.zero |
对应于 UIButton 的 imageEdgeInsets 。 |
size |
CGSize? |
nil |
当前项的 UIButton 大小。如果为 nil ,则与箭头按钮大小相同。 |
titleAlignment |
NSTextAlignment |
.center |
titleAlignment 用于在 UIButton 中的 titleLabel 。 |
imageContentMode |
UIViewContentMode |
.scaleAspectFit |
imageContentMode 用于在 UIButton 中的 imageView 。 |
action |
(ExpandableButtonItem) -> Void |
{_ in} |
动作闭包。在 .touchUpInside 时调用 |
identifier |
String |
"" |
ExpandableButtonItem 的标识符。 |
您还可以在项目中使用 ArrowButton
(可使用核心图形绘制左、右、上和下箭头的按钮,只需调用 showLeftArrow()
、showRightArrow()
、showUpArrow()
或 showDownArrow()
)和 ActionButton
(具有 actionBlock
属性的简单 UIButton
,在 .touchUpInside
时调用)。
许可证
ExpandableButton 携带 MIT 许可证。有关更多信息,请参阅 LICENSE 文件。