Merge pull request #154 from hyperoslo/fix/layout

Update layout for iPhone X

Author: onmyway133

Example/DemoLightbox/DemoLightbox/ViewController.swift

@@ -13,11 +13,11 @@ class ViewController: UIViewController {
     button.autoresizingMask = [.flexibleTopMargin, .flexibleLeftMargin, .flexibleRightMargin, .flexibleBottomMargin]
 
     return button
-    }()
+  }()
 
   override func viewDidLoad() {
     super.viewDidLoad()
-    
+
     view.autoresizingMask = [.flexibleTopMargin, .flexibleLeftMargin, .flexibleRightMargin, .flexibleBottomMargin]
     view.backgroundColor = UIColor.white
     view.addSubview(showButton)
@@ -30,16 +30,16 @@ class ViewController: UIViewController {
       LightboxImage(imageURL: URL(string: "https://cdn.arstechnica.net/2011/10/05/iphone4s_sample_apple-4e8c706-intro.jpg")!),
       LightboxImage(
         image: UIImage(named: "photo1")!,
-        text: "Some very long lorem ipsum text. Some very long lorem ipsum text. Some very long lorem ipsum text. Some very long lorem ipsum text"
+        text: "Photography is the science, art, application and practice of creating durable images by recording light or other electromagnetic radiation, either electronically by means of an image sensor, or chemically by means of a light-sensitive material such as photographic film"
       ),
       LightboxImage(
         image: UIImage(named: "photo2")!,
-        text: "🌲 🌲 🌲 🌲 🌲 🌲 🌲 🌲 🌲 🌲 🌲    🏃 🌲 🏃‍♀️ 🌲 🌲 🌲 🌲  🌲 🌲 🌲 🌲\n\nSuspendisse massa massa, maximus et finibus ac, auctor volutpat diam.\n\nPellentesque consequat magna condimentum mauris bibendum, nec ornare nisl hendrerit. Phasellus nec ultrices sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n\nSuspendisse sit amet facilisis ante, ac suscipit sem. Integer feugiat sit amet erat sit amet mattis. Donec tristique, nunc ut varius elementum, nisi elit viverra ipsum, vitae aliquam justo libero in arcu. Quisque tempor et justo at malesuada. Curabitur justo dolor, ornare convallis sollicitudin sed, consectetur eu turpis. \n\nNulla et dui condimentum, laoreet lacus eu, ultrices nisl. Vivamus in ante volutpat, gravida nunc scelerisque, sagittis tellus. Nullam justo purus, sagittis a tincidunt a, maximus nec sem.",
+        text: "Emoji 😍 (/ɪˈmoʊdʒi/; singular emoji, plural emoji or emojis;[4] from the Japanese 絵文字えもじ, pronounced [emodʑi]) are ideograms and smileys used in electronic messages and web pages. Emoji are used much like emoticons and exist in various genres, including facial expressions, common objects, places and types of weather 🌅☔️💦, and animals 🐶🐱",
         videoURL: URL(string: "https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4")
       ),
       LightboxImage(
         image: UIImage(named: "photo3")!,
-        text: "Some very long lorem ipsum text."
+        text: "A lightbox is a translucent surface illuminated from behind, used for situations where a shape laid upon the surface needs to be seen with high contrast."
       )
     ]
 

Images/demo.png

@@ -22,6 +22,11 @@ packed with all the features you expect:
 - [x] Powerful configuration.
 - [x] Demo project.
 
+<div align="center">
+<img src="Images/demo.png" height="500">
+<img src="Images/demo2.png" height="500">
+</div>
+
 ## Table of Contents
 
 * [Usage](#usage)

Images/demo2.png

@@ -28,14 +28,6 @@ class LightboxTransition: UIPercentDrivenInteractiveTransition {
   func transition(_ show: Bool) {
     guard let controller = lightboxController else { return }
 
-    controller.headerView.transform = show
-      ? CGAffineTransform.identity
-      : CGAffineTransform(translationX: 0, y: -200)
-
-    controller.footerView.transform = show
-      ? CGAffineTransform.identity
-      : CGAffineTransform(translationX: 0, y: 250)
-
     if interactive {
       controller.view.backgroundColor = UIColor.black.withAlphaComponent(show ? 1 : 0)
     } else {

README.md

@@ -22,15 +22,13 @@ open class LightboxController: UIViewController {
 
   lazy var scrollView: UIScrollView = { [unowned self] in
     let scrollView = UIScrollView()
-    scrollView.frame = self.screenBounds
     scrollView.isPagingEnabled = false
     scrollView.delegate = self
-    scrollView.isUserInteractionEnabled = true
     scrollView.showsHorizontalScrollIndicator = false
     scrollView.decelerationRate = UIScrollViewDecelerationRateFast
 
     return scrollView
-    }()
+  }()
 
   lazy var overlayTapGestureRecognizer: UITapGestureRecognizer = { [unowned self] in
     let gesture = UITapGestureRecognizer()
@@ -61,14 +59,14 @@ open class LightboxController: UIViewController {
     view.delegate = self
 
     return view
-    }()
+  }()
 
   open fileprivate(set) lazy var footerView: FooterView = { [unowned self] in
     let view = FooterView()
     view.delegate = self
 
     return view
-    }()
+  }()
 
   open fileprivate(set) lazy var overlayView: UIView = { [unowned self] in
     let view = UIView(frame: CGRect.zero)
@@ -79,11 +77,7 @@ open class LightboxController: UIViewController {
     view.alpha = 0
 
     return view
-    }()
-
-  var screenBounds: CGRect {
-    return UIApplication.shared.delegate?.window??.bounds ?? .zero
-  }
+  }()
 
   // MARK: - Properties
 
@@ -194,6 +188,25 @@ open class LightboxController: UIViewController {
     }
   }
 
+  open override func viewDidLayoutSubviews() {
+    super.viewDidLayoutSubviews()
+
+    scrollView.frame = view.bounds
+    footerView.frame = CGRect(
+      x: 0,
+      y: view.bounds.height - footerView.frame.height,
+      width: view.bounds.width,
+      height: 100
+    )
+
+    headerView.frame = CGRect(
+      x: 0,
+      y: 16,
+      width: view.bounds.width,
+      height: 100
+    )
+  }
+
   open override var prefersStatusBarHidden: Bool {
     return LightboxConfig.hideStatusBar
   }
@@ -275,18 +288,8 @@ open class LightboxController: UIViewController {
       }
     }
 
-    let bounds = scrollView.bounds
-    let headerViewHeight = headerView.closeButton.frame.height > headerView.deleteButton.frame.height
-      ? headerView.closeButton.frame.height
-      : headerView.deleteButton.frame.height
-
-    headerView.frame = CGRect(x: 0, y: 16, width: bounds.width, height: headerViewHeight)
-    footerView.frame = CGRect(x: 0, y: 0, width: bounds.width, height: 70)
-
     [headerView, footerView].forEach { ($0 as AnyObject).configureLayout() }
 
-    footerView.frame.origin.y = bounds.height - footerView.frame.height
-
     overlayView.frame = scrollView.frame
     overlayView.resizeGradientLayer()
   }
@@ -332,7 +335,7 @@ extension LightboxController: UIScrollViewDelegate {
     }
 
     targetContentOffset.pointee.x = x
-    currentPage = Int(x / screenBounds.width)
+    currentPage = Int(x / view.bounds.width)
   }
 }
 
@@ -398,7 +401,7 @@ extension LightboxController: HeaderViewDelegate {
 
     DispatchQueue.main.asyncAfter(deadline: DispatchTime.now() + 0.5) {
       self.configureLayout()
-      self.currentPage = Int(self.scrollView.contentOffset.x / self.screenBounds.width)
+      self.currentPage = Int(self.scrollView.contentOffset.x / self.view.bounds.width)
       deleteButton.isEnabled = true
     }
   }
@@ -416,8 +419,6 @@ extension LightboxController: HeaderViewDelegate {
 extension LightboxController: FooterViewDelegate {
 
   public func footerView(_ footerView: FooterView, didExpand expanded: Bool) {
-    footerView.frame.origin.y = screenBounds.height - footerView.frame.height
-
     UIView.animate(withDuration: 0.25, animations: {
       self.overlayView.alpha = expanded ? 1.0 : 0.0
       self.headerView.deleteButton.alpha = expanded ? 0.0 : 1.0

Source/Library/LightboxTransition.swift

@@ -16,23 +16,23 @@ open class FooterView: UIView {
     label.delegate = self
 
     return label
-    }()
+  }()
 
   open fileprivate(set) lazy var pageLabel: UILabel = { [unowned self] in
     let label = UILabel(frame: CGRect.zero)
     label.isHidden = !LightboxConfig.PageIndicator.enabled
     label.numberOfLines = 1
 
     return label
-    }()
+  }()
 
   open fileprivate(set) lazy var separatorView: UIView = { [unowned self] in
     let view = UILabel(frame: CGRect.zero)
     view.isHidden = !LightboxConfig.PageIndicator.enabled
     view.backgroundColor = LightboxConfig.PageIndicator.separatorColor
 
     return view
-    }()
+  }()
 
   let gradientColors = [UIColor(hex: "040404").alpha(0.1), UIColor(hex: "040404")]
   open weak var delegate: FooterViewDelegate?
@@ -76,17 +76,29 @@ open class FooterView: UIView {
     }
   }
 
-  // MARK: - Layout
-
-  fileprivate func resetFrames() {
-    frame.size.height = infoLabel.frame.height + 40 + 0.5
-
-    pageLabel.frame.origin = CGPoint(
-      x: (frame.width - pageLabel.frame.width) / 2,
-      y: frame.height - pageLabel.frame.height - 2)
+  open override func layoutSubviews() {
+    super.layoutSubviews()
+
+    do {
+      let bottomPadding: CGFloat
+      if #available(iOS 11, *) {
+        bottomPadding = safeAreaInsets.bottom
+      } else {
+        bottomPadding = 0
+      }
+
+      pageLabel.frame.origin = CGPoint(
+        x: (frame.width - pageLabel.frame.width) / 2,
+        y: frame.height - pageLabel.frame.height - 2 - bottomPadding
+      )
+    }
 
-    separatorView.frame = CGRect(x: 0, y: pageLabel.frame.minY - 2.5,
-      width: frame.width, height: 0.5)
+    separatorView.frame = CGRect(
+      x: 0,
+      y: pageLabel.frame.minY - 2.5,
+      width: frame.width,
+      height: 0.5
+    )
 
     infoLabel.frame.origin.y = separatorView.frame.minY - infoLabel.frame.height - 15
 
@@ -107,7 +119,6 @@ extension FooterView: LayoutConfigurable {
 extension FooterView: InfoLabelDelegate {
 
   public func infoLabel(_ infoLabel: InfoLabel, didExpand expanded: Bool) {
-    resetFrames()
     _ = (expanded || infoLabel.fullText.isEmpty) ? removeGradientLayer() : addGradientLayer(gradientColors)
     delegate?.footerView(self, didExpand: expanded)
   }

Source/LightboxController.swift

@@ -6,13 +6,6 @@ protocol HeaderViewDelegate: class {
 }
 
 open class HeaderView: UIView {
-
-  var centerTextStyle: NSMutableParagraphStyle = {
-    var style = NSMutableParagraphStyle()
-    style.alignment = .center
-    return style
-  }()
-
   open fileprivate(set) lazy var closeButton: UIButton = { [unowned self] in
     let title = NSAttributedString(
       string: LightboxConfig.CloseButton.text,
@@ -38,7 +31,7 @@ open class HeaderView: UIView {
     button.isHidden = !LightboxConfig.CloseButton.enabled
 
     return button
-    }()
+  }()
 
   open fileprivate(set) lazy var deleteButton: UIButton = { [unowned self] in
     let title = NSAttributedString(
@@ -65,7 +58,7 @@ open class HeaderView: UIView {
     button.isHidden = !LightboxConfig.DeleteButton.enabled
 
     return button
-    }()
+  }()
 
   weak var delegate: HeaderViewDelegate?
 
@@ -99,9 +92,22 @@ open class HeaderView: UIView {
 extension HeaderView: LayoutConfigurable {
 
   @objc public func configureLayout() {
-    closeButton.frame.origin = CGPoint(
-      x: bounds.width - closeButton.frame.width - 17, y: 0)
+    let topPadding: CGFloat
 
-    deleteButton.frame.origin = CGPoint(x: 17, y: 0)
+    if #available(iOS 11, *) {
+      topPadding = safeAreaInsets.top
+    } else {
+      topPadding = 0
+    }
+
+    closeButton.frame.origin = CGPoint(
+      x: bounds.width - closeButton.frame.width - 17,
+      y: topPadding
+    )
+    
+    deleteButton.frame.origin = CGPoint(
+      x: 17,
+      y: topPadding
+    )
   }
 }