ios实现圆角、阴影和边框共存

Swift版写法在个人主页Swift集合中
由于使用masksToBounds切圆角时投影的效果会消失,所以这里的思路是通过layer来设置。


Simulator Screen Shot - iPhone 12 - 2022-01-21 at 15.59.50.png

如上图所示,接下来分别实现无边框阴影、渐变背景色+圆角阴影和边框圆角阴影
以下属性可根据自身需求进行相应调整:

shadowColor // 阴影颜色
shadowOffset  // 阴影偏移量
shadowOpacity  // 阴影透明度
shadowRadius  // 阴影半径

如上图(1-1),无边框阴影效果实现:

-(UIView *)bgView{
    if (!_bgView) {
        _bgView = [[UIView alloc]initWithFrame:CGRectMake(50, 200, [UIScreen mainScreen].bounds.size.width-100, 100)];
    }
    return _bgView;
}
[self.view addSubview:self.bgView];
[self setViewShadow:self.bgView];
- (void)setViewShadow:(UIView *)curView{
    curView.backgroundColor = [UIColor whiteColor];
    curView.layer.shadowColor = [UIColor colorWithRed:129/255.0 green:174/255.0 blue:254/255.0 alpha:0.28].CGColor;
    curView.layer.shadowOffset = CGSizeMake(0,2);
    curView.layer.shadowOpacity = 1;
    curView.layer.shadowRadius = 14;
    curView.layer.cornerRadius = 4;
}

如上图(1-2),渐变背景色+圆角阴影效果实现:

-(UIButton *)loginBtn{
    if (!_loginBtn) {
        _loginBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _loginBtn.frame = CGRectMake(50, CGRectGetMaxY(self.bgView.frame)+50, [UIScreen mainScreen].bounds.size.width-100, 50);
        [_loginBtn setTitle:@"登录" forState:UIControlStateNormal];
        [_loginBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
    }
    return _loginBtn;
}
[self.view addSubview:self.loginBtn];
[self setViewColorShadow:self.loginBtn];
- (void)setViewColorShadow:(UIView *)curView{
  //渐变背景色设置
    CAGradientLayer *gl = [CAGradientLayer layer];
 /*
          注意: 若是用的xib布局发现宽/高不匹配,可重置gradient.frame = CGRectMake(0, 0, view的宽度,  view的高度)
         */
    gl.frame = curView.bounds;
    gl.startPoint = CGPointMake(0, 0);
    gl.endPoint = CGPointMake(1, 1);
    gl.colors = @[(__bridge id)[UIColor colorWithRed:10/255.0 green:182/255.0 blue:254/255.0 alpha:1.0].CGColor,(__bridge id)[UIColor colorWithRed:73/255.0 green:90/255.0 blue:255/255.0 alpha:1.0].CGColor];
    gl.locations = @[@(0.0),@(1.0f)];
    //圆角阴影设置
    gl.shadowColor = [UIColor colorWithRed:51/255.0 green:145/255.0 blue:255/255.0 alpha:0.4].CGColor;
    gl.shadowOffset = CGSizeMake(0,6);
    gl.shadowOpacity = 1;
    gl.shadowRadius = 7;
    gl.cornerRadius = curView.bounds.size.height*0.5;
    [curView.layer addSublayer:gl];
}

如上图(1-3),边框圆角阴影效果实现:

-(UIButton *)borderBtn{
    if (!_borderBtn) {
        _borderBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _borderBtn.frame = CGRectMake(100, CGRectGetMaxY(self.loginBtn.frame)+50, [UIScreen mainScreen].bounds.size.width-200, 50);
        [_borderBtn setTitle:@"获取验证码" forState:UIControlStateNormal];
        [_borderBtn setTitleColor:[UIColor colorWithRed:2/255.0 green:116/255.0 blue:223/255.0 alpha:1.0] forState:UIControlStateNormal];
    }
    return _borderBtn;
}
[self.view addSubview:self.borderBtn];
[self setViewBorderShadow:self.borderBtn];
- (void)setViewBorderShadow:(UIView *)curView{
    curView.backgroundColor = [UIColor whiteColor];
    curView.layer.shadowColor = [UIColor colorWithRed:51/255.0 green:145/255.0 blue:255/255.0 alpha:0.4].CGColor;
    curView.layer.shadowOffset = CGSizeMake(0,3);
    curView.layer.shadowOpacity = 1;
    curView.layer.shadowRadius = 5;
    curView.layer.borderWidth = 1;
    curView.layer.borderColor = [UIColor colorWithRed:2/255.0 green:119/255.0 blue:228/255.0 alpha:1.0].CGColor;
    curView.layer.cornerRadius = curView.bounds.size.height*0.5;
}

你可能感兴趣的:(ios实现圆角、阴影和边框共存)