Swift 中简单且可自定义的按钮
斯威夫特按钮
维护者: @nickm01 @pmacro @aryamansharda
Swift 中简单且可自定义的按钮。
安装
椰子足类
pod 'SwiftyButton'
迦太基
github 'TakeScoop/SwiftyButton'
用法
平面按钮
let button = FlatButton()
button.color = .cyan
button.highlightedColor = .blue
button.cornerRadius = 5
可按下按钮
let button = PressableButton()
button.colors = .init(button: .cyan, shadow: .blue)
button.shadowHeight = 5
button.cornerRadius = 5
All Properties
Here is a list of all the properties that you can modify. Those are all editable directly from Interface Builder. See or to set defaults for those properties.FlatButton.Defaults
PressableButton.Defaults
FlatButton
button.color = .cyan
button.highlightedColor = .cyan
button.selectedColor = .blue
button.disabledButtonColor = .gray
button.cornerRadius = 8
PressableButton
button.colors = .init(button: .cyan, shadow: .blue)
button.disabledColors = .init(button: .gray, shadow: .darkGray)
button.shadowHeight = 10
button.cornerRadius = 8
button.depth = 0.5 // In percentage of shadowHeight
Interface Builder (Storyboard/XIB)
Add a as usual, then:UIButton
- Modify the underlying class to , and that the module is set to
FlatButton/PressableButton
SwiftyButton
- Make sure that the button type is set to
Custom
Defaults
You can set defaults that will be applied for any new instance of SwiftyButton by modifying the or structure:FlatButton.Defaults
PressableButton.Defaults
FlatButton.Defaults.color = .cyan
PressableButton.Defaults.cornerRadius = 8
...
Custom Content
Use to add custom content in a Swifty Button.CustomPressableButton
This is a subclass of that exposes a content view that moves when the button state changes. All you have to do is add your views inside and setup layout constraints relative to this view.SwiftyButton
button.contentView
Install
pod `SwiftyButton/CustomContent`
Usage
Here is how you would create a button similar to the one above (here we used PureLayout for constraints):
let button = CustomPressableButton()
let indicator = UIActivityIndicatorView(activityIndicatorStyle: .white)
button.contentView.addSubview(indicator)
indicator.autoPinEdgesToSuperviewEdges(with: UIEdgeInsets(top: 10, left: 15, bottom: 10, right: 0), excludingEdge: .right)
indicator.startAnimating()
let label = UILabel()
button.contentView.addSubview(label)
label.autoPinEdgesToSuperviewEdges(with: UIEdgeInsets(top: 10, left: 0, bottom: 10, right: 10), excludingEdge: .left)
label.autoPinEdge(.left, to: .right, of: indicator, withOffset: 10)
label.text = "Loading..."
label.textColor = .white
Known limitations
PressableButton
only works with plain colors (no alpha / transparency) because of the way its background image is rendered. See #2PressableButton
manages title and image insets automatically ( and ). See #5titleEdgeInsets
imageEdgeInsets
- User-specified inset values for and will be overridden.
top
bottom
- You may specify inset values for and .
left
right
- User-specified inset values for and will be overridden.
More examples
Look at the Examples folder to see more button examples.
Contribute
Publishing a new version
Here’s an example of a version bump: bump to 0.8.0.
Replace with the version you’re about to publish.NEW_VERSION
- Checkout the branch and ensure it’s up-to-date.
master
- Open and edit settings for the target. Change the target version to .
SwiftyButton.xcworkspace
SwiftyButton
NEW_VERSION
- Open and add a new section . At the bottom of the document, copy a version anchor and link to the new version tag (which we’ll create later). Insert a new empty section on top.
CHANGELOG.md
[NEW_VERSION]
[master]
- Open and edit to .
SwiftyButton.podspec
s.version
NEW_VERSION
- Commit your changes as .
Bump to NEW_VERSION
- Create a new git tag named and push your commit + tag to Github.
NEW_VERSION
- Push the new pod version with
$ pod trunk push ./
License
This project is copyrighted under the MIT license. Complete license can be found here: https://github.com/TakeScoop/SwiftyButton/blob/master/LICENSE
Credits
- Inspired by HTPressableButton: https://github.com/herinkc/HTPressableButton
- Colors used in examples come from https://flatuicolors.com/