今天無意中添加了Chrome瀏覽器的Today插件，
其中按鈕的磨砂背景與Today本身的毛玻璃效果挺契合，
如圖

IMG_0687.jpg

于是就打算模仿實(shí)現(xiàn)一個圖中類似的磨砂按鈕

首先得有一個Host App，這里我之前已經(jīng)寫好了一個App，
然后給這個App添加Today Extension，
這里過程不再贅述

去掉Today視圖左側(cè)空白

Today會默認(rèn)在視圖左側(cè)留出一部分，
純粹就是為了視圖統(tǒng)一(可能是為了美觀)

![Uploading IMG_0689_668187.jpg . . .]

添加如下代碼即可去掉空白

func widgetMarginInsetsForProposedMarginInsets(defaultMarginInsets: UIEdgeInsets) -> UIEdgeInsets {
        return UIEdgeInsetsZero
    }

限定視圖的長度

 self.preferredContentSize = CGSizeMake(0, 60)

常規(guī)地添加按鈕

var btn = UIButton()  
// 按鈕放在視圖中間
btn.frame = CGRectMake(self.view.frame.width/4, 8, self.view.frame.width/2, 44)
btn.layer.cornerRadius = 4.0  // 設(shè)置按鈕圓角
btn.backgroundColor = UIColor(colorLiteralRed: 1, green: 1, blue: 1, alpha: 0.8)
btn.setTitle("?? 查看密碼")
btn.setTitleColor(UIColor.blackColor(), forState: .Normal)
self.view.addSubview(btn)

運(yùn)行，顯然背景并不透明
我嘗試調(diào)整Button的背景的透明度，
不過效果并不好，我想思路應(yīng)該不在這里

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)

再運(yùn)行

IMG_0690.jpg

發(fā)現(xiàn)字體是白色，然而之前設(shè)置的是黑色

想想估計(jì)是在VisualEffectView上失效了

想到把原來Button上的文字直接用一個Label代替并覆蓋Button，Label背景設(shè)置為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)

再運(yùn)行，就達(dá)到跟Chorme插件按鈕相同的效果了

IMG_0691.jpg

Over !

一點(diǎn)小思路，如果有更好的實(shí)現(xiàn)，歡迎提出，共同提高！