Today Widget 中实现按钮背景磨砂

今天无意中添加了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 !

一点小思路，如果有更好的实现，欢迎提出，共同提高！