Tweaks for transparent content views

SheetImagePicker/SheetContainerDismissAnimationController.swift

@@ -22,8 +22,9 @@ class SheetContainerDismissAnimationController: NSObject, UIViewControllerAnimat
         fromVC.view.alpha = 1.0
         fromVC.dimmingView.isHidden = true
         
-        let dimmingView = UIView(frame: fromVC.view.frame)
-        dimmingView.backgroundColor = .systemGray
+        // 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
 
         let container = transitionContext.containerView
@@ -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

@@ -24,17 +24,20 @@ class SheetContainerPresentationAnimationController: NSObject, UIViewControllerA
         let finalFrame = transitionContext.finalFrame(for: toVC)
 
         let dimmingView = UIView(frame: finalFrame)
-        dimmingView.backgroundColor = .systemGray
+        dimmingView.backgroundColor = toVC.dimmingView.backgroundColor
         dimmingView.alpha = 0
         
         let container = transitionContext.containerView
         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

@@ -63,25 +63,25 @@ public class SheetContainerViewController: UIViewController {
         
         dimmingView = UIView()
         dimmingView.translatesAutoresizingMaskIntoConstraints = false
-        dimmingView.backgroundColor = .systemGray
+        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(_:)))
@@ -123,7 +123,7 @@ public class SheetContainerViewController: UIViewController {
                 self.topConstraint.constant = springToDetent.1
                 let springVelocity = velocity.y / springDistance
                 
-                UIView.animate(withDuration: 0.35, delay: 0, usingSpringWithDamping: 0.6, initialSpringVelocity: springVelocity, animations: {
+                UIView.animate(withDuration: 0.35, delay: 0, usingSpringWithDamping: 0.75, initialSpringVelocity: springVelocity, animations: {
                     self.view.layoutIfNeeded()
                     self.dimmingView.alpha = lerp(springToDetent.1, min: self.topDetent.offset, max: self.bottomDetent.offset, from: self.maximumDimmingAlpha, to: self.minimumDimmingAlpha)
                 }, completion: { (finished) in

SheetImagePickerTest/ViewController.swift

@@ -20,7 +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.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]