PMNG-5504 [platform] Update camera view layout with the design requir…

…ements

.gitignore

@@ -2,5 +2,4 @@
 /.build
 /Packages
 xcuserdata/
-*.xcodeproj
 *.zip

CreditCardScanner.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name             = 'CreditCardScanner'
-  s.version          = '0.1.0'
+  s.version          = '0.1.1'
   s.summary          = 'A library to scan credit card info using the device camera and on-device machine learning'
   s.homepage         = 'https://github.com/yhkaplan/credit-card-scanner'
   # s.screenshots     = 'www.example.com/screenshots_1', 'www.example.com/screenshots_2' TODO:

Example/CreditCardScannerExample.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>IDEDidComputeMac32BitWarning</key>
+	<true/>
+</dict>
+</plist>

Example/CreditCardScannerExample.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -0,0 +1,25 @@
+{
+  "object": {
+    "pins": [
+      {
+        "package": "Reg",
+        "repositoryURL": "https://github.com/yhkaplan/Reg.git",
+        "state": {
+          "branch": null,
+          "revision": "c8f1f51bc088708b3b3ecf04523b5bedd6914222",
+          "version": "0.3.0"
+        }
+      },
+      {
+        "package": "Sukar",
+        "repositoryURL": "https://github.com/yhkaplan/Sukar.git",
+        "state": {
+          "branch": null,
+          "revision": "ce0d8cad4df8a5050be8c1ad3e42378eb3b80950",
+          "version": "0.1.0"
+        }
+      }
+    ]
+  },
+  "version": 1
+}

Example/ExampleResultViewController.swift

@@ -25,8 +25,8 @@ class ExampleResultViewController: UIViewController {
 //        vc.textBackgroundColor = .white
 
         let vc = CreditCardScannerViewController(delegate: self)
-        vc.modalPresentationStyle = .fullScreen
-        present(vc, animated: true, completion: nil)
+        let navigationController = UINavigationController(rootViewController: vc)
+        present(navigationController, animated: true, completion: nil)
     }
 
     override func viewDidAppear(_ animated: Bool) {

Sources/CreditCardScanner/CameraView.swift

@@ -23,6 +23,8 @@ final class CameraView: UIView {
     private let maskLayerColor: UIColor
     private let maskLayerAlpha: CGFloat
 
+    let cardScanAnchorView = UIView()
+
     // MARK: - Capture related
 
     private let captureSessionQueue = DispatchQueue(
@@ -46,6 +48,8 @@ final class CameraView: UIView {
         self.maskLayerColor = maskLayerColor
         self.maskLayerAlpha = maskLayerAlpha
         super.init(frame: .zero)
+
+        setupCardScanAnchorView()
     }
 
     @available(*, unavailable)
@@ -140,6 +144,18 @@ final class CameraView: UIView {
         }
     }
 
+    func setupCardScanAnchorView() {
+        addSubview(cardScanAnchorView)
+        cardScanAnchorView.translatesAutoresizingMaskIntoConstraints = false
+        NSLayoutConstraint.activate([
+            cardScanAnchorView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
+            cardScanAnchorView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
+            cardScanAnchorView.centerXAnchor.constraint(equalTo: centerXAnchor),
+            cardScanAnchorView.centerYAnchor.constraint(equalTo: centerYAnchor, constant: CreditCard.verticalShift),
+            cardScanAnchorView.heightAnchor.constraint(equalTo: cardScanAnchorView.widthAnchor, multiplier: CreditCard.heightRatioAgainstWidth)
+        ])
+    }
+
     func setupRegionOfInterest() {
         guard regionOfInterest == nil else { return }
         /// Mask layer that covering area around camera view
@@ -148,12 +164,12 @@ final class CameraView: UIView {
         backLayer.backgroundColor = maskLayerColor.withAlphaComponent(maskLayerAlpha).cgColor
 
         //  culcurate cutoutted frame
-        let cuttedWidth: CGFloat = bounds.width - 40.0
+        let cuttedWidth: CGFloat = bounds.width - 16.0 * 2
         let cuttedHeight: CGFloat = cuttedWidth * CreditCard.heightRatioAgainstWidth
 
         let centerVertical = (bounds.height / 2.0)
-        let cuttedY: CGFloat = centerVertical - (cuttedHeight / 2.0)
-        let cuttedX: CGFloat = 20.0
+        let cuttedY: CGFloat = centerVertical - (cuttedHeight / 2.0) + CreditCard.verticalShift
+        let cuttedX: CGFloat = 16.0
 
         let cuttedRect = CGRect(x: cuttedX,
                                 y: cuttedY,
@@ -226,4 +242,5 @@ extension CameraView: AVCaptureVideoDataOutputSampleBufferDelegate {
 extension CreditCard {
     // The aspect ratio of credit-card is Golden-ratio
     static let heightRatioAgainstWidth: CGFloat = 0.6180469716
+    static let verticalShift: CGFloat = -30
 }

Sources/CreditCardScanner/CreditCardScannerViewController.swift

@@ -32,7 +32,10 @@ open class CreditCardScannerViewController: UIViewController {
     public var subtitleLabelText: String = "Line up card within the lines"
     public var cancelButtonTitleText: String = "Cancel"
     public var cancelButtonTitleTextColor: UIColor = .gray
-    public var labelTextColor: UIColor = .white
+    public var titleLabelFont: UIFont = .preferredFont(forTextStyle: .largeTitle)
+    public var titleLabelTextColor: UIColor = .white
+    public var subtitleLabelFont: UIFont = .preferredFont(forTextStyle: .title3)
+    public var subtitleLabelTextColor: UIColor = .white
     public var textBackgroundColor: UIColor = .black
     public var cameraViewCreditCardFrameStrokeColor: UIColor = .white
     public var cameraViewMaskLayerColor: UIColor = .black
@@ -109,15 +112,15 @@ private extension CreditCardScannerViewController {
             cameraView.topAnchor.constraint(equalTo: view.topAnchor),
             cameraView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
             cameraView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
-            cameraView.heightAnchor.constraint(equalTo: cameraView.widthAnchor, multiplier: CreditCard.heightRatioAgainstWidth, constant: 100),
+            cameraView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
         ])
 
         bottomStackView.translatesAutoresizingMaskIntoConstraints = false
         view.addSubview(bottomStackView)
         NSLayoutConstraint.activate([
             bottomStackView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
             bottomStackView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
-            bottomStackView.topAnchor.constraint(equalTo: cameraView.bottomAnchor),
+            bottomStackView.topAnchor.constraint(equalTo: cameraView.cardScanAnchorView.bottomAnchor, constant: 32),
         ])
 
         cancelButton.translatesAutoresizingMaskIntoConstraints = false
@@ -129,7 +132,7 @@ private extension CreditCardScannerViewController {
         ])
 
         bottomStackView.axis = .vertical
-        bottomStackView.spacing = 16.0
+        bottomStackView.spacing = 8
         bottomStackView.isLayoutMarginsRelativeArrangement = true
         bottomStackView.distribution = .equalSpacing
         bottomStackView.directionalLayoutMargins = .init(top: 8.0, leading: 8.0, bottom: 8.0, trailing: 8.0)
@@ -140,12 +143,12 @@ private extension CreditCardScannerViewController {
     func setupLabelsAndButtons() {
         titleLabel.text = titleLabelText
         titleLabel.textAlignment = .center
-        titleLabel.textColor = labelTextColor
-        titleLabel.font = .preferredFont(forTextStyle: .largeTitle)
+        titleLabel.textColor = titleLabelTextColor
+        titleLabel.font = titleLabelFont
         subtitleLabel.text = subtitleLabelText
         subtitleLabel.textAlignment = .center
-        subtitleLabel.font = .preferredFont(forTextStyle: .title3)
-        subtitleLabel.textColor = labelTextColor
+        subtitleLabel.font = subtitleLabelFont
+        subtitleLabel.textColor = subtitleLabelTextColor
         subtitleLabel.numberOfLines = 0
         cancelButton.setTitle(cancelButtonTitleText, for: .normal)
         cancelButton.setTitleColor(cancelButtonTitleTextColor, for: .normal)