代码之家  ›  专栏  ›  技术社区  ›  Ben Zotto sberry

不能在图像视图拉伸到其边界的层上设置CornerRadius和Shadow?

  •  18
  • Ben Zotto sberry  · 技术社区  · 14 年前

    这使我很为难。我有一个uiview(称之为“父级”)。该视图最底部的子视图是一个uiImageView(称之为“子视图”),其框架占据“父”边界的全部。

    我想绕过“父”视图的角,并设置一个投影。我在上面做这个 CALayer “父母”的通常情况:

    [[parent layer] setShadowOffset:CGSizeMake(5, 5)];
    [[parent layer] setShadowRadius:6];
    [[parent layer] setShadowOpacity:0.4];    
    [[parent layer] setCornerRadius:6];
    

    这将正确显示阴影,但不环绕拐角。

    这是一个好消息:

    1. 如果我移除“子”图像视图,或者缩小它,使它不占据“父”视图的整个边界,我会在父视图上正确地得到圆角和阴影。
    2. 如果我让“child”单独存在,但在“parent”视图上设置了“clipstobounds”,我就可以正确地得到角。但现在阴影消失了。
    3. 设置层上的角半径 小孩 似乎也没有效果。

    似乎“子”图像视图只是掩盖了“父”视图上的圆角,因为它占据了整个矩形,而基于父视图的剪切得到了角,但也掩盖了阴影。不知道为什么3不起作用。

    我错过了什么?我是不是因为盯着这个看得太久而忽略了一些明显的东西?

    谢谢。

    (令人震惊的是,“圆形喇叭的阴影”标签已经存在。太棒了。)

    5 回复  |  直到 6 年前
        1
  •  21
  •   Community Michael Schmitz    7 年前

    您将需要两个嵌套视图,内部视图设置圆角和剪切到绑定,外部视图具有阴影(因此不剪切)。在您的情况下,内部和外部视图可能是“child”和“parent”,但我想您没有为这些视图设置正确的剪切值?

    在中查看答案 Why masksToBounds = YES prevents CALayer shadow? .

        2
  •  5
  •   Matt Long    14 年前

    通常情况下,必须将clipstobounds设置为圆角,但由于要保留阴影,因此也必须将阴影的角设置为圆角。是否尝试使用贝塞尔路径设置阴影路径?将clipstobounds/maskstobounds保留为默认值,不。类似于:

      [[parent layer] setCornerRadius:6.0f];
      [[parent layer] setShadowPath:
                 [[UIBezierPath bezierPathWithRoundedRect:[parent bounds] 
                       cornerRadius:6.0f] CGPath]];
    
        3
  •  0
  •   fogelbaby    14 年前

    是否尝试设置子uiImageView的边界,使其也具有圆角?那么它可能不会覆盖容器视图的阴影。只是一个想法,不确定它是否会起作用。

        4
  •  0
  •   Imanou Petit    7 年前

    使用Swift 3,可以选择以下两个代码段中的一个,以便在图像视图或包含图像层的视图上设置CornerRadius和Shadow。


    1。使用 UIView , CALayer 以及弹簧和支柱

    import UIKit
    
    class ViewController: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // constants
            let radius: CGFloat = 20, dimension: CGFloat = 200, offset = 8
            let frame = CGRect(x: 0, y: 0, width: 200, height: 200)
    
            // custom view
            let customView = UIView(frame: frame)
            customView.contentMode = .scaleAspectFill
    
            // image layer
            let imageLayer = CALayer()
            imageLayer.contentsGravity = kCAGravityResizeAspectFill
            imageLayer.contents = UIImage(named: "image")!.cgImage
            imageLayer.masksToBounds = true
            imageLayer.frame = frame
            imageLayer.cornerRadius = radius
            imageLayer.masksToBounds = true
    
            // rounded layer
            let roundedLayer = CALayer()
            roundedLayer.shadowColor = UIColor.darkGray.cgColor
            roundedLayer.shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: dimension, height: dimension), cornerRadius: radius).cgPath
            roundedLayer.shadowOffset = CGSize(width: offset, height: offset)
            roundedLayer.shadowOpacity = 0.8
            roundedLayer.shadowRadius = 2
            roundedLayer.frame = frame
    
            // views and layers hierarchy
            customView.layer.addSublayer(imageLayer)
            customView.layer.insertSublayer(roundedLayer, below: imageLayer)
            view.addSubview(customView)
    
            // layout
            customView.center = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
            customView.autoresizingMask = [UIViewAutoresizing.flexibleLeftMargin, .flexibleRightMargin, .flexibleTopMargin, .flexibleBottomMargin]
        }
    
    }
    

    2。使用 UIVIEW , UIImageView , 加莱尔 和自动布局

    import UIKit
    
    class ViewController: UIViewController {
    
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // constants
            let radius: CGFloat = 20, dimension: CGFloat = 200, offset = 8
    
            // image view
            let imageView = UIImageView(image: UIImage(named: "image"))
            imageView.contentMode = .scaleAspectFill
            imageView.layer.cornerRadius = radius
            imageView.layer.masksToBounds = true
    
            // rounded view
            let roundedView = UIView()
            roundedView.layer.shadowColor = UIColor.darkGray.cgColor
            roundedView.layer.shadowPath = UIBezierPath(roundedRect: CGRect(x: 0, y: 0, width: dimension, height: dimension), cornerRadius: radius).cgPath
            roundedView.layer.shadowOffset = CGSize(width: offset, height: offset)
            roundedView.layer.shadowOpacity = 0.8
            roundedView.layer.shadowRadius = 2
    
            // views hierarchy
            roundedView.addSubview(imageView)
            view.addSubview(roundedView)
    
            // layout
            imageView.translatesAutoresizingMaskIntoConstraints = false
            roundedView.translatesAutoresizingMaskIntoConstraints = false
            roundedView.widthAnchor.constraint(equalToConstant: dimension).isActive = true
            roundedView.heightAnchor.constraint(equalToConstant: dimension).isActive = true
            imageView.widthAnchor.constraint(equalTo: roundedView.widthAnchor).isActive = true
            imageView.heightAnchor.constraint(equalTo: roundedView.heightAnchor).isActive = true
            roundedView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
            roundedView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
            imageView.centerXAnchor.constraint(equalTo: roundedView.centerXAnchor).isActive = true
            imageView.centerYAnchor.constraint(equalTo: roundedView.centerYAnchor).isActive = true
        }
    
    }
    

    两个代码段都会生成以下显示:

    enter image description here


    您可以找到更多的方法来将图像与圆角和阴影组合在一起。 Github repo .

        5
  •  0
  •   Ucdemir    6 年前

    如果您希望ImageView的阴影层具有角半径是更好的解决方案,请将ImageView视图设置为具有1点边距的子视图。和

     imgBrandLogo.backgroundColor = UIColor.blue
        imgBrandLogo.layer.cornerRadius = imgBrandLogo.frame.height/2
        imgBrandLogo.clipsToBounds = true
        viewBrandLogo.layer.shadowColor = UIColor(rgb:0x262626,alpha:0.24).cgColor
        viewBrandLogo.layer.shadowOffset = CGSize(width: 0, height: 1)
        viewBrandLogo.layer.shadowOpacity = 1
        viewBrandLogo.layer.shadowPath = UIBezierPath(roundedRect:imgBrandLogo.bounds , cornerRadius: imgBrandLogo.frame.height/2).cgPath
        viewBrandLogo.backgroundColor = UIColor.clear.withAlphaComponent(0.0)