Add Walkthrough example

This commit is contained in:
Loïc GRIFFIE 2019-02-27 17:48:58 +01:00
parent 9ae441bdaf
commit 68e51ce041
27 changed files with 278 additions and 600 deletions

1
Examples/walkthrough.md Normal file
View File

@ -0,0 +1 @@
![Walkthrough](https://raw.githubusercontent.com/MoveUpwards/Sejima/master/Screenshots/Walkthrough.png)

View File

@ -22,61 +22,19 @@ use [CocoaPods](https://cocoapods.org) with Podfile:
pod 'Sejima'
```
## Walkthrough
## Components
![Walkthrough](https://raw.githubusercontent.com/MoveUpwards/Sejima/master/Screenshots/Walkthrough.png)
### MUHeader
### Stroryboard
### MUTopBar
Create a view controller and add the component in your storyboard and add the following code.
### MUButton
```swift
class WalkthroughVC: UIViewController {
@IBOutlet private weak var horizontalPager: MUHorizontalPager!
@IBOutlet private weak var pageControl: MUPageControl!
@IBOutlet private weak var button: MUButton!
### MUHorizontalPager
override func viewDidLoad() {
super.viewDidLoad()
### MUPageControl
// Else scroll view will be visible on page animation
view.clipsToBounds = true
addScrollViews()
horizontalPager.pageControl = pageControl
horizontalPager.horizontalMargin = 20.0
pageControl.backgroundColor = .clear
pageControl.tintColors = [.red, .blue, .green, .orange, .lightGray]
pageControl.currentPageIndicatorTintColor = .purple
pageControl.enableTouchEvents = true
pageControl.activeElementWidth = 32
pageControl.elementSize = CGSize(width: 16, height: 16)
pageControl.radius = 8
pageControl.horizontalMargin = 20.0
button.title = "SKIP"
button.titleColor = .black
button.titleHighlightedColor = .lightGray
}
private func addScrollViews() {
let v1 = UIView()
v1.backgroundColor = .red
let v2 = UIView()
v2.backgroundColor = .blue
let v3 = UIView()
v3.backgroundColor = .green
let v4 = UIView()
v4.backgroundColor = .orange
let v5 = UIView()
v5.backgroundColor = .lightGray
horizontalPager.add(views: [v1, v2, v3, v4, v5], margin: 10.0)
}
}
```
## License
### License
Folding cell is released under the MIT license.
See [LICENSE](./LICENSE) for details.

View File

@ -14,17 +14,13 @@
6D5660FA221EC6B200014498 /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6D5660F8221EC6B200014498 /* Main.storyboard */; };
6D5660FC221EC6B400014498 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 6D5660FB221EC6B400014498 /* Assets.xcassets */; };
6D5660FF221EC6B400014498 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6D5660FD221EC6B400014498 /* LaunchScreen.storyboard */; };
6D566125221EE8AD00014498 /* ButtonVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6D566124221EE8AD00014498 /* ButtonVC.swift */; };
6D566127221EE91100014498 /* Button.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6D566126221EE91100014498 /* Button.storyboard */; };
6D566142221EECAF00014498 /* MUColor.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6D566141221EECAF00014498 /* MUColor.swift */; };
6D566144221EF98000014498 /* ThemeManager.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6D566143221EF98000014498 /* ThemeManager.swift */; };
6D56614B2223E03700014498 /* MUButton.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6D5661492223E03700014498 /* MUButton.storyboard */; };
6D56614C2223E03700014498 /* MUButtonVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6D56614A2223E03700014498 /* MUButtonVC.swift */; };
6D56616222244A4F00014498 /* FirstNameVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6D56616122244A4F00014498 /* FirstNameVC.swift */; };
6D56616422244A5B00014498 /* FirstName.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 6D56616322244A5B00014498 /* FirstName.storyboard */; };
F30318D12225535B00171E00 /* Sejima.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = F30318D02225535B00171E00 /* Sejima.framework */; };
F30318D22225535B00171E00 /* Sejima.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = F30318D02225535B00171E00 /* Sejima.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
F30318DA2225542F00171E00 /* SampleUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = F30318D92225542F00171E00 /* SampleUITests.swift */; };
F3C1DDB82226E2BC006081AE /* MUView.swift in Sources */ = {isa = PBXBuildFile; fileRef = F3C1DDB72226E2BC006081AE /* MUView.swift */; };
F3E2FC962226EA5F008476BE /* WalkthroughContentVC.swift in Sources */ = {isa = PBXBuildFile; fileRef = F3E2FC952226EA5F008476BE /* WalkthroughContentVC.swift */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@ -61,18 +57,14 @@
6D5660FB221EC6B400014498 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
6D5660FE221EC6B400014498 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
6D566100221EC6B400014498 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
6D566124221EE8AD00014498 /* ButtonVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ButtonVC.swift; sourceTree = "<group>"; };
6D566126221EE91100014498 /* Button.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = Button.storyboard; sourceTree = "<group>"; };
6D566141221EECAF00014498 /* MUColor.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MUColor.swift; sourceTree = "<group>"; };
6D566143221EF98000014498 /* ThemeManager.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ThemeManager.swift; sourceTree = "<group>"; };
6D5661492223E03700014498 /* MUButton.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; path = MUButton.storyboard; sourceTree = "<group>"; };
6D56614A2223E03700014498 /* MUButtonVC.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = MUButtonVC.swift; sourceTree = "<group>"; };
6D56616122244A4F00014498 /* FirstNameVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FirstNameVC.swift; sourceTree = "<group>"; };
6D56616322244A5B00014498 /* FirstName.storyboard */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; path = FirstName.storyboard; sourceTree = "<group>"; };
F30318D02225535B00171E00 /* Sejima.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = Sejima.framework; sourceTree = BUILT_PRODUCTS_DIR; };
F30318D72225542F00171E00 /* SampleUITests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = SampleUITests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
F30318D92225542F00171E00 /* SampleUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SampleUITests.swift; sourceTree = "<group>"; };
F30318DB2225542F00171E00 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
F3C1DDB72226E2BC006081AE /* MUView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MUView.swift; sourceTree = "<group>"; };
F3E2FC952226EA5F008476BE /* WalkthroughContentVC.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WalkthroughContentVC.swift; sourceTree = "<group>"; };
/* End PBXFileReference section */
/* Begin PBXFrameworksBuildPhase section */
@ -98,6 +90,7 @@
isa = PBXGroup;
children = (
6D4F2F9B222598E700A0799B /* WalkthroughVC.swift */,
F3E2FC952226EA5F008476BE /* WalkthroughContentVC.swift */,
6D4F2F9D222598EF00A0799B /* Walkthrough.storyboard */,
);
path = Walkthrough;
@ -131,6 +124,7 @@
6D5660F6221EC6B200014498 /* MainVC.swift */,
6D5660F8221EC6B200014498 /* Main.storyboard */,
6D566141221EECAF00014498 /* MUColor.swift */,
F3C1DDB72226E2BC006081AE /* MUView.swift */,
6D5660FB221EC6B400014498 /* Assets.xcassets */,
6D5660FD221EC6B400014498 /* LaunchScreen.storyboard */,
6D566100221EC6B400014498 /* Info.plist */,
@ -141,33 +135,11 @@
6D566122221EE83900014498 /* Pages */ = {
isa = PBXGroup;
children = (
6D566123221EE84800014498 /* MUButton */,
6D56616022244A2900014498 /* FirstName */,
6D4F2F9A222598B700A0799B /* Walkthrough */,
);
path = Pages;
sourceTree = "<group>";
};
6D566123221EE84800014498 /* MUButton */ = {
isa = PBXGroup;
children = (
6D56614A2223E03700014498 /* MUButtonVC.swift */,
6D5661492223E03700014498 /* MUButton.storyboard */,
6D566124221EE8AD00014498 /* ButtonVC.swift */,
6D566126221EE91100014498 /* Button.storyboard */,
);
path = MUButton;
sourceTree = "<group>";
};
6D56616022244A2900014498 /* FirstName */ = {
isa = PBXGroup;
children = (
6D56616122244A4F00014498 /* FirstNameVC.swift */,
6D56616322244A5B00014498 /* FirstName.storyboard */,
);
path = FirstName;
sourceTree = "<group>";
};
F30318D82225542F00171E00 /* SampleUITests */ = {
isa = PBXGroup;
children = (
@ -267,13 +239,10 @@
isa = PBXResourcesBuildPhase;
buildActionMask = 2147483647;
files = (
6D56616422244A5B00014498 /* FirstName.storyboard in Resources */,
6D566127221EE91100014498 /* Button.storyboard in Resources */,
6D4F2F9E222598EF00A0799B /* Walkthrough.storyboard in Resources */,
6D5660FF221EC6B400014498 /* LaunchScreen.storyboard in Resources */,
6D5660FC221EC6B400014498 /* Assets.xcassets in Resources */,
6D5660FA221EC6B200014498 /* Main.storyboard in Resources */,
6D56614B2223E03700014498 /* MUButton.storyboard in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@ -291,10 +260,9 @@
isa = PBXSourcesBuildPhase;
buildActionMask = 2147483647;
files = (
6D56616222244A4F00014498 /* FirstNameVC.swift in Sources */,
6D566125221EE8AD00014498 /* ButtonVC.swift in Sources */,
6D566142221EECAF00014498 /* MUColor.swift in Sources */,
6D56614C2223E03700014498 /* MUButtonVC.swift in Sources */,
F3E2FC962226EA5F008476BE /* WalkthroughContentVC.swift in Sources */,
F3C1DDB82226E2BC006081AE /* MUView.swift in Sources */,
6D566144221EF98000014498 /* ThemeManager.swift in Sources */,
6D5660F7221EC6B200014498 /* MainVC.swift in Sources */,
6D5660F5221EC6B200014498 /* AppDelegate.swift in Sources */,

View File

@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "walkthrough_1.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "walkthrough_1@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "walkthrough_1@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

View File

@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "walkthrough_fitness.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "walkthrough_fitness@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "walkthrough_fitness@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 90 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 156 KiB

View File

@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "walkthrough_food.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "walkthrough_food@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "walkthrough_food@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 136 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB

View File

@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "Sleep.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "Sleep@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "Sleep@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 114 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

View File

@ -0,0 +1,20 @@
//
// MUView.swift
// Sample
//
// Created by Loïc GRIFFIE on 27/02/2019.
// Copyright © 2019 Damien Noël Dubuisson. All rights reserved.
//
import UIKit
extension UIView {
public func addGradient(_ colors: [CGColor]) {
let gradientLayer = CAGradientLayer()
gradientLayer.frame = bounds
gradientLayer.colors = colors
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
layer.insertSublayer(gradientLayer, at: 0)
}
}

View File

@ -1,133 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="sal-TR-3Tl">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Button-->
<scene sceneID="fGO-ra-gUt">
<objects>
<viewController id="sal-TR-3Tl" customClass="Button" customModule="Sample" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Gwq-3b-3dX">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="AHu-pZ-84K" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="20" y="108" width="140" height="32"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="1kv-v6-E0R" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="210" y="40" width="145" height="32"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="width" constant="145" id="Jgk-7h-a15"/>
<constraint firstAttribute="height" constant="32" id="SPg-rL-WoN"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="H7E-lX-Arp" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="20" y="92" width="16" height="21"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="xD2-QF-tre" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="339" y="92" width="16" height="21"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ia8-nw-g7B" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="20" y="133" width="145" height="32"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="height" constant="32" id="cL7-WY-Khv"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="kaW-NO-L0H" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="185" y="133" width="145" height="32"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="jOd-Pz-P0p" customClass="UIAppearenceFakeView" customModule="Sample" customModuleProvider="target">
<rect key="frame" x="161.5" y="323" width="16" height="21"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="n7L-70-P49" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="0.0" y="0.0" width="16" height="21"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="n7L-70-P49" firstAttribute="top" secondItem="jOd-Pz-P0p" secondAttribute="top" id="JEv-DY-6Ol"/>
<constraint firstAttribute="trailing" secondItem="n7L-70-P49" secondAttribute="trailing" id="MU2-j9-jsp"/>
<constraint firstItem="n7L-70-P49" firstAttribute="leading" secondItem="jOd-Pz-P0p" secondAttribute="leading" id="lmg-eN-7yK"/>
<constraint firstAttribute="bottom" secondItem="n7L-70-P49" secondAttribute="bottom" id="zjC-Jo-KpT"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="hbW-kY-Lyk" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="197.5" y="311" width="126" height="45"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="string" keyPath="title" value="Storyboard"/>
<userDefinedRuntimeAttribute type="color" keyPath="borderColor">
<color key="value" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
<real key="value" value="4"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="buttonBackgroundColor">
<color key="value" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="6"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="verticalPadding">
<real key="value" value="8"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="horizontalPadding">
<real key="value" value="16"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="hbW-kY-Lyk" firstAttribute="centerY" secondItem="Gwq-3b-3dX" secondAttribute="centerY" id="5OQ-KU-pFs"/>
<constraint firstItem="kaW-NO-L0H" firstAttribute="top" secondItem="ia8-nw-g7B" secondAttribute="top" id="9Id-MH-vhr"/>
<constraint firstItem="kaW-NO-L0H" firstAttribute="width" secondItem="ia8-nw-g7B" secondAttribute="width" id="E6k-Lk-fQs"/>
<constraint firstItem="ia8-nw-g7B" firstAttribute="width" secondItem="Gwq-3b-3dX" secondAttribute="width" multiplier="145:375" id="EdX-1g-zBv"/>
<constraint firstItem="H7E-lX-Arp" firstAttribute="top" secondItem="4lN-R6-NzX" secondAttribute="top" constant="72" id="Hte-TF-YSJ"/>
<constraint firstItem="4lN-R6-NzX" firstAttribute="trailing" secondItem="1kv-v6-E0R" secondAttribute="trailing" constant="20" id="LWC-wn-QgW"/>
<constraint firstItem="kaW-NO-L0H" firstAttribute="bottom" secondItem="ia8-nw-g7B" secondAttribute="bottom" id="TA8-rb-xRu"/>
<constraint firstItem="kaW-NO-L0H" firstAttribute="leading" secondItem="ia8-nw-g7B" secondAttribute="trailing" constant="20" id="US7-Ws-bjU"/>
<constraint firstItem="xD2-QF-tre" firstAttribute="top" secondItem="1kv-v6-E0R" secondAttribute="bottom" constant="20" id="XkU-kn-NY0"/>
<constraint firstItem="1kv-v6-E0R" firstAttribute="top" secondItem="4lN-R6-NzX" secondAttribute="top" constant="20" id="Y1G-gU-hLz"/>
<constraint firstItem="jOd-Pz-P0p" firstAttribute="trailing" secondItem="Gwq-3b-3dX" secondAttribute="centerX" constant="-10" id="bfY-sQ-sXw"/>
<constraint firstItem="ia8-nw-g7B" firstAttribute="top" secondItem="H7E-lX-Arp" secondAttribute="bottom" constant="20" id="hqt-Hf-SuQ"/>
<constraint firstItem="hbW-kY-Lyk" firstAttribute="leading" secondItem="Gwq-3b-3dX" secondAttribute="centerX" constant="10" id="lSG-vJ-qln"/>
<constraint firstItem="H7E-lX-Arp" firstAttribute="leading" secondItem="4lN-R6-NzX" secondAttribute="leading" constant="20" id="rLy-CX-SPE"/>
<constraint firstItem="4lN-R6-NzX" firstAttribute="trailing" secondItem="xD2-QF-tre" secondAttribute="trailing" constant="20" id="rnf-eF-diu"/>
<constraint firstItem="jOd-Pz-P0p" firstAttribute="centerY" secondItem="Gwq-3b-3dX" secondAttribute="centerY" id="xjj-gv-Kqc"/>
<constraint firstItem="ia8-nw-g7B" firstAttribute="leading" secondItem="4lN-R6-NzX" secondAttribute="leading" constant="20" id="zak-2u-QJu"/>
</constraints>
<viewLayoutGuide key="safeArea" id="4lN-R6-NzX"/>
</view>
<connections>
<outlet property="alignRightButton" destination="kaW-NO-L0H" id="TRg-TV-MWY"/>
<outlet property="autolayoutButton" destination="1kv-v6-E0R" id="ikk-me-voM"/>
<outlet property="frameButton" destination="AHu-pZ-84K" id="2NQ-Ox-1Vp"/>
<outlet property="leftActivateButton" destination="H7E-lX-Arp" id="hhP-oC-c7I"/>
<outlet property="loadingButton" destination="ia8-nw-g7B" id="uwJ-uz-KGt"/>
<outlet property="rightActivateButton" destination="xD2-QF-tre" id="zqT-tH-NRK"/>
<outlet property="storyboardButton" destination="hbW-kY-Lyk" id="ayb-kG-Njk"/>
<outlet property="uiAppearenceButton" destination="n7L-70-P49" id="EWT-VF-QY6"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="p9K-A4-3Xv" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="128.80000000000001" y="160.56971514242881"/>
</scene>
</scenes>
</document>

View File

@ -1,113 +0,0 @@
//
// ButtonVC.swift
// MUSample
//
// Created by Damien Noël Dubuisson on 21/02/2019.
// Copyright © 2019 Damien Noël Dubuisson. All rights reserved.
//
import UIKit
import Sejima
class UIAppearenceFakeView: UIView {
// Put Sejima in an UIAppearenceFakeView to use UIAppearence configuration
}
class Button: UIViewController {
@IBOutlet private weak var frameButton: MUButton!
@IBOutlet private weak var autolayoutButton: MUButton!
@IBOutlet private weak var leftActivateButton: MUButton!
@IBOutlet private weak var rightActivateButton: MUButton!
@IBOutlet private weak var loadingButton: MUButton!
@IBOutlet private weak var alignRightButton: MUButton!
// See AppDelegate.swift
@IBOutlet private weak var uiAppearenceButton: MUButton!
// See Button.storyboard -> Show the Attributes inspector
@IBOutlet private weak var storyboardButton: MUButton!
override func viewDidLoad() {
super.viewDidLoad()
title = type(of: self).description().components(separatedBy: ".").last
for item in [frameButton, autolayoutButton] {
item?.buttonBackgroundColor = UIColor(hex: 0x00171F)
item?.title = "SUBMIT"
item?.borderColor = UIColor(hex: 0xCD9C0B)
item?.progressColor = UIColor(hex: 0xCD9C0B)
item?.titleFont = .systemFont(ofSize: 17.0, weight: .light)
item?.cornerRadius = 4.0
item?.borderWidth = 4.0
item?.titleColor = UIColor(hex: 0xCD9C0B)
item?.titleHighlightedColor = .white
}
for item in [leftActivateButton, rightActivateButton] {
item?.buttonBackgroundColor = UIColor(hex: 0x00171F)
item?.backgroundColor = .orange
item?.title = "Let's go to the mall"
item?.titleAlignment = .right
item?.borderColor = UIColor(hex: 0xCD9C0B)
item?.progressColor = UIColor(hex: 0xCD9C0B)
item?.titleFont = .systemFont(ofSize: 17, weight: .semibold)
item?.cornerRadius = 8.0
item?.borderWidth = 2.0
item?.verticalPadding = 4.0
item?.horizontalPadding = 20.0
item?.titleColor = UIColor(hex: 0xCD9C0B)
item?.titleHighlightedColor = .white
item?.delegate = self
}
leftActivateButton.title = "Click me to activate right"
rightActivateButton.title = "OFF"
rightActivateButton.state = .disabled
for item in [loadingButton, alignRightButton] {
item?.buttonBackgroundColor = UIColor(hex: 0x00171F)
item?.title = "DONE"
item?.borderColor = UIColor(hex: 0xCD9C0B)
item?.progressColor = UIColor(hex: 0xCD9C0B)
item?.titleFont = .systemFont(ofSize: 17, weight: .semibold)
item?.cornerRadius = 16.0
item?.borderWidth = 1.0
item?.titleColor = UIColor(hex: 0xCD9C0B)
item?.titleHighlightedColor = .white
}
loadingButton.isLoading = true
loadingButton.delegate = self
alignRightButton.titleAlignment = .right
DispatchQueue.main.asyncAfter(deadline: .now() + 2) { [weak self] in
self?.loadingButton.isLoading = false
}
uiAppearenceButton.title = "UIAppearence"
}
}
extension Button: MUButtonDelegate {
func didTap(_ button: MUButton) {
switch button {
case leftActivateButton:
leftActivateButton.title = "OFF"
leftActivateButton.state = .disabled
rightActivateButton.title = "Click me to activate left"
rightActivateButton.state = .normal
case rightActivateButton:
leftActivateButton.title = "Click me to activate right"
leftActivateButton.state = .normal
rightActivateButton.title = "OFF"
rightActivateButton.state = .disabled
case loadingButton:
loadingButton.isLoading = true
DispatchQueue.main.asyncAfter(deadline: .now() + 2) { [weak self] in
self?.loadingButton.isLoading = false
}
default:
break
}
}
}

View File

@ -1,199 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="3Lt-yZ-pIu">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--ButtonVC-->
<scene sceneID="tZY-Vy-S1X">
<objects>
<viewController id="3Lt-yZ-pIu" customClass="MUButtonVC" customModule="Sample" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Bkm-07-4pE">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="DKR-QH-HsI">
<rect key="frame" x="20" y="40" width="335" height="67"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Storyboard" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="API-Uz-XcG">
<rect key="frame" x="5" y="5" width="71.5" height="17"/>
<fontDescription key="fontDescription" type="system" weight="light" pointSize="14"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Qmx-Zu-rUW" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="5" y="27" width="59" height="25"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="string" keyPath="title" value="Square"/>
<userDefinedRuntimeAttribute type="color" keyPath="buttonBackgroundColor">
<color key="value" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="titleColor">
<color key="value" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="verticalPadding">
<real key="value" value="2"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="horizontalPadding">
<real key="value" value="2"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="titleHighlightedColor">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="borderColor">
<color key="value" red="1" green="0.94279751712328763" blue="0.4686429794520548" alpha="1" colorSpace="calibratedRGB"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
<real key="value" value="0.0"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="zBj-5z-DQQ" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="69" y="27" width="66" height="25"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="string" keyPath="title" value="Round"/>
<userDefinedRuntimeAttribute type="color" keyPath="buttonBackgroundColor">
<color key="value" red="0.71535209760273977" green="0.94279751712328763" blue="0.62772902397260277" alpha="1" colorSpace="calibratedRGB"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="12"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="titleColor">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="titleHighlightedColor">
<color key="value" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="borderColor">
<color key="value" red="0.71535209759999996" green="0.94279751710000004" blue="0.62772902399999997" alpha="1" colorSpace="calibratedRGB"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2gm-La-DFu" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="140" y="27" width="22" height="25"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="string" keyPath="title" value="X"/>
<userDefinedRuntimeAttribute type="color" keyPath="titleColor">
<color key="value" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="13"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="buttonBackgroundColor">
<color key="value" red="1" green="0.94279751710000004" blue="0.4686429795" alpha="1" colorSpace="calibratedRGB"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="horizontalPadding">
<real key="value" value="5"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
<real key="value" value="0.0"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="borderColor">
<color key="value" red="0.71535209759999996" green="0.94279751710000004" blue="0.62772902399999997" alpha="1" colorSpace="calibratedRGB"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Y9W-mV-l2V" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="167" y="27" width="70" height="25"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="string" keyPath="title" value="Fill me"/>
<userDefinedRuntimeAttribute type="color" keyPath="borderColor">
<color key="value" red="0.71535209760273977" green="0.94279751712328763" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="buttonBackgroundColor">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="titleColor">
<color key="value" red="0.71535209760273977" green="0.94279751712328763" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="titleHighlightedColor">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="5"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="borderWidth">
<real key="value" value="2"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="649-rh-lM3" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="242" y="27" width="80" height="25"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="width" constant="80" id="Gxg-tN-7f5"/>
</constraints>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="boolean" keyPath="isLoading" value="YES"/>
<userDefinedRuntimeAttribute type="color" keyPath="buttonBackgroundColor">
<color key="value" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="verticalPadding">
<real key="value" value="2"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="4"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="2gm-La-DFu" firstAttribute="bottom" secondItem="Qmx-Zu-rUW" secondAttribute="bottom" id="13z-4x-pXk"/>
<constraint firstItem="zBj-5z-DQQ" firstAttribute="leading" secondItem="Qmx-Zu-rUW" secondAttribute="trailing" constant="5" id="2IG-YS-ud7"/>
<constraint firstItem="Qmx-Zu-rUW" firstAttribute="top" secondItem="API-Uz-XcG" secondAttribute="bottom" constant="5" id="40U-Vc-uDL"/>
<constraint firstItem="API-Uz-XcG" firstAttribute="leading" secondItem="DKR-QH-HsI" secondAttribute="leading" constant="5" id="4FO-6C-6yb"/>
<constraint firstItem="zBj-5z-DQQ" firstAttribute="bottom" secondItem="Qmx-Zu-rUW" secondAttribute="bottom" id="CIg-xR-nja"/>
<constraint firstItem="2gm-La-DFu" firstAttribute="leading" secondItem="zBj-5z-DQQ" secondAttribute="trailing" constant="5" id="IBl-yJ-3Yw"/>
<constraint firstItem="API-Uz-XcG" firstAttribute="top" secondItem="DKR-QH-HsI" secondAttribute="top" constant="5" id="XAA-Ej-ZF3"/>
<constraint firstItem="649-rh-lM3" firstAttribute="top" secondItem="Qmx-Zu-rUW" secondAttribute="top" id="cKL-TX-vsq"/>
<constraint firstItem="2gm-La-DFu" firstAttribute="top" secondItem="Qmx-Zu-rUW" secondAttribute="top" id="fPQ-dX-vB4"/>
<constraint firstItem="Y9W-mV-l2V" firstAttribute="top" secondItem="2gm-La-DFu" secondAttribute="top" id="jtW-DX-njV"/>
<constraint firstItem="Qmx-Zu-rUW" firstAttribute="leading" secondItem="DKR-QH-HsI" secondAttribute="leading" constant="5" id="jya-Da-L2V"/>
<constraint firstAttribute="bottom" secondItem="Qmx-Zu-rUW" secondAttribute="bottom" constant="15" id="lNS-QH-0pk"/>
<constraint firstItem="zBj-5z-DQQ" firstAttribute="top" secondItem="Qmx-Zu-rUW" secondAttribute="top" id="rpj-wv-HEv"/>
<constraint firstItem="649-rh-lM3" firstAttribute="leading" secondItem="Y9W-mV-l2V" secondAttribute="trailing" constant="5" id="vX6-vJ-Ml8"/>
<constraint firstItem="Y9W-mV-l2V" firstAttribute="leading" secondItem="2gm-La-DFu" secondAttribute="trailing" constant="5" id="yO3-GB-opC"/>
</constraints>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.borderWidth">
<integer key="value" value="1"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="WmQ-sP-3eq">
<rect key="frame" x="67" y="269" width="240" height="128"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="baa-uH-PjD">
<rect key="frame" x="67" y="467" width="240" height="128"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="DKR-QH-HsI" firstAttribute="top" secondItem="bMR-N1-e76" secondAttribute="top" constant="20" id="CUh-WM-Chr"/>
<constraint firstItem="DKR-QH-HsI" firstAttribute="leading" secondItem="bMR-N1-e76" secondAttribute="leading" constant="20" id="dhY-c1-F2i"/>
<constraint firstItem="bMR-N1-e76" firstAttribute="trailing" secondItem="DKR-QH-HsI" secondAttribute="trailing" constant="20" id="pBY-a6-kIn"/>
</constraints>
<viewLayoutGuide key="safeArea" id="bMR-N1-e76"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="kU8-7G-Mch" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="2" y="133"/>
</scene>
</scenes>
</document>

View File

@ -1,30 +0,0 @@
//
// MUButtonVC.swift
// MUSample
//
// Created by Damien Noël Dubuisson on 25/02/2019.
// Copyright © 2019 Damien Noël Dubuisson. All rights reserved.
//
import UIKit
class MUButtonVC: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}

View File

@ -19,28 +19,28 @@
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="agf-Rc-d34" customClass="MUHorizontalPager" customModule="Sejima">
<rect key="frame" x="0.0" y="20" width="375" height="647"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<rect key="frame" x="0.0" y="20" width="375" height="593"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="dgN-r5-mQ2" customClass="MUPageControl" customModule="Sejima">
<rect key="frame" x="20" y="639" width="0.0" height="8"/>
<rect key="frame" x="20" y="629" width="0.0" height="8"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="BUw-2N-UTo" customClass="MUButton" customModule="Sejima">
<rect key="frame" x="339" y="626" width="16" height="21"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<rect key="frame" x="339" y="622.5" width="16" height="21"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="BUw-2N-UTo" firstAttribute="centerY" secondItem="dgN-r5-mQ2" secondAttribute="centerY" id="1CK-le-NoU"/>
<constraint firstItem="dgN-r5-mQ2" firstAttribute="leading" secondItem="QhG-9M-3RI" secondAttribute="leading" constant="20" id="Gip-XO-p5b"/>
<constraint firstItem="QhG-9M-3RI" firstAttribute="trailing" secondItem="BUw-2N-UTo" secondAttribute="trailing" constant="20" id="H6n-91-5eX"/>
<constraint firstItem="QhG-9M-3RI" firstAttribute="trailing" secondItem="agf-Rc-d34" secondAttribute="trailing" id="HEy-Pe-Xgg"/>
<constraint firstItem="agf-Rc-d34" firstAttribute="top" secondItem="QhG-9M-3RI" secondAttribute="top" id="We5-of-UTr"/>
<constraint firstItem="QhG-9M-3RI" firstAttribute="bottom" secondItem="agf-Rc-d34" secondAttribute="bottom" id="jlj-NW-YO6"/>
<constraint firstItem="QhG-9M-3RI" firstAttribute="bottom" secondItem="BUw-2N-UTo" secondAttribute="bottom" constant="20" id="pqA-q0-9wx"/>
<constraint firstItem="dgN-r5-mQ2" firstAttribute="bottom" secondItem="agf-Rc-d34" secondAttribute="bottom" constant="24" id="jlj-NW-YO6"/>
<constraint firstItem="agf-Rc-d34" firstAttribute="leading" secondItem="QhG-9M-3RI" secondAttribute="leading" id="qps-cP-qhD"/>
<constraint firstItem="QhG-9M-3RI" firstAttribute="bottom" secondItem="dgN-r5-mQ2" secondAttribute="bottom" constant="20" id="vhC-OI-taQ"/>
<constraint firstItem="QhG-9M-3RI" firstAttribute="bottom" secondItem="dgN-r5-mQ2" secondAttribute="bottom" constant="30" id="vhC-OI-taQ"/>
</constraints>
<viewLayoutGuide key="safeArea" id="QhG-9M-3RI"/>
</view>
@ -54,5 +54,41 @@
</objects>
<point key="canvasLocation" x="145" y="143"/>
</scene>
<!--Walkthrough ContentVC-->
<scene sceneID="ltI-De-JN4">
<objects>
<viewController storyboardIdentifier="WalkthroughView" id="xf5-S7-maa" customClass="WalkthroughContentVC" customModule="Sample" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="vQY-y4-xla">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="center" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="7Sb-p6-0j3">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
</imageView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="12h-J8-VI3" customClass="MUHeader" customModule="Sejima">
<rect key="frame" x="0.0" y="639" width="0.0" height="8"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="7Sb-p6-0j3" secondAttribute="trailing" id="1Fn-p2-ZMy"/>
<constraint firstAttribute="bottom" secondItem="12h-J8-VI3" secondAttribute="bottom" constant="20" id="7MT-Dl-fBZ"/>
<constraint firstItem="7Sb-p6-0j3" firstAttribute="top" secondItem="vQY-y4-xla" secondAttribute="top" id="HGT-mD-bbx"/>
<constraint firstItem="12h-J8-VI3" firstAttribute="leading" secondItem="vQY-y4-xla" secondAttribute="leading" id="JcV-an-oZs"/>
<constraint firstItem="7Sb-p6-0j3" firstAttribute="leading" secondItem="vQY-y4-xla" secondAttribute="leading" id="YmZ-ax-TJA"/>
<constraint firstItem="7Sb-p6-0j3" firstAttribute="bottom" secondItem="vQY-y4-xla" secondAttribute="bottom" id="wvi-qu-5z4"/>
</constraints>
</view>
<size key="freeformSize" width="375" height="667"/>
<connections>
<outlet property="header" destination="12h-J8-VI3" id="1HI-4V-S3p"/>
<outlet property="imageView" destination="7Sb-p6-0j3" id="uIp-ln-lc1"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="UFm-0P-Q4o" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="892" y="142.57871064467767"/>
</scene>
</scenes>
</document>

View File

@ -0,0 +1,43 @@
//
// WalkthroughContentVC.swift
// Sample
//
// Created by Loïc GRIFFIE on 27/02/2019.
// Copyright © 2019 Damien Noël Dubuisson. All rights reserved.
//
import UIKit
import Sejima
class WalkthroughContentVC: UIViewController {
@IBOutlet private weak var imageView: UIImageView!
@IBOutlet private weak var header: MUHeader!
private var image: UIImage?
private var headerTitle: String = ""
private var headerDetail: String = ""
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .clear
header.backgroundColor = .clear
header.titleFont = .boldSystemFont(ofSize: 24)
header.titleColor = .white
header.title = headerTitle
header.detailFont = .systemFont(ofSize: 14)
header.detailColor = .white
header.detail = headerDetail
imageView.backgroundColor = .clear
imageView.image = image
}
internal func setup(with image: UIImage, title: String, detail: String) {
self.image = image
headerTitle = title
headerDetail = detail
}
}

View File

@ -13,49 +13,84 @@ class WalkthroughVC: UIViewController {
@IBOutlet private weak var horizontalPager: MUHorizontalPager!
@IBOutlet private weak var pageControl: MUPageControl!
@IBOutlet private weak var button: MUButton!
private let margin = CGFloat(20.0)
override var prefersStatusBarHidden: Bool {
return true
}
override func viewDidLoad() {
super.viewDidLoad()
navigationController?.isNavigationBarHidden = true
view.clipsToBounds = true // Else scroll view will be visible on page animation
view.addGradient([
UIColor(hex: 0x094256).cgColor,
UIColor(hex: 0x00171F).cgColor
])
addScrollViews()
horizontalPager.delegate = self
horizontalPager.pageControl = pageControl
horizontalPager.horizontalMargin = 20.0
horizontalPager.horizontalMargin = margin
pageControl.backgroundColor = .clear
pageControl.tintColors = [.red, .blue, .green, .orange, .lightGray]
pageControl.currentPageIndicatorTintColor = .purple
pageControl.pageIndicatorTintColor = UIColor(hex: 0xFA7921, alpha: 0x80)
pageControl.currentPageIndicatorTintColor = UIColor(hex: 0xFA7921)
pageControl.enableTouchEvents = true
pageControl.activeElementWidth = 32
pageControl.elementSize = CGSize(width: 16, height: 16)
pageControl.radius = 8
pageControl.horizontalMargin = 20.0
pageControl.activeElementWidth = 24
pageControl.elementSize = CGSize(width: 8, height: 8)
pageControl.radius = 4
button.delegate = self
button.buttonBackgroundColor = .clear
button.title = "SKIP"
button.titleColor = .black
button.titleHighlightedColor = .lightGray
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(true)
}
override func viewDidAppear(_ animated: Bool) {
super.viewDidAppear(true)
button.titleFont = .boldSystemFont(ofSize: 17)
button.titleColor = UIColor(hex: 0xFA7921)
button.titleHighlightedColor = .white
}
private func addScrollViews() {
let v1 = UIView()
v1.backgroundColor = .red
let v2 = UIView()
v2.backgroundColor = .blue
let v3 = UIView()
v3.backgroundColor = .green
let v4 = UIView()
v4.backgroundColor = .orange
let v5 = UIView()
v5.backgroundColor = .lightGray
horizontalPager.add(views: [v1, v2, v3, v4, v5], margin: 10.0)
let vcs = [
contentView(with: #imageLiteral(resourceName: "walkthrough_bike"),
title: "Healthy living",
detail: "Simple tips to balance your mind, body & soul")?.view ?? UIView(),
contentView(with: #imageLiteral(resourceName: "walkthrough_sleep"),
title: "Healthy sleep",
detail: "Simple tips to balance your mind, body & soul")?.view ?? UIView(),
contentView(with: #imageLiteral(resourceName: "walkthrough_food"),
title: "Fresh food & Water",
detail: "Simple tips to balance your mind, body & soul")?.view ?? UIView(),
contentView(with: #imageLiteral(resourceName: "walkthrough_fitness"),
title: "Healthy living",
detail: "Simple tips to balance your mind, body & soul")?.view ?? UIView()
]
horizontalPager.add(views: vcs, margin: margin)
}
private func contentView(with image: UIImage, title: String = "", detail: String = "") -> WalkthroughContentVC? {
guard let vc = UIStoryboard(name: "Walkthrough", bundle: nil)
.instantiateViewController(withIdentifier: "WalkthroughView") as? WalkthroughContentVC else { return nil }
vc.setup(with: image, title: title, detail: detail)
return vc
}
}
extension WalkthroughVC: MUHorizontalPagerDelegate {
func didScroll(_ horizontalPager: MUHorizontalPager, to index: Int) {
guard let numberOfPages = horizontalPager.pageControl?.numberOfPages else { return }
button.title = numberOfPages - 1 == index ? "LET'S GO" : "SKIP"
}
}
extension WalkthroughVC: MUButtonDelegate {
func didTap(_ button: MUButton) {
navigationController?.popViewController(animated: true)
}
}