最近想在自己的项目中添加一个右下角的悬浮按钮,这种按钮最初是在安卓中兴起来的,但是再很多iOS App中都能看到它身影, 下面就推荐一个比较适合新手使用的悬浮按钮例子ActionButton。(在GitHub上翻出来的)
GitHub:https://github.com/lourenco-marinho/ActionButton
使用方法:除了官网提供的使用CocoaPods安装外,就是直接下载下来,手动添加它的有用文件。找到这两个文件拉到自己的工程目录下即可。
这个ActionButton.swift文件中就是gif中的橙色+号按钮的各种属性。这是这个按钮样式的相关属性
public init(attachedToView view: UIView,items: [ActionButtonItem]?) {
super@H_301_11@.init()
self@H_301_11@.parentView = view
self@H_301_11@.items = items
let bounds = self@H_301_11@.parentView@H_301_11@.bounds
self@H_301_11@.floatButton = UIButton(type: @H_301_11@.Custom)
self@H_301_11@.floatButton@H_301_11@.layer@H_301_11@.cornerRadius = CGFloat(floatButtonRadius / 2)
self@H_301_11@.floatButton@H_301_11@.layer@H_301_11@.shadowOpacity = 1
self@H_301_11@.floatButton@H_301_11@.layer@H_301_11@.shadowRadius = 2
self@H_301_11@.floatButton@H_301_11@.layer@H_301_11@.shadowOffset = CGSize(width: 1,height: 1)
self@H_301_11@.floatButton@H_301_11@.layer@H_301_11@.shadowColor = UIColor@H_301_11@.grayColor()@H_301_11@.CGColor
self@H_301_11@.floatButton@H_301_11@.setTitle("+",forState: @H_301_11@.Normal)
self@H_301_11@.floatButton@H_301_11@.setImage(nil,forState: @H_301_11@.Normal)
self@H_301_11@.floatButton@H_301_11@.backgroundColor = self@H_301_11@.backgroundColor
self@H_301_11@.floatButton@H_301_11@.titleLabel!@H_301_11@.font = UIFont(name: "HelveticaNeue-Light",size: 35)
self@H_301_11@.floatButton@H_301_11@.contentEdgeInsets = UIEdgeInsets(top: 0,left: 0,bottom: 8,right: 0)
self@H_301_11@.floatButton@H_301_11@.userInteractionEnabled = true
self@H_301_11@.floatButton@H_301_11@.translatesAutoresizingMaskIntoConstraints = false
self@H_301_11@.floatButton@H_301_11@.addTarget(self,action: @H_301_11@#selector(ActionButton.buttonTapped(_:)),forControlEvents: .TouchUpInside)
self@H_301_11@.floatButton@H_301_11@.addTarget(self,action: @H_301_11@#selector(ActionButton.buttonTouchDown(_:)),forControlEvents: .TouchDown)
self@H_301_11@.parentView@H_301_11@.addSubview(self@H_301_11@.floatButton)
self@H_301_11@.contentView = UIView(frame: bounds)
// 下面3行是设置点击按钮后背景View的视觉效果(类似毛玻璃),这里注释掉让背景无视觉效果
// self@H_301_11@.blurVisualEffect = UIVisualEffectView(effect: UIBlurEffect(style: @H_301_11@.Light))
// self@H_301_11@.blurVisualEffect@H_301_11@.frame = self@H_301_11@.contentView@H_301_11@.frame
// self@H_301_11@.contentView@H_301_11@.addSubview(self@H_301_11@.blurVisualEffect)
let tap = UITapGestureRecognizer(target: self,action: @H_301_11@#selector(ActionButton.backgroundTapped(_:)))
self@H_301_11@.contentView@H_301_11@.addGestureRecognizer(tap)
self@H_301_11@.installConstraints()
}
ActionButtonItem.swift中就是弹出按钮的相关属性,跟上面类似。
导入这两个文件到自己的工程后,就可以在ViewController.swift中使用了。
var actionButton: ActionButton! // 首先右下角悬浮按钮声明
// 视图创建
override func viewDidLoad() {
super.viewDidLoad()
setContentView() // 配置界面
addActionButton() // 添加右下角悬浮按钮
}
func addActionButton() -> Void {
let twitterImage = UIImage(named: "icon_1.png")!
let plusImage = UIImage(named: "icon_2.png")!
let google = ActionButtonItem(title: "密码设置",image: plusImage)
google.action = { item in print("Google Plus...") }
let twitter = ActionButtonItem(title: "退 出",image: twitterImage)
twitter.action = { item in print("Twitter...") }
actionButton = ActionButton(attachedToView: self.view,items: [twitter,google])
actionButton.action = { button in button.toggleMenu() }
// 在这里设置按钮的相关属性,其实就是把刚刚那两个文件中的原始属性给覆盖了一遍,这里仅覆盖了2个旧属性
actionButton.setTitle("=",forState: .Normal)
actionButton.backgroundColor = UIColor(red: 238.0/255.0,green: 130.0/255.0,blue: 34.0/255.0,alpha:1.0)
}
这样运行一下就能得到自己想要的悬浮按钮了。总的来说这个例子就是简单实用,效果可能相对其他的例子简单些,但是功能是一样的。喜欢的话就尝试下吧 :)大家加油!