How to display a UIView when it overlaps another iOS?

Question

I am trying to re-implement something similar to the Apple Watch Friend Picker. I have two UIViews, both with a corner radius of half their height so they appear as circles. How do I calculate where they overlap and only show that part. My UI is in the first picture and the second one contains the desired behavior. Thanks in advance for any help?

Answer 1

For each of the circles with the initials, you can have a top view--the unselected state--and a bottom view--the selected state. You then have a movable view in the shape of a circle that tracks to the tip of the point. When that view intersects with any of the outer circle you create a mask equal to the rounded bounds of that invisible view.

For example:

if CGRectIntersectsRect(self.movableView.frame, self.topView.frame)
        {
            self.topView.layer.mask = nil
            let shapeLayer = CAShapeLayer()
            let rect = self.topView.convertRect(self.movableView.bounds, fromView: self.movableView)
            let path = UIBezierPath(ovalInRect: rect)
            let maskPath = CGPathCreateMutable()
            CGPathAddRect(maskPath, nil, self.view.frame)
            CGPathAddPath(maskPath, nil, path.CGPath)
            shapeLayer.path = maskPath
            shapeLayer.fillRule = kCAFillRuleEvenOdd
            self.topView.layer.mask = shapeLayer
        }

To avoid excessive hit detection you should keep track of the currently selected view and only check for intersection with the view immediately preceding the selected view, the selected view, and the view following the selected view. I've created a rudimentary example of the masking if you're interested.