首页 文章

UIView圆角与阴影

提问于
浏览
15

我试图展示一个带圆角和投影的UIView . 但问题是maskToBounds属性仅适用于任何一种情况 .

如果maskToBounds为YES,则显示圆角,当为NO时,则显示阴影 . 这是实现,但它只显示没有阴影的圆角:

[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]]];


    self.view.layer.masksToBounds = YES; 
    self.view.layer.opaque = NO; 
    self.view.layer.cornerRadius = 15.0f; 


    self.view.layer.shadowColor = [UIColor blackColor].CGColor;
    self.view.layer.shadowRadius = 5.0; 
    self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
    self.view.layer.shadowOpacity = 0.9f;

想法!

注意:我已阅读并实现了以下线程中的代码,但它不起作用:UIView with rounded corners and drop shadow?

UPDATE 1:

我试图创建两个单独的视图 . 一个代表半径,一个代表阴影 . 问题是在半径视图的顶部创建阴影,如下面的屏幕截图所示:

enter image description here

H

ere is the code: 

 self.view.layer.masksToBounds = YES; 
    self.view.layer.opaque = NO; 
    self.view.layer.cornerRadius = 15.0f; 
   // self.view.backgroundColor = [UIColor clearColor];
    self.view.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]];
//
    UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    shadowView.layer.shadowColor = [UIColor blackColor].CGColor;
    shadowView.layer.shadowRadius = 2.0; 
    shadowView.backgroundColor = [UIColor clearColor];
    shadowView.layer.shadowOffset = CGSizeMake(3.0, 3.0);
    shadowView.layer.shadowOpacity = 0.9f;
    shadowView.layer.shadowPath = [UIBezierPath 
                                                                   bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;

    [self.view addSubview:shadowView];

更新2:

倒置仍然不起作用 . 没有圆角 .

UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    roundCornerView.layer.masksToBounds = YES; 
    roundCornerView.layer.opaque = NO; 
    roundCornerView.layer.cornerRadius = 15.0f; 

    self.view.layer.shadowColor = [UIColor blackColor].CGColor;
    self.view.layer.shadowRadius = 2.0; 
    //self.view.backgroundColor = [UIColor clearColor];
    self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
    self.view.layer.shadowOpacity = 0.9f;
    self.view.layer.shadowPath = [UIBezierPath 
                                                                   bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;

    [self.view addSubview:roundCornerView];

SOLUTION:

UIView *roundCornerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
    roundCornerView.layer.masksToBounds = YES; 
    roundCornerView.layer.opaque = NO; 
    roundCornerView.layer.cornerRadius = 15.0f; 

    roundCornerView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"blue_gradient.jpeg"]];

    self.view.layer.shadowColor = [UIColor blackColor].CGColor;
    self.view.layer.shadowRadius = 2.0; 
    self.view.backgroundColor = [UIColor clearColor];
    self.view.layer.shadowOffset = CGSizeMake(3.0, 3.0);
    self.view.layer.shadowOpacity = 0.9f;
    //self.view.layer.shadowPath = [UIBezierPath 
      //                                                             bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;

    [self.view addSubview:roundCornerView];

3 回答

  • 9

    创建两个视图 . 一个带阴影(并且不要忘记设置shadowPath),在其中添加一个带有 cornerRadiusmaskToBounds 的子视图 .

  • 0

    接受的答案不包含任何代码,因此这里是Swift中的一个示例(请参阅Obj-C中OP的解决方案的原始问题) .

    enter image description here

    与接受的答案一样,此解决方案对阴影和角半径使用单独的视图 .

    // add the shadow to the base view
    baseView.backgroundColor = UIColor.clear
    baseView.layer.shadowColor = UIColor.black.cgColor
    baseView.layer.shadowOffset = CGSize(width: 3, height: 3)
    baseView.layer.shadowOpacity = 0.7
    baseView.layer.shadowRadius = 4.0
    
    // improve performance
    baseView.layer.shadowPath = UIBezierPath(roundedRect: baseView.bounds, cornerRadius: 10).cgPath
    baseView.layer.shouldRasterize = true
    baseView.layer.rasterizationScale = UIScreen.main.scale
    
    // add the border to subview
    let borderView = UIView()
    borderView.frame = baseView.bounds
    borderView.layer.cornerRadius = 10
    borderView.layer.borderColor = UIColor.black.cgColor
    borderView.layer.borderWidth = 1.0
    borderView.layer.masksToBounds = true
    baseView.addSubview(borderView)
    
    // add any other subcontent that you want clipped
    let otherSubContent = UIImageView()
    otherSubContent.image = UIImage(named: "lion")
    otherSubContent.frame = borderView.bounds
    borderView.addSubview(otherSubContent)
    

    我的完整答案是here .

  • 11

    您可以通过以下方式使用单个视图执行此操作:

    1.首先添加一个角半径

    yourview.layer.cornerRadius = 5.0
    

    2.调用下面的功能

    shadowToView(view : yourview)
    
    
    func shadowToView(view : UIView){
        view.layer.shadowOffset = CGSize(width: 0, height: 3)
        view.layer.shadowOpacity = 0.6
        view.layer.shadowRadius = 3.0
        view.layer.shadowColor = UIColor.darkGray.cgColor
    }
    

相关问题