Add pageControl

Amir Khorsandi · Amir Khorsandi · commit d91ac767f61f · 2020-07-04T15:42:43.000+02:00
diff --git a/Samples/PagingLayoutSamples/Assets.xcassets/Shapes/grayArrowLeft.imageset/Contents.json b/Samples/PagingLayoutSamples/Assets.xcassets/Shapes/grayArrowLeft.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "grayArrowLeft.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Samples/PagingLayoutSamples/Assets.xcassets/Shapes/grayArrowLeft.imageset/grayArrowLeft.pdf b/Samples/PagingLayoutSamples/Assets.xcassets/Shapes/grayArrowLeft.imageset/grayArrowLeft.pdf
diff --git a/Samples/PagingLayoutSamples/Assets.xcassets/Shapes/grayArrowRight.imageset/Contents.json b/Samples/PagingLayoutSamples/Assets.xcassets/Shapes/grayArrowRight.imageset/Contents.json
@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "grayArrowRight.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/Samples/PagingLayoutSamples/Assets.xcassets/Shapes/grayArrowRight.imageset/grayArrowRight.pdf b/Samples/PagingLayoutSamples/Assets.xcassets/Shapes/grayArrowRight.imageset/grayArrowRight.pdf
diff --git a/Samples/PagingLayoutSamples/Modules/LayoutDesigner/LayoutDesignerViewModel.swift b/Samples/PagingLayoutSamples/Modules/LayoutDesigner/LayoutDesignerViewModel.swift
@@ -22,7 +22,7 @@ class LayoutDesignerViewModel {
     }
     var layouts: [ShapeLayout] = .stack
     var shapesViewModel: ShapesViewModel {
-        ShapesViewModel(layouts: layouts, showBackButton: false)
+        ShapesViewModel(layouts: layouts, showBackButton: false, showPageControl: true)
     }
     private(set) var optionViewModels: [LayoutDesignerOptionSectionViewModel] = []
     private let codeGenerator = OptionsCodeGenerator()
diff --git a/Samples/PagingLayoutSamples/Modules/Shapes/ShapesViewController.swift b/Samples/PagingLayoutSamples/Modules/Shapes/ShapesViewController.swift
@@ -38,6 +38,7 @@ class ShapesViewController: UIViewController, NibBased, ViewModelBased {
     @IBOutlet private weak var backButton: UIButton!
     @IBOutlet private weak var collectionView: UICollectionView!
     @IBOutlet private weak var layoutTypeCollectionView: UICollectionView!
+    @IBOutlet private weak var pageControlView: PageControlView!
     
     private var didScrollCollectionViewToMiddle = false
     
@@ -79,6 +80,14 @@ class ShapesViewController: UIViewController, NibBased, ViewModelBased {
         navigationController?.popViewController(animated: true)
     }
     
+    @IBAction private func onNextButtonTouched() {
+        (collectionView.collectionViewLayout as? CollectionViewPagingLayout)?.goToNextPage()
+    }
+    
+    @IBAction private func onPreviousButtonTouched() {
+        (collectionView.collectionViewLayout as? CollectionViewPagingLayout)?.goToPreviousPage()
+    }
+    
     
     // MARK: Private functions
     
@@ -88,6 +97,10 @@ class ShapesViewController: UIViewController, NibBased, ViewModelBased {
         backButton.isHidden = !viewModel.showBackButton
         configureCollectionView()
         configureLayoutTypeCollectionView()
+        
+        pageControlView.numberOfPages = 8
+        pageControlView.preferences = .init(color: UIColor.black.withAlphaComponent(0.5), dimFactor: 0.2, dotRadius: 5, gapSize: 6, currentDotBorderWidth: 3.5)
+        pageControlView.superview?.isHidden = !viewModel.showPageControl
     }
     
     private func configureCollectionView() {
@@ -101,6 +114,7 @@ class ShapesViewController: UIViewController, NibBased, ViewModelBased {
         layout.numberOfVisibleItems = 10
         collectionView.collectionViewLayout = layout
         layout.configureTapOnCollectionView(goToSelectedPage: true)
+        layout.delegate = self
         collectionView.showsHorizontalScrollIndicator = false
         collectionView.clipsToBounds = false
         collectionView.backgroundColor = .clear
@@ -229,3 +243,11 @@ extension ShapesViewController: UICollectionViewDelegate {
         updateSelectedLayout()
     }
 }
+
+
+extension ShapesViewController: CollectionViewPagingLayoutDelegate {
+    func onCurrentPageChanged(layout: CollectionViewPagingLayout, currentPage: Int) {
+        guard layout.collectionView == collectionView else { return }
+        pageControlView.currentPage = currentPage
+    }
+}
diff --git a/Samples/PagingLayoutSamples/Modules/Shapes/ShapesViewController.xib b/Samples/PagingLayoutSamples/Modules/Shapes/ShapesViewController.xib
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="16097" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
     <device id="retina6_1" orientation="portrait" appearance="light"/>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16086"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -12,6 +12,7 @@
                 <outlet property="backButton" destination="p26-Ln-ASY" id="xKW-ep-uc6"/>
                 <outlet property="collectionView" destination="KcB-fn-Ojq" id="b1G-Kq-Mrc"/>
                 <outlet property="layoutTypeCollectionView" destination="Lb2-15-Dq3" id="0FZ-em-Sll"/>
+                <outlet property="pageControlView" destination="WIb-UY-Fc5" id="tyj-EK-9dy"/>
                 <outlet property="view" destination="iN0-l3-epB" id="2vU-63-62s"/>
             </connections>
         </placeholder>
@@ -21,7 +22,7 @@
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
                 <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="Lb2-15-Dq3">
-                    <rect key="frame" x="0.0" y="664" width="414" height="232"/>
+                    <rect key="frame" x="0.0" y="684" width="414" height="212"/>
                     <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                     <constraints>
                         <constraint firstAttribute="height" relation="greaterThanOrEqual" constant="170" id="w5m-Ra-rqd"/>
@@ -34,7 +35,7 @@
                     </collectionViewFlowLayout>
                 </collectionView>
                 <collectionView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" dataMode="none" translatesAutoresizingMaskIntoConstraints="NO" id="KcB-fn-Ojq">
-                    <rect key="frame" x="0.0" y="93" width="414" height="571"/>
+                    <rect key="frame" x="0.0" y="113" width="414" height="571"/>
                     <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                     <collectionViewFlowLayout key="collectionViewLayout" minimumLineSpacing="10" minimumInteritemSpacing="10" id="RPr-la-QPH">
                         <size key="itemSize" width="50" height="50"/>
@@ -43,6 +44,44 @@
                         <inset key="sectionInset" minX="0.0" minY="0.0" maxX="0.0" maxY="0.0"/>
                     </collectionViewFlowLayout>
                 </collectionView>
+                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="qGh-wo-gBe">
+                    <rect key="frame" x="87" y="54" width="240" height="40"/>
+                    <subviews>
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="NKv-kr-wDf">
+                            <rect key="frame" x="0.0" y="4" width="32" height="32"/>
+                            <state key="normal" image="grayArrowLeft"/>
+                            <connections>
+                                <action selector="onPreviousButtonTouched" destination="-1" eventType="touchUpInside" id="ZYT-8R-7Rh"/>
+                            </connections>
+                        </button>
+                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="WIb-UY-Fc5" customClass="PageControlView" customModule="Paging_Layout" customModuleProvider="target">
+                            <rect key="frame" x="115" y="15" width="10" height="10"/>
+                            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
+                            <constraints>
+                                <constraint firstAttribute="width" priority="10" constant="10" id="2us-fF-sjt"/>
+                                <constraint firstAttribute="height" priority="10" constant="10" id="82g-tI-8Md"/>
+                            </constraints>
+                        </view>
+                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="2QU-o5-0fg">
+                            <rect key="frame" x="207" y="4" width="33" height="32"/>
+                            <state key="normal" image="grayArrowRight"/>
+                            <connections>
+                                <action selector="onNextButtonTouched" destination="-1" eventType="touchUpInside" id="tYV-4c-sXU"/>
+                            </connections>
+                        </button>
+                    </subviews>
+                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                    <constraints>
+                        <constraint firstAttribute="trailing" secondItem="2QU-o5-0fg" secondAttribute="trailing" id="DQM-sU-mBl"/>
+                        <constraint firstItem="WIb-UY-Fc5" firstAttribute="centerY" secondItem="qGh-wo-gBe" secondAttribute="centerY" id="DeE-z9-lms"/>
+                        <constraint firstItem="NKv-kr-wDf" firstAttribute="centerY" secondItem="qGh-wo-gBe" secondAttribute="centerY" id="Dg1-N4-MBA"/>
+                        <constraint firstItem="NKv-kr-wDf" firstAttribute="leading" secondItem="qGh-wo-gBe" secondAttribute="leading" id="NMo-Rx-XsM"/>
+                        <constraint firstAttribute="height" constant="40" id="UEA-XN-aX4"/>
+                        <constraint firstAttribute="width" constant="240" id="f8V-2l-G3Y"/>
+                        <constraint firstItem="2QU-o5-0fg" firstAttribute="centerY" secondItem="qGh-wo-gBe" secondAttribute="centerY" id="hab-0E-gj9"/>
+                        <constraint firstItem="WIb-UY-Fc5" firstAttribute="centerX" secondItem="qGh-wo-gBe" secondAttribute="centerX" id="jyw-ev-6BB"/>
+                    </constraints>
+                </view>
                 <button opaque="NO" contentMode="scaleToFill" horizontalCompressionResistancePriority="1000" verticalCompressionResistancePriority="1000" contentHorizontalAlignment="center" contentVerticalAlignment="center" showsTouchWhenHighlighted="YES" adjustsImageWhenHighlighted="NO" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="p26-Ln-ASY">
                     <rect key="frame" x="32" y="63" width="23" height="20"/>
                     <color key="backgroundColor" cocoaTouchSystemColor="lightTextColor"/>
@@ -60,14 +99,16 @@
             <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
             <constraints>
                 <constraint firstItem="KcB-fn-Ojq" firstAttribute="trailing" secondItem="vUN-kp-3ea" secondAttribute="trailing" id="BC1-4Z-Rtd"/>
+                <constraint firstItem="qGh-wo-gBe" firstAttribute="centerX" secondItem="vUN-kp-3ea" secondAttribute="centerX" id="Che-Vh-LAB"/>
                 <constraint firstItem="Lb2-15-Dq3" firstAttribute="top" secondItem="KcB-fn-Ojq" secondAttribute="bottom" id="FOb-g3-yTi"/>
                 <constraint firstItem="Lb2-15-Dq3" firstAttribute="trailing" secondItem="vUN-kp-3ea" secondAttribute="trailing" id="Fdi-4x-9h8"/>
                 <constraint firstItem="p26-Ln-ASY" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" constant="19" id="Kcq-6Z-Niw"/>
-                <constraint firstItem="KcB-fn-Ojq" firstAttribute="top" secondItem="p26-Ln-ASY" secondAttribute="bottom" constant="10" id="O7M-pd-eXi"/>
+                <constraint firstItem="KcB-fn-Ojq" firstAttribute="top" secondItem="p26-Ln-ASY" secondAttribute="bottom" constant="30" id="O7M-pd-eXi"/>
                 <constraint firstItem="Lb2-15-Dq3" firstAttribute="leading" secondItem="vUN-kp-3ea" secondAttribute="leading" id="R7O-fU-Gmo"/>
                 <constraint firstAttribute="bottom" secondItem="Lb2-15-Dq3" secondAttribute="bottom" id="WX7-I4-6KC"/>
                 <constraint firstItem="KcB-fn-Ojq" firstAttribute="leading" secondItem="vUN-kp-3ea" secondAttribute="leading" id="eq6-iY-n0D"/>
                 <constraint firstItem="p26-Ln-ASY" firstAttribute="leading" secondItem="vUN-kp-3ea" secondAttribute="leading" constant="32" id="rlv-DQ-Q8w"/>
+                <constraint firstItem="qGh-wo-gBe" firstAttribute="top" secondItem="vUN-kp-3ea" secondAttribute="top" constant="10" id="tVJ-Xi-1VW"/>
                 <constraint firstItem="KcB-fn-Ojq" firstAttribute="height" secondItem="iN0-l3-epB" secondAttribute="height" multiplier="0.637" priority="900" id="tZ6-4E-M86"/>
             </constraints>
             <viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
@@ -76,5 +117,7 @@
     </objects>
     <resources>
         <image name="arrow.left.square.fill" catalog="system" width="128" height="114"/>
+        <image name="grayArrowLeft" width="32" height="32"/>
+        <image name="grayArrowRight" width="33" height="32"/>
     </resources>
 </document>
diff --git a/Samples/PagingLayoutSamples/Modules/Shapes/ShapesViewModel.swift b/Samples/PagingLayoutSamples/Modules/Shapes/ShapesViewModel.swift
@@ -33,12 +33,14 @@ class ShapesViewModel {
     }
     let layoutTypeViewModels: [LayoutTypeCellViewModel]
     let showBackButton: Bool
+    let showPageControl: Bool
     
     
     // MARK: Lifecycle
     
-    init(layouts: [ShapeLayout], showBackButton: Bool = true) {
+    init(layouts: [ShapeLayout], showBackButton: Bool = true, showPageControl: Bool = false) {
         self.showBackButton = showBackButton
+        self.showPageControl = showPageControl
         self.layoutTypeViewModels = layouts.compactMap { layout in  ShapesViewModel.allLayoutViewModes.first { $0.layout == layout } }
         selectedLayout = layoutTypeViewModels.first!
     }

Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,7 @@ class LayoutDesignerViewModel {`
`22`	`22`	`}`
`23`	`23`	`var layouts: [ShapeLayout] = .stack`
`24`	`24`	`var shapesViewModel: ShapesViewModel {`
`25`		`- ShapesViewModel(layouts: layouts, showBackButton: false)`
	`25`	`+ ShapesViewModel(layouts: layouts, showBackButton: false, showPageControl: true)`
`26`	`26`	`}`
`27`	`27`	`private(set) var optionViewModels: [LayoutDesignerOptionSectionViewModel] = []`
`28`	`28`	`private let codeGenerator = OptionsCodeGenerator()`
Original file line number	Diff line number	Diff line change
`@@ -33,12 +33,14 @@ class ShapesViewModel {`
`33`	`33`	`}`
`34`	`34`	`let layoutTypeViewModels: [LayoutTypeCellViewModel]`
`35`	`35`	`let showBackButton: Bool`
	`36`	`+ let showPageControl: Bool`
`36`	`37`
`37`	`38`
`38`	`39`	`// MARK: Lifecycle`
`39`	`40`
`40`		`- init(layouts: [ShapeLayout], showBackButton: Bool = true) {`
	`41`	`+ init(layouts: [ShapeLayout], showBackButton: Bool = true, showPageControl: Bool = false) {`
`41`	`42`	`self.showBackButton = showBackButton`
	`43`	`+ self.showPageControl = showPageControl`
`42`	`44`	`self.layoutTypeViewModels = layouts.compactMap { layout in ShapesViewModel.allLayoutViewModes.first { $0.layout == layout } }`
`43`	`45`	`selectedLayout = layoutTypeViewModels.first!`
`44`	`46`	`}`