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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容