how to make cropped UIView to show the bottom of that UIView? - ios

Question

I need to make something like this
as you can see, there are two half round views in the right and left side that will show the bottom UIView( UIView with dark blue background color).how to achieve this?
I simplify the problem to be like the picture below:
what should I do to that white view to make cropped effect and actually show the background view (blue view) ?
edit: no, I can't give blue color to that white view. as you can see in the first picture, the background color is actually gradient color, thats why i need to "crop" this UIView to show the background color of the bottom UIView

Answer 1

Here is the view that you want to achieve. The goal is that you need to draw this view with corners and arcs. If you need any help or explanation about how I did that you can just ask.
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

There is a way to do this in code. You need to set a 'mask'. I am not sure if you can do this using the InterfaceBuilder (I stay well clear of it). Here is the gist of the code that I used (cut from my code, but untested). Here I make a transparent strip the width of the view and holeHeight tall - I was custom drawing the middle of a picker.
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
}
}
The basic idea is that the mask defines the area that the view will draw into. In my example there is a hole in the middle of the mask, so the view will not draw into that area, and it stays completely transparent.
Although I did this using layers, it may be doable using a mask view instead:
The view’s alpha channel determines how much of the view’s content and background shows through. Fully or partially opaque pixels allow the underlying content to show through but fully transparent pixels block that content.