今天无意中添加了Chrome浏览器的Today插件，
其中按钮的磨砂背景与Today本身的毛玻璃效果挺契合，
如图
IMG_0687.jpg
于是就打算模仿实现一个图中类似的磨砂按钮
首先得有一个Host App，这里我之前已经写好了一个App，
然后给这个App添加Today Extension，
这里过程不再赘述
去掉Today视图左侧空白
Today会默认在视图左侧留出一部分，
纯粹就是为了视图统一(可能是为了美观)
![Uploading IMG_0689_668187.jpg . . .]
添加如下代码即可去掉空白
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的背景的透明度，
不过效果并不好，我想思路应该不在这里
IMG_0689.jpg
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)
再运行
IMG_0690.jpg
发现字体是白色，然而之前设置的是黑色
想想估计是在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插件按钮相同的效果了
IMG_0691.jpg
Over !
一点小思路，如果有更好的实现，欢迎提出，共同提高！
网友评论