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 !

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,816评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,729评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,300评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,780评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,890评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,084评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,151评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,912评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,355评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,504评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,150评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2 351

推荐阅读更多精彩内容