Tweaks for transparent content views

SheetImagePicker/SheetContainerDismissAnimationController.swift

@@ -22,7 +22,8 @@ class SheetContainerDismissAnimationController: NSObject, UIViewControllerAnimat
         fromVC.view.alpha = 1.0
         fromVC.dimmingView.isHidden = true
         
-        let dimmingView = UIView(frame: fromVC.view.frame)
+        // match the frame to the original dimming view's frame so that it doesn't go under the content
+        let dimmingView = UIView(frame: fromVC.dimmingView.bounds)
         dimmingView.backgroundColor = fromVC.dimmingView.backgroundColor
         dimmingView.alpha = fromVC.dimmingView.alpha
 
@@ -32,8 +33,9 @@ class SheetContainerDismissAnimationController: NSObject, UIViewControllerAnimat
 
         let duration = transitionDuration(using: transitionContext)
         UIView.animate(withDuration: duration, animations: {
+            dimmingView.frame = container.bounds
             dimmingView.alpha = 0
-            fromVC.view.transform = CGAffineTransform(translationX: 0, y: fromVC.view.bounds.height)
+            fromVC.view.transform = CGAffineTransform(translationX: 0, y: fromVC.content.view.bounds.height)
         }, completion: { (finished) in
             dimmingView.removeFromSuperview()
 

SheetImagePicker/SheetContainerPresentationAnimationController.swift

@@ -31,10 +31,13 @@ class SheetContainerPresentationAnimationController: NSObject, UIViewControllerA
         container.addSubview(dimmingView)
         container.addSubview(toVC.view)
         
-        toVC.view.transform = CGAffineTransform(translationX: 0, y: toVC.view.bounds.height)
+        toVC.view.transform = CGAffineTransform(translationX: 0, y: toVC.initialConstant)
         
         let duration = transitionDuration(using: transitionContext)
         UIView.animate(withDuration: duration, animations: {
+            // we animate the dimming view's frame so that it doesn't go under the content view, in case there's a transparent background
+            // we also extend the dimming view under any rounded corners the content view has
+            dimmingView.frame = CGRect(x: 0, y: 0, width: dimmingView.bounds.width, height: toVC.initialConstant + toVC.content.view.layer.cornerRadius)
             dimmingView.alpha = toVC.dimmingView.alpha
             toVC.view.transform = .identity
         }, completion: { (finished) in

SheetImagePicker/SheetContainerViewController.swift

@@ -66,22 +66,22 @@ public class SheetContainerViewController: UIViewController {
         dimmingView.backgroundColor = .black
         dimmingView.alpha = (maximumDimmingAlpha - minimumDimmingAlpha) / 2
         view.addSubview(dimmingView)
-        NSLayoutConstraint.activate([
+
-            dimmingView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
-            dimmingView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
-            dimmingView.topAnchor.constraint(equalTo: view.topAnchor),
-            dimmingView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
-        ])
-        
         addChild(content)
         content.didMove(toParent: self)
         view.addSubview(content.view)
         topConstraint = content.view.topAnchor.constraint(equalTo: view.topAnchor, constant: initialConstant)
+        
         NSLayoutConstraint.activate([
             content.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
             content.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
             topConstraint,
-            content.view.bottomAnchor.constraint(equalTo: view.bottomAnchor)
+            content.view.bottomAnchor.constraint(equalTo: view.bottomAnchor),
+            dimmingView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
+            dimmingView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
+            dimmingView.topAnchor.constraint(equalTo: view.topAnchor),
+            // we add the content's corner radius here, so that the dimming view extends under the transparent parts of the content view's rounded corners
+            dimmingView.bottomAnchor.constraint(equalTo: content.view.topAnchor, constant: content.view.layer.cornerRadius)
         ])
         
         let panGesture = UIPanGestureRecognizer(target: self, action: #selector(panGestureRecognized(_:)))

SheetImagePickerTest/ViewController.swift

@@ -20,9 +20,26 @@ class ViewController: UIViewController {
     @IBAction func buttonPressed(_ sender: Any) {
         let content = UIViewController()
         content.view.translatesAutoresizingMaskIntoConstraints = false
-        content.view.backgroundColor = .red
         content.view.layer.masksToBounds = true
-        content.view.layer.cornerRadius = view.bounds.width * 0.05
+        content.view.layer.cornerRadius = view.bounds.width * 0.02
+        
+        let blurEffect = UIBlurEffect(style: .systemChromeMaterial)
+        let blurView = UIVisualEffectView(effect: blurEffect)
+        blurView.translatesAutoresizingMaskIntoConstraints = false
+        let label = UILabel()
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.text = "Hello, sheet!"
+        blurView.contentView.addSubview(label)
+        content.view.addSubview(blurView)
+        NSLayoutConstraint.activate([
+            content.view.leadingAnchor.constraint(equalTo: blurView.contentView.leadingAnchor),
+            content.view.trailingAnchor.constraint(equalTo: blurView.contentView.trailingAnchor),
+            content.view.topAnchor.constraint(equalTo: blurView.contentView.topAnchor),
+            content.view.bottomAnchor.constraint(equalTo: blurView.contentView.bottomAnchor),
+            label.centerXAnchor.constraint(equalTo: blurView.contentView.centerXAnchor),
+            label.centerYAnchor.constraint(equalTo: blurView.contentView.centerYAnchor)
+        ])
+        
         let sheet = SheetContainerViewController(content: content)
         sheet.delegate = self
         sheet.detents = [.bottom, .middle, .top]