Compare commits

...

2 Commits

Author SHA1 Message Date
Shadowfacts df65b785ef
Tweaks for transparent content views 2019-09-24 23:08:20 -04:00
Shadowfacts 36a63e1e23
Minor tweaks 2019-09-24 22:01:25 -04:00
4 changed files with 40 additions and 16 deletions

View File

@ -22,8 +22,9 @@ class SheetContainerDismissAnimationController: NSObject, UIViewControllerAnimat
fromVC.view.alpha = 1.0 fromVC.view.alpha = 1.0
fromVC.dimmingView.isHidden = true 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
dimmingView.backgroundColor = .systemGray let dimmingView = UIView(frame: fromVC.dimmingView.bounds)
dimmingView.backgroundColor = fromVC.dimmingView.backgroundColor
dimmingView.alpha = fromVC.dimmingView.alpha dimmingView.alpha = fromVC.dimmingView.alpha
let container = transitionContext.containerView let container = transitionContext.containerView
@ -32,8 +33,9 @@ class SheetContainerDismissAnimationController: NSObject, UIViewControllerAnimat
let duration = transitionDuration(using: transitionContext) let duration = transitionDuration(using: transitionContext)
UIView.animate(withDuration: duration, animations: { UIView.animate(withDuration: duration, animations: {
dimmingView.frame = container.bounds
dimmingView.alpha = 0 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 }, completion: { (finished) in
dimmingView.removeFromSuperview() dimmingView.removeFromSuperview()

View File

@ -24,17 +24,20 @@ class SheetContainerPresentationAnimationController: NSObject, UIViewControllerA
let finalFrame = transitionContext.finalFrame(for: toVC) let finalFrame = transitionContext.finalFrame(for: toVC)
let dimmingView = UIView(frame: finalFrame) let dimmingView = UIView(frame: finalFrame)
dimmingView.backgroundColor = .systemGray dimmingView.backgroundColor = toVC.dimmingView.backgroundColor
dimmingView.alpha = 0 dimmingView.alpha = 0
let container = transitionContext.containerView let container = transitionContext.containerView
container.addSubview(dimmingView) container.addSubview(dimmingView)
container.addSubview(toVC.view) 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) let duration = transitionDuration(using: transitionContext)
UIView.animate(withDuration: duration, animations: { 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 dimmingView.alpha = toVC.dimmingView.alpha
toVC.view.transform = .identity toVC.view.transform = .identity
}, completion: { (finished) in }, completion: { (finished) in

View File

@ -63,25 +63,25 @@ public class SheetContainerViewController: UIViewController {
dimmingView = UIView() dimmingView = UIView()
dimmingView.translatesAutoresizingMaskIntoConstraints = false dimmingView.translatesAutoresizingMaskIntoConstraints = false
dimmingView.backgroundColor = .systemGray dimmingView.backgroundColor = .black
dimmingView.alpha = (maximumDimmingAlpha - minimumDimmingAlpha) / 2 dimmingView.alpha = (maximumDimmingAlpha - minimumDimmingAlpha) / 2
view.addSubview(dimmingView) 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) addChild(content)
content.didMove(toParent: self) content.didMove(toParent: self)
view.addSubview(content.view) view.addSubview(content.view)
topConstraint = content.view.topAnchor.constraint(equalTo: view.topAnchor, constant: initialConstant) topConstraint = content.view.topAnchor.constraint(equalTo: view.topAnchor, constant: initialConstant)
NSLayoutConstraint.activate([ NSLayoutConstraint.activate([
content.view.leadingAnchor.constraint(equalTo: view.leadingAnchor), content.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
content.view.trailingAnchor.constraint(equalTo: view.trailingAnchor), content.view.trailingAnchor.constraint(equalTo: view.trailingAnchor),
topConstraint, 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(_:))) let panGesture = UIPanGestureRecognizer(target: self, action: #selector(panGestureRecognized(_:)))
@ -123,7 +123,7 @@ public class SheetContainerViewController: UIViewController {
self.topConstraint.constant = springToDetent.1 self.topConstraint.constant = springToDetent.1
let springVelocity = velocity.y / springDistance 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.view.layoutIfNeeded()
self.dimmingView.alpha = lerp(springToDetent.1, min: self.topDetent.offset, max: self.bottomDetent.offset, from: self.maximumDimmingAlpha, to: self.minimumDimmingAlpha) self.dimmingView.alpha = lerp(springToDetent.1, min: self.topDetent.offset, max: self.bottomDetent.offset, from: self.maximumDimmingAlpha, to: self.minimumDimmingAlpha)
}, completion: { (finished) in }, completion: { (finished) in

View File

@ -20,7 +20,26 @@ class ViewController: UIViewController {
@IBAction func buttonPressed(_ sender: Any) { @IBAction func buttonPressed(_ sender: Any) {
let content = UIViewController() let content = UIViewController()
content.view.translatesAutoresizingMaskIntoConstraints = false 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) let sheet = SheetContainerViewController(content: content)
sheet.delegate = self sheet.delegate = self
sheet.detents = [.bottom, .middle, .top] sheet.detents = [.bottom, .middle, .top]