UI Customisations
Good to know: kevin. SDK is is fully customisable. Everything can be changed according to your app design - colours, fonts and most of the element styles. Default SDK theme fallbacks to the inset style theme. Both light and dark mode colours and assets are supported in the theme modification.
Create a new class overriding KevinTheme object:
CustomTheme.swift
1
import UIKit
2
import Kevin
3
4
class CustomKevinTheme : KevinTheme {
5
override init() {
6
super.init()
7
// This is where the customisations will go
8
}
9
}
Copied!
Set global kevin. theme to your custom one:
1
Kevin.shared.theme = CustomKevinTheme()
Copied!
Start customising theme:
CustomTheme.swift
1
import UIKit
2
import Kevin
3
4
class CustomKevinTheme : KevinTheme {
5
6
override init() {
7
super.init()
8
9
// Modify content insets
10
insets.left = 16
11
insets.top = 24
12
insets.right = 16
13
insets.bottom = 25
14
15
// Modify general shared colour properties between screens
16
generalStyle.primaryBackgroundColor = UIColor.lightGray
17
generalStyle.primaryTextColor = UIColor.black
18
generalStyle.secondaryTextColor = UIColor.gray
19
20
// Modify navigation bar style if you use our navigation controller
21
navigationBarStyle.titleColor = UIColor.white
22
navigationBarStyle.tintColor = UIColor.white
23
navigationBarStyle.backgroundColorLightMode = UIColor.white
24
navigationBarStyle.backgroundColorDarkMode = UIColor.black
25
navigationBarStyle.backButtonImage = UIImage(named: "yourBackImage")
26
navigationBarStyle.closeButtonImage = UIImage(named: "yourCloseImage")
27
28
// Modify bottom sheet (for example country selection container)
29
sheetPresentationStyle.dragIndicatorTintColor = UIColor.gray
30
sheetPresentationStyle.backgroundColor = UIColor.lightGray
31
sheetPresentationStyle.titleLabelFont = UIFont.systemFont(ofSize: 21, weight: .medium)
32
sheetPresentationStyle.cornerRadius = 10
33
34
// Modify style of the separate sections (bank selection titles)
35
sectionStyle.titleLabelFont = UIFont.systemFont(ofSize: 13, weight: .semibold)
36
37
// Modify grid layout style (bank selection cells)
38
gridTableStyle.cellBackgroundColor = UIColor.white
39
gridTableStyle.cellSelectedBackgroundColor = UIColor.gray
40
gridTableStyle.cellCornerRadius = 10
41
42
// Modify list layout style (country selection cells)
43
listTableStyle.cornerRadius = 10
44
listTableStyle.isOccupyingFullWidth = false
45
listTableStyle.cellBackgroundColor = UIColor.white
46
listTableStyle.cellSelectedBackgroundColore = UIColor.gray
47
listTableStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
48
listTableStyle.chevronImage = UIImage(named: "yourChevronImage")
49
50
// Modify navigation link style (country selection button)
51
navigationLinkStyle.backgroundColor = UIColor.white
52
navigationLinkStyle.selectedBackgroundColor = UIColor.gray
53
navigationLinkStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
54
navigationLinkStyle.borderWidth = 0
55
navigationLinkStyle.cornerRadius = 10
56
navigationLinkStyle.borderColor = UIColor.black
57
navigationLinkStyle.chevronImage = UIImage(named: "yourChevronImage")
58
59
// Modify main button (Continue button) style
60
61
mainButtonStyle.width = UIScreen.main.bounds.width - 32
62
mainButtonStyle.height = 48
63
mainButtonStyle.backgroundColor = UIColor.blue
64
mainButtonStyle.titleLabelTextColor = UIColor.white
65
mainButtonStyle.titleLabelFont = UIFont.systemFont(ofSize: 15, weight: .semibold)
66
mainButtonStyle.cornerRadius = 8
67
mainButtonStyle.shadowRadius = 2
68
mainButtonStyle.shadowOpacity = 0.6
69
mainButtonStyle.shadowOffset = CGSize(width: 1.0, height: 1.0)
70
mainButtonStyle.shadowColor = UIColor.blue
71
}
72
}
Copied!
Copy link