как сделать обрезанный UIView, чтобы показать дно этого UIView?

Question

Мне нужно сделать что-то вроде этого

Как вы можете видеть, есть два полукруглых вида справа и слева, которые будут показывать нижний UIView (UIView с темно-синим цветом фона). Как этого добиться?

Я упрощаю задачу так, как показано на рисунке ниже:

что мне с этим сделать white view, чтобы сделать обрезанный эффект и фактически показать фоновый вид (синий вид)?

edit: нет, я не могу дать синий цвет этому белому виду. как вы можете видеть на первом рисунке, цвет фона фактически градиентный, поэтому мне нужно «обрезать» этот UIView, чтобы показать цвет фона нижнего UIView

Answer 1

Вот точка зрения, которую вы хотите достичь.Цель состоит в том, чтобы вы нарисовали этот вид углами и дугами.Если вам нужна помощь или объяснение того, как я это сделал, вы можете просто спросить.

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    view.backgroundColor = .blue
    view.addSubview(croppedView)

    croppedView.cutViewCornersWith(cornerRadius: 20, arcRadius: 14)
}

lazy var croppedView: CroppedView = {
    let cv = CroppedView(frame: CGRect(x: 0,
                                       y: 0,
                                       width: self.view.frame.width - 120,
                                       height: 400))
    cv.center = view.center
    cv.backgroundColor = .lightGray
    return cv
}()

}

import UIKit

class CroppedView: UIView {

func cutViewCornersWith(cornerRadius: CGFloat, arcRadius: CGFloat) {
    let path = UIBezierPath()

    let width = self.frame.width
    let height = self.frame.height
    let arcCenter = height - height/3

    path.move(to: CGPoint(x: 0, y: cornerRadius))

    path.addArc(withCenter: CGPoint(x: cornerRadius, y: cornerRadius),
                radius: cornerRadius,
                startAngle: CGFloat(180.0).toRadians(),
                endAngle: CGFloat(270.0).toRadians(),
                clockwise: true)

    path.addLine(to: CGPoint(x: width - cornerRadius, y: 0.0))

    path.addArc(withCenter: CGPoint(x: width - cornerRadius, y: cornerRadius),
                radius: cornerRadius,
                startAngle: CGFloat(90.0).toRadians(),
                endAngle: CGFloat(0.0).toRadians(),
                clockwise: true)

    path.addLine(to: CGPoint(x: width, y: arcCenter - arcRadius))

    path.addArc(withCenter: CGPoint(x: width, y: arcCenter),
                radius: arcRadius,
                startAngle: CGFloat(270.0).toRadians(),
                endAngle: CGFloat(90.0).toRadians(),
                clockwise: false)

    path.addLine(to: CGPoint(x: width, y: height - cornerRadius))

    path.addArc(withCenter: CGPoint(x: width - cornerRadius, y: height - cornerRadius),
                radius: cornerRadius,
                startAngle: CGFloat(0.0).toRadians(),
                endAngle: CGFloat(90.0).toRadians(),
                clockwise: true)

    path.addLine(to: CGPoint(x: cornerRadius, y: height))

    path.addArc(withCenter: CGPoint(x: cornerRadius, y: height - cornerRadius),
                radius: cornerRadius,
                startAngle: CGFloat(90.0).toRadians(),
                endAngle: CGFloat(180.0).toRadians(),
                clockwise: true)

    path.addLine(to: CGPoint(x: 0, y: arcCenter + arcRadius))

    path.addArc(withCenter: CGPoint(x: 0, y: arcCenter),
                radius: arcRadius,
                startAngle: CGFloat(90.0).toRadians(),
                endAngle: CGFloat(270.0).toRadians(),
                clockwise: false)

    path.addLine(to: CGPoint(x: 0, y: arcCenter - arcRadius))
    path.addLine(to: CGPoint(x: 0, y: 0))

    path.close()

    let shapeLayer = CAShapeLayer()
    shapeLayer.path = path.cgPath
    self.layer.mask = shapeLayer
}

}

extension CGFloat {
    func toRadians() -> CGFloat {
        return self * .pi / 180.0
    }
}

Answer 2

Есть способ сделать это в коде. Вам нужно установить «маску». Я не уверен, что вы можете сделать это с помощью InterfaceBuilder (я держусь подальше от этого). Вот суть кода, который я использовал (вырезано из моего кода, но не проверено). Здесь я делаю прозрачную полосу шириной вида и высотой отверстия - я обычно рисую середину сборщика.

class HoledView: UIView {
    override func draw(_ rect: CGRect) {
        backgroundColor?.setFill()
        UIRectFill(rect)
        let layer = CAShapeLayer()
        let path = CGMutablePath()
        let rect = CGRect(x: 0, y: (self.frame.height - holeHeight) / 2, width: self.frame.width, height: holeHeight)
        path.addRect(rect)
        path.addRect(self.bounds)
        layer.path = path
        layer.fillRule = kCAFillRuleEvenOdd
        self.layer.mask = layer
    }
}

Основная идея заключается в том, что маска определяет область, в которую будет рисоваться вид. В моем примере в центре маски есть отверстие, поэтому вид не будет прорисовываться в этой области и останется полностью прозрачным.

Хотя я сделал это, используя слои, это можно сделать, используя вместо этого вид маски :

Альфа-канал представления определяет, какая часть содержимого и фона представления просматривается. Полностью или частично непрозрачные пиксели позволяют основному контенту показывать сквозные, но полностью прозрачные пиксели, блокирующие этот контент.