Skip to content

Commit 9af6618

Browse files
NikolaKirevNikolaKirev
authored
Merge pull request #18 from NikolaKirev/feature/button-style
Button Styling
2 parents 94cc0aa + 7215d91 commit 9af6618

File tree

9 files changed

+126
-25
lines changed

9 files changed

+126
-25
lines changed

‎Example/OnboardExample/Base.lproj/Main.storyboard‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
<?xml version="1.0" encoding="UTF-8"?>
2-
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14313.18" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
2+
<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="BYZ-38-t0r">
33
<device id="retina4_7" orientation="portrait">
44
<adaptation id="fullscreen"/>
55
</device>
66
<dependencies>
77
<deployment identifier="iOS"/>
8-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14283.14"/>
8+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
99
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
1010
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
1111
</dependencies>
@@ -32,13 +32,22 @@
3232
<action selector="showOnboardingCustomTapped:" destination="BYZ-38-t0r" eventType="touchUpInside" id="WGV-dl-ehI"/>
3333
</connections>
3434
</button>
35+
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="uy5-YH-3OZ">
36+
<rect key="frame" x="68.5" y="442.5" width="238" height="30"/>
37+
<state key="normal" title="Show Onboarding (Styled Buttons)"/>
38+
<connections>
39+
<action selector="showOnboardingStyledButtonsTapped:" destination="BYZ-38-t0r" eventType="touchUpInside" id="8Ph-7i-J5O"/>
40+
</connections>
41+
</button>
3542
</subviews>
3643
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
3744
<constraints>
3845
<constraint firstItem="tTq-fU-hRU" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="5iI-dH-Zmi"/>
3946
<constraint firstItem="tTq-fU-hRU" firstAttribute="top" secondItem="idt-Nd-IOO" secondAttribute="bottom" constant="32" id="6SW-9e-6bU"/>
47+
<constraint firstItem="uy5-YH-3OZ" firstAttribute="top" secondItem="tTq-fU-hRU" secondAttribute="bottom" constant="32" id="KTq-OT-cVt"/>
4048
<constraint firstItem="idt-Nd-IOO" firstAttribute="centerY" secondItem="8bC-Xf-vdC" secondAttribute="centerY" id="a8Q-nV-Z1K"/>
4149
<constraint firstItem="idt-Nd-IOO" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="kcR-A4-c4d"/>
50+
<constraint firstItem="uy5-YH-3OZ" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="nyV-LJ-yY2"/>
4251
</constraints>
4352
<viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
4453
</view>

‎Example/OnboardExample/Info.plist‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<key>CFBundlePackageType</key>
1616
<string>APPL</string>
1717
<key>CFBundleShortVersionString</key>
18-
<string>1.0</string>
18+
<string>1.3.0</string>
1919
<key>CFBundleVersion</key>
2020
<string>1</string>
2121
<key>LSRequiresIPhoneOS</key>

‎Example/OnboardExample/ViewController.swift‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,30 @@ class ViewController: UIViewController {
9191
onboardingVC.presentFrom(self, animated: true)
9292
}
9393

94+
@IBAction func showOnboardingStyledButtonsTapped(_ sender: Any) {
95+
let advanceButtonStyling: OnboardViewController.ButtonStyling = { button in
96+
button.setTitleColor(UIColor.lightGray, for: .normal)
97+
button.titleLabel?.font = UIFont.systemFont(ofSize: 16.0, weight: .semibold)
98+
}
99+
let actionButtonStyling: OnboardViewController.ButtonStyling = { button in
100+
button.setTitleColor(.black, for: .normal)
101+
button.titleLabel?.font = UIFont.systemFont(ofSize: 22.0, weight: .semibold)
102+
button.backgroundColor = UIColor(white: 0.95, alpha: 1.0)
103+
button.layer.cornerRadius = button.bounds.height / 2.0
104+
button.contentEdgeInsets = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
105+
button.layer.shadowColor = UIColor.black.cgColor
106+
button.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
107+
button.layer.shadowRadius = 2.0
108+
button.layer.shadowOpacity = 0.2
109+
}
110+
let appearance = OnboardViewController.AppearanceConfiguration(advanceButtonStyling: advanceButtonStyling,
111+
actionButtonStyling: actionButtonStyling)
112+
let onboardingVC = OnboardViewController(pageItems: onboardingPages,
113+
appearanceConfiguration: appearance)
114+
onboardingVC.modalPresentationStyle = .formSheet
115+
onboardingVC.presentFrom(self, animated: true)
116+
}
117+
94118
/// Only for the purpouses of the example.
95119
/// Not really asking for notifications permissions.
96120
private func showAlert(_ completion: @escaping (_ success: Bool, _ error: Error?) -> Void) {

‎Metadata/Info.plist‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
<key>CFBundlePackageType</key>
1616
<string>FMWK</string>
1717
<key>CFBundleShortVersionString</key>
18-
<string>1.2.0</string>
18+
<string>1.3.0</string>
1919
<key>CFBundleVersion</key>
2020
<string>$(CURRENT_PROJECT_VERSION)</string>
2121
<key>NSPrincipalClass</key>

‎OnboardKit.podspec‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
Pod::Spec.new do |s|
22

33
s.name = "OnboardKit"
4-
s.version = "1.2.0"
4+
s.version = "1.3.0"
55
s.summary = "Customisable user onboarding for your iOS app"
66

77
s.description = <<-DESC
@@ -16,9 +16,9 @@ Pod::Spec.new do |s|
1616
s.author = { "Nikola Kirev" => "n@nikolakirev.com" }
1717
s.social_media_url = "http://twitter.com/NikolaKirev"
1818

19-
s.platform = :ios, "12.0"
19+
s.platform = :ios, "11.0"
2020

21-
s.source = { :git => "https://github.com/NikolaKirev/OnboardKit.git", :tag => "v1.2.0" }
21+
s.source = { :git => "https://github.com/NikolaKirev/OnboardKit.git", :tag => "v1.3.0" }
2222
s.source_files = "OnboardKit"
2323

2424
end

‎OnboardKit.xcodeproj/project.pbxproj‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -166,15 +166,14 @@
166166
TargetAttributes = {
167167
9437E2A41F238E7E00E294BE = {
168168
CreatedOnToolsVersion = 8.3.3;
169-
DevelopmentTeam = 5Z8M29P3V9;
170169
LastSwiftMigration = 0920;
171-
ProvisioningStyle = Automatic;
170+
ProvisioningStyle = Manual;
172171
};
173172
9437E2AD1F238E7E00E294BE = {
174173
CreatedOnToolsVersion = 8.3.3;
175174
DevelopmentTeam = 5Z8M29P3V9;
176175
LastSwiftMigration = 0920;
177-
ProvisioningStyle = Automatic;
176+
ProvisioningStyle = Manual;
178177
};
179178
};
180179
};
@@ -383,8 +382,9 @@
383382
buildSettings = {
384383
CLANG_ENABLE_MODULES = YES;
385384
CODE_SIGN_IDENTITY = "";
385+
CODE_SIGN_STYLE = Manual;
386386
DEFINES_MODULE = YES;
387-
DEVELOPMENT_TEAM = 5Z8M29P3V9;
387+
DEVELOPMENT_TEAM = "";
388388
DYLIB_COMPATIBILITY_VERSION = 1;
389389
DYLIB_CURRENT_VERSION = 1;
390390
DYLIB_INSTALL_NAME_BASE = "@rpath";
@@ -394,6 +394,7 @@
394394
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
395395
PRODUCT_BUNDLE_IDENTIFIER = com.nikolakirev.OnboardKit;
396396
PRODUCT_NAME = "$(TARGET_NAME)";
397+
PROVISIONING_PROFILE_SPECIFIER = "";
397398
SKIP_INSTALL = YES;
398399
SWIFT_OPTIMIZATION_LEVEL = "-Onone";
399400
SWIFT_SWIFT3_OBJC_INFERENCE = Default;
@@ -406,8 +407,9 @@
406407
buildSettings = {
407408
CLANG_ENABLE_MODULES = YES;
408409
CODE_SIGN_IDENTITY = "";
410+
CODE_SIGN_STYLE = Manual;
409411
DEFINES_MODULE = YES;
410-
DEVELOPMENT_TEAM = 5Z8M29P3V9;
412+
DEVELOPMENT_TEAM = "";
411413
DYLIB_COMPATIBILITY_VERSION = 1;
412414
DYLIB_CURRENT_VERSION = 1;
413415
DYLIB_INSTALL_NAME_BASE = "@rpath";
@@ -417,6 +419,7 @@
417419
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
418420
PRODUCT_BUNDLE_IDENTIFIER = com.nikolakirev.OnboardKit;
419421
PRODUCT_NAME = "$(TARGET_NAME)";
422+
PROVISIONING_PROFILE_SPECIFIER = "";
420423
SKIP_INSTALL = YES;
421424
SWIFT_SWIFT3_OBJC_INFERENCE = Default;
422425
SWIFT_VERSION = 4.2;
@@ -427,11 +430,13 @@
427430
isa = XCBuildConfiguration;
428431
buildSettings = {
429432
ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
433+
CODE_SIGN_STYLE = Manual;
430434
DEVELOPMENT_TEAM = 5Z8M29P3V9;
431435
INFOPLIST_FILE = OnboardKitTests/Info.plist;
432436
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
433437
PRODUCT_BUNDLE_IDENTIFIER = com.nikolakirev.OnboardKitTests;
434438
PRODUCT_NAME = "$(TARGET_NAME)";
439+
PROVISIONING_PROFILE_SPECIFIER = "";
435440
SWIFT_SWIFT3_OBJC_INFERENCE = On;
436441
SWIFT_VERSION = 4.2;
437442
};
@@ -441,11 +446,13 @@
441446
isa = XCBuildConfiguration;
442447
buildSettings = {
443448
ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
449+
CODE_SIGN_STYLE = Manual;
444450
DEVELOPMENT_TEAM = 5Z8M29P3V9;
445451
INFOPLIST_FILE = OnboardKitTests/Info.plist;
446452
LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
447453
PRODUCT_BUNDLE_IDENTIFIER = com.nikolakirev.OnboardKitTests;
448454
PRODUCT_NAME = "$(TARGET_NAME)";
455+
PROVISIONING_PROFILE_SPECIFIER = "";
449456
SWIFT_SWIFT3_OBJC_INFERENCE = On;
450457
SWIFT_VERSION = 4.2;
451458
};

‎OnboardKit/OnboardPageViewController.swift‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,11 @@ internal final class OnboardPageViewController: UIViewController {
7575

7676
weak var delegate: OnboardPageViewControllerDelegate?
7777

78+
private let appearanceConfiguration: OnboardViewController.AppearanceConfiguration
79+
7880
init(pageIndex: Int, appearanceConfiguration: OnboardViewController.AppearanceConfiguration) {
7981
self.pageIndex = pageIndex
82+
self.appearanceConfiguration = appearanceConfiguration
8083
super.init(nibName: nil, bundle: nil)
8184
customizeStyleWith(appearanceConfiguration)
8285
}
@@ -93,11 +96,23 @@ internal final class OnboardPageViewController: UIViewController {
9396
// Style description
9497
descriptionLabel.textColor = appearanceConfiguration.textColor
9598
descriptionLabel.font = appearanceConfiguration.textFont
96-
// Style buttons
97-
actionButton.setTitleColor(appearanceConfiguration.tintColor, for: .normal)
98-
actionButton.titleLabel?.font = appearanceConfiguration.titleFont
99-
advanceButton.setTitleColor(appearanceConfiguration.tintColor, for: .normal)
100-
advanceButton.titleLabel?.font = appearanceConfiguration.textFont
99+
}
100+
101+
private func customizeButtonsWith(_ appearanceConfiguration: OnboardViewController.AppearanceConfiguration) {
102+
advanceButton.sizeToFit()
103+
if let advanceButtonStyling = appearanceConfiguration.advanceButtonStyling {
104+
advanceButtonStyling(advanceButton)
105+
} else {
106+
advanceButton.setTitleColor(appearanceConfiguration.tintColor, for: .normal)
107+
advanceButton.titleLabel?.font = appearanceConfiguration.textFont
108+
}
109+
actionButton.sizeToFit()
110+
if let actionButtonStyling = appearanceConfiguration.actionButtonStyling {
111+
actionButtonStyling(actionButton)
112+
} else {
113+
actionButton.setTitleColor(appearanceConfiguration.tintColor, for: .normal)
114+
actionButton.titleLabel?.font = appearanceConfiguration.titleFont
115+
}
101116
}
102117

103118
override func loadView() {
@@ -123,6 +138,12 @@ internal final class OnboardPageViewController: UIViewController {
123138
advanceButton.addTarget(self,
124139
action: #selector(OnboardPageViewController.advanceTapped),
125140
for: .touchUpInside)
141+
142+
}
143+
144+
override func viewWillAppear(_ animated: Bool) {
145+
super.viewWillAppear(animated)
146+
customizeButtonsWith(appearanceConfiguration)
126147
}
127148

128149
func configureWithPage(_ page: OnboardPage) {

‎OnboardKit/OnboardViewController.swift‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,8 @@ extension OnboardViewController: OnboardPageViewControllerDelegate {
147147
// MARK: - AppearanceConfiguration
148148
public extension OnboardViewController {
149149

150+
typealias ButtonStyling = ((UIButton) -> Void)
151+
150152
struct AppearanceConfiguration {
151153
/// The color used for the page indicator and buttons
152154
///
@@ -178,18 +180,32 @@ public extension OnboardViewController {
178180
/// - note: Defualts to preferred text style `.body` (supports dinamyc type)
179181
let textFont: UIFont
180182

183+
/// A Swift closure used to expose and customize the button used to advance to the next page
184+
///
185+
/// - note: Defualts to nil. If not used, the button will be customized based on the tint and text properties
186+
let advanceButtonStyling: ButtonStyling?
187+
188+
/// A Swift closure used to expose and customize the button used to trigger page specific action
189+
///
190+
/// - note: Defualts to nil. If not used, the button will be customized based on the title properties
191+
let actionButtonStyling: ButtonStyling?
192+
181193
public init(tintColor: UIColor = UIColor(red: 0.0, green: 122.0/255.0, blue: 1.0, alpha: 1.0),
182194
titleColor: UIColor? = nil,
183195
textColor: UIColor = .darkText,
184196
backgroundColor: UIColor = .white,
185197
titleFont: UIFont = UIFont.preferredFont(forTextStyle: .title1),
186-
textFont: UIFont = UIFont.preferredFont(forTextStyle: .body)) {
198+
textFont: UIFont = UIFont.preferredFont(forTextStyle: .body),
199+
advanceButtonStyling: ButtonStyling? = nil,
200+
actionButtonStyling: ButtonStyling? = nil) {
187201
self.tintColor = tintColor
188202
self.titleColor = titleColor ?? textColor
189203
self.textColor = textColor
190204
self.backgroundColor = backgroundColor
191205
self.titleFont = titleFont
192206
self.textFont = textFont
207+
self.advanceButtonStyling = advanceButtonStyling
208+
self.actionButtonStyling = actionButtonStyling
193209
}
194210
}
195211
}

‎README.md‎

Lines changed: 31 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -61,14 +61,38 @@ onboardingVC.presentFrom(self, animated: true)
6161

6262
![Custom examples](Assets/custom_examples.png)
6363

64-
You can customize the look of your onboarding by changing the default colors.
64+
#### Customizing Fonts and Colors
65+
You can customize the look of your onboarding by changing the default colors and fonts.
66+
67+
1. Initialize an `AppearanceConfiguration` instance with the desired custom style properties
68+
````swift
69+
let appearance = AppearanceConfiguration(tintColor: .orange,
70+
titleColor: .red,
71+
textColor: .white,
72+
backgroundColor: .black,
73+
titleFont: UIFont.boldSystemFont(ofSize: 32.0),
74+
textFont: UIFont.boldSystemFont(ofSize: 17.0))
75+
````
76+
2. Pass the `AppearanceConfiguration` instance as a parameter when initialising an `OnboardViewController`
77+
````swift
78+
let onboardingVC = OnboardViewController(pageItems: onboardingPages,
79+
appearanceConfiguration: appearance)
80+
````
81+
82+
#### Customizing Buttons
83+
To customize the style of the advance and action buttons on each page of the onboarding flow, you can use a `ButtonStyling` closure.
84+
85+
1. Create the closure
86+
````swift
87+
let advanceButtonStyling: OnboardViewController.ButtonStyling = { button in
88+
button.setTitleColor(UIColor.lightGray, for: .normal)
89+
button.titleLabel?.font = UIFont.systemFont(ofSize: 16.0, weight: .semibold)
90+
}
91+
````
92+
2. Pass the closure in the `AppearanceConfiguration` initializer
6593
````swift
66-
AppearanceConfiguration(tintColor: .orange,
67-
titleColor: .red,
68-
textColor: .white,
69-
backgroundColor: .black,
70-
titleFont: UIFont.boldSystemFont(ofSize: 32.0),
71-
textFont: UIFont.boldSystemFont(ofSize: 17.0))
94+
let appearance = OnboardViewController.AppearanceConfiguration(tintColor: .orange,
95+
advanceButtonStyling: advanceButtonStyling)
7296
````
7397

7498
## Author

0 commit comments

Comments
 (0)