iOS 圆角+渐变+阴影控件的解决方案

在项目中,遇到UI设计师要求整个项目中的按钮样式修改,由小圆角按钮改为“一定倾斜度的渐变色” + 两头半圆形 + 浅色阴影效果,容易想到的实现方式就是,让UI切图来实现;其实更好的方法是自定义一个按钮的子类,让子类具有那些效果,这样只需要使用子类去初始化按钮,按钮就具有了这种特性。

UI切图实现的优缺点:

优点:只需要给按钮设置可点击和不可点击的图片即可,不用管设置阴影、圆角、倾斜角度渐变色背景的代码

缺点:

1. UI需要切很多的图,可点击、不可点击状态下的图,UI设计师工作量大。

2. 自己要手动去一个一个设置图片,开发人员工作量大。

3. 后续如果还有这种按钮,还需要UI设计师切图,自己手动设置图片。。

4. 后续要修改成其他样式呢?。。。。。

自定义按钮子类实现的优缺点

优点:

1. 不需要UI切图,UI只需要把渐变的几个颜色值、倾斜的角度、阴影的属性告诉开发、给出一样参照例子。

2. 项目中所有要具有这种效果的按钮只需要将UIbutton改为自定义的类名即可,简单方便

3. 后续如果有其他页面中按钮需要这样的效果,只需要使用子类去创建视图即可,可拓展性好

4. 一改全改,修改子类,所有效果都可以跟着变,方便做统一修改。

缺点:需要将子类效果写好需要一点时间

经过上面的分析可以看出,我们该做出怎样的选择。

自定义按钮实现效果


效果如上

实现的参考代码:

- (void)drawRect:(CGRect)rect {    
 UIColor *color_middle = [UIColor colorWithHexString:@"#ff6a00"];  
   CGFloat selfH = rect.size.height;  
   self.layer.cornerRadius = selfH/2;  
   self.layer.shadowColor = color_middle.CGColor;  
   self.layer.shadowOpacity = 0.35f;    
 self.layer.shadowOffset = CGSizeMake(0, 3.5 * selfH/41);  
 if (self.gradientLayer) return;    
 UIColor *color_start = RGB(251,138,36);// [UIColor redColor];  
  UIColor *color_end = RGB(255,102,0);//[UIColor greenColor];  
   CAGradientLayer *gradientLayer = [CAGradientLayer layer];  
  CGFloat alpha = self.wj_enabled?1.f:.5;  
   gradientLayer.opacity = alpha;    
 self.gradientLayer = gradientLayer;    
gradientLayer.colors = @[(__bridge id)color_start.CGColor, (__bridge id)color_middle.CGColor, (__bridge id)color_end.CGColor];
//    gradientLayer.position = self.center;
    gradientLayer.locations = @[@0.0, @.5, @1.0];
    gradientLayer.type = kCAGradientLayerAxial;
    gradientLayer.startPoint = CGPointMake(0, .5);  
  gradientLayer.endPoint = CGPointMake(1.f, .6);    
 gradientLayer.cornerRadius = selfH/2;  
 gradientLayer.masksToBounds = YES;  
  gradientLayer.frame = CGRectMake(0, 0, rect.size.width, rect.size.height);  
   [self.layer insertSublayer:gradientLayer atIndex:0];
//    DLOG(@"gradientLayerdrawRect");    
 gradientLayer.shouldRasterize = self.layer.shouldRasterize = YES;  // 光栅化,设置后会有缓存效果,提升运行效率
  gradientLayer.rasterizationScale = [UIScreen mainScreen].scale;// 如果不这样设置,在使用masksToBounds的时候可能会有锯齿状
 }

具体实现代码:

https://github.com/1ikeSmi1e/TestShadow

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

推荐阅读更多精彩内容