今天无意中添加了Chrome浏览器的Today插件,
其中按钮的磨砂背景与Today本身的毛玻璃效果挺契合,
如图
于是就打算模仿实现一个图中类似的磨砂按钮
首先得有一个Host App,这里我之前已经写好了一个App,
然后给这个App添加Today Extension,
这里过程不再赘述
去掉Today视图左侧空白
Today会默认在视图左侧留出一部分,
纯粹就是为了视图统一(可能是为了美观)
添加如下代码即可去掉空白
func widgetMarginInsetsForProposedMarginInsets(defaultMarginInsets: UIEdgeInsets) -> UIEdgeInsets {
return UIEdgeInsetsZero
}
限定视图的长度
self.preferredContentSize = CGSizeMake(0, 60)
常规地添加按钮
var btn = UIButton()
// 按钮放在视图中间
btn.frame = CGRectMake(self.view.frame.width/4, 8, self.view.frame.width/2, 44)
btn.layer.cornerRadius = 4.0 // 设置按钮圆角
btn.backgroundColor = UIColor(colorLiteralRed: 1, green: 1, blue: 1, alpha: 0.8)
btn.setTitle("💡 查看密码")
btn.setTitleColor(UIColor.blackColor(), forState: .Normal)
self.view.addSubview(btn)
运行,显然背景并不透明
我尝试调整Button的背景的透明度,
不过效果并不好,我想思路应该不在这里
iOS 7 之后,苹果带来全新的磨砂界面效果,也提供了UIVisualEffectView,
这是一个磨砂背景View,把控件放在UIVisualEffectView上,
背景自动变成磨砂的背景
具体:
// 删掉上部分代码中
self.view.addSubview(btn)
let effect: UIVisualEffect = UIVibrancyEffect.notificationCenterVibrancyEffect()
let blurBackgroundView: UIVisualEffectView = UIVisualEffectView(effect: effect)
// 直接覆盖整个视图,对视图本身没啥影响
blurBackgroundView.frame = CGRectMake(0, 0, self.view.frame.width, self.view.frame.height)
// 把按钮放在blur中
blurBackgroundView.contentView.addSubview(btn)
//把blur放在Today视图中
self.view.addSubview(blurBackgroundView)
再运行
发现字体是白色,然而之前设置的是黑色
想想估计是在VisualEffectView上失效了
想到把原来Button上的文字直接用一个Label代替并覆盖Button,Label背景设置为clearColor
删除Button的文字部分
btn.setTitle("💡 查看密码", forState: .Normal)
btn.setTitleColor(UIColor.blackColor(), forState: .Normal)
添加如下代码
label.frame = btn.frame
label.layer.cornerRadius = 4.0
label.text = "💡 查看密码"
label.textColor = UIColor.blackColor()
label.textAlignment = .Center
label.backgroundColor = UIColor.clearColor()
self.view.addSubview(blurBackgroundView)
self.view.addSubview(label)
再运行,就达到跟Chorme插件按钮相同的效果了
Over !
一点小思路,如果有更好的实现,欢迎提出,共同提高!