-
Notifications
You must be signed in to change notification settings - Fork 946
/
DialogsAlertCustomizationViewController.swift
306 lines (256 loc) · 11.2 KB
/
DialogsAlertCustomizationViewController.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
// Copyright 2018-present the Material Components for iOS authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import Foundation
import MaterialComponents.MaterialButtons
import MaterialComponents.MaterialColorScheme
import MaterialComponents.MaterialDialogs
import MaterialComponents.MaterialCollections
import MaterialComponents.MaterialDialogs_DialogThemer
import MaterialComponents.MaterialTypographyScheme
class CustomAlertViewController: UIViewController {
let bodyLabel = UILabel()
let dismissButton = MDCFlatButton()
var cornerRadius: CGFloat {
set { view.layer.cornerRadius = newValue }
get { return view.layer.cornerRadius }
}
override var preferredContentSize: CGSize {
get { return CGSize(width:200.0, height:140.0); }
set { super.preferredContentSize = newValue }
}
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
bodyLabel.text = "This is a view controller."
bodyLabel.translatesAutoresizingMaskIntoConstraints = false
bodyLabel.numberOfLines = 0
bodyLabel.sizeToFit()
self.view.addSubview(bodyLabel)
NSLayoutConstraint.activate(
NSLayoutConstraint.constraints(withVisualFormat: "H:|-[body]-|", options: [],
metrics: nil, views: ["body": bodyLabel]))
NSLayoutConstraint.activate(
NSLayoutConstraint.constraints(withVisualFormat: "V:|-[body]-|", options: [],
metrics: nil, views: ["body": bodyLabel]))
}
}
class DialogsAlertCustomizationViewController: MDCCollectionViewController {
var colorScheme = MDCSemanticColorScheme()
var typographyScheme = MDCTypographyScheme()
var alertScheme: MDCAlertScheme {
let scheme = MDCAlertScheme()
scheme.colorScheme = self.colorScheme
scheme.typographyScheme = self.typographyScheme
return scheme
}
let kReusableIdentifierItem = "customCell"
var menu: [String] = []
var handler: MDCActionHandler = { action in
print(action.title ?? "Some Action")
}
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.white
loadCollectionView(menu: [
"Centered Title",
"Centered Title With a Title Icon",
"Naturally Aligned Title with an Icon",
"Right Aligned Title with a Large Icon",
"Tinted Title Icon, No Title",
"Darker Scrim",
"Emphasis-based Button Theming",
"Text Button Theming (will be deprecated)",
"Text Button Theming (the right way)",
"Custom Button Theming",
"Unthemed Alert",
])
}
func loadCollectionView(menu: [String]) {
self.collectionView?.register(MDCCollectionViewTextCell.self, forCellWithReuseIdentifier: kReusableIdentifierItem)
self.menu = menu
}
override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
guard let alert = performActionFor(row: indexPath.row) else { return }
self.present(alert, animated: true, completion: nil)
}
private func performActionFor(row: Int) -> MDCAlertController? {
switch row {
case 0:
return performCenteredTitle()
case 1:
return performCenteredTitleWithIcon()
case 2:
return performNaturalTitleWithIcon()
case 3:
return performRightTitleWithResizedIcon()
case 4:
return performTintedTitleIconNoTitle()
case 5:
return performScrimColor()
case 6:
return performEmphasisButtonTheming()
case 7:
return performDeprecatedTextButtonTheming() // b/117717380: Will be deprecated
case 8:
return performTextButtonThemingTheRightWay()
case 9:
return performCustomButtonTheming()
case 10:
return performUnthemed()
default:
print("No row is selected")
return nil
}
}
func sampleIcon(isStandardSize: Bool = true) -> UIImage? {
let bundle = Bundle(for: DialogsAlertCustomizationViewController.self)
return UIImage(
named: isStandardSize ? "outline_lock_black_24pt" : "baseline_alarm_on_black_48pt",
in: bundle, compatibleWith: nil)
}
func performCenteredTitle() -> MDCAlertController {
let alert = createMDCAlertController(title: "Center Aligned Title")
alert.titleAlignment = .center
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
return alert
}
func performCenteredTitleWithIcon() -> MDCAlertController {
let alert = createMDCAlertController(title: "Center Aligned Title")
alert.titleIcon = sampleIcon()
alert.titleAlignment = .center
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
return alert
}
func performNaturalTitleWithIcon() -> MDCAlertController {
let alert = createMDCAlertController(title: "Default (Natural) Title Alignment")
alert.titleIcon = sampleIcon()
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
return alert
}
func performRightTitleWithResizedIcon() -> MDCAlertController {
let alert = createMDCAlertController(title: "Right Aligned Title")
alert.titleIcon = sampleIcon(isStandardSize: false)
alert.titleAlignment = .right
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
return alert
}
func performTintedTitleIconNoTitle() -> MDCAlertController {
let alert = createMDCAlertController(title: nil)
alert.titleIcon = sampleIcon()
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
// Theming override: set the titleIconTintColor after the color scheme has been applied
alert.titleIconTintColor = .red
return alert
}
func performScrimColor() -> MDCAlertController {
let alert = createMDCAlertController(title: "Darker Scrim")
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
alert.scrimColor = UIColor.black.withAlphaComponent(0.6)
return alert
}
func performEmphasisButtonTheming() -> MDCAlertController {
let alert = MDCAlertController(title: "Button Theming", message: "High, Medium & Low Emphasis")
alert.addAction(MDCAlertAction(title:"High", emphasis: .high, handler: handler))
alert.addAction(MDCAlertAction(title:"Medium", emphasis: .medium, handler: handler))
alert.addAction(MDCAlertAction(title:"Low", emphasis: .low, handler: handler))
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
return alert
}
func performDeprecatedTextButtonTheming() -> MDCAlertController {
let alert = MDCAlertController(title: "Button Theming",
message: "This method of button theming will be deprecated")
// When not specified, the action is low emphasis by default
alert.addAction(MDCAlertAction(title:"Text", handler: handler))
alert.addAction(MDCAlertAction(title:"Text", handler: handler))
alert.addAction(MDCAlertAction(title:"Text", handler: handler))
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
alert.buttonTitleColor = .orange // b/117717380: will be deprecated
return alert
}
// The right way to select the type of buttons is by setting empahsis for actions
func performTextButtonThemingTheRightWay() -> MDCAlertController {
let alert = MDCAlertController(title: "Button Theming",
message: "Use low emphasis to present buttons as text")
// Use .low emphasis to style buttons as text buttons.
alert.addAction(MDCAlertAction(title:"Text", emphasis: .low, handler: handler))
alert.addAction(MDCAlertAction(title:"Text", emphasis: .low, handler: handler))
alert.addAction(MDCAlertAction(title:"Text", emphasis: .low, handler: handler))
MDCAlertControllerThemer.applyScheme(alertScheme, to: alert)
return alert
}
func performCustomButtonTheming() -> MDCAlertController {
let alert = MDCAlertController(title: "Custom Button Theming",
message: "Custom styling of High, Medium & Low Emphasis")
alert.titleIcon = sampleIcon()
// Use .low emphasis for styling buttons as text buttons
alert.addAction(MDCAlertAction(title:"High", emphasis: .high, handler: handler))
alert.addAction(MDCAlertAction(title:"Medium", emphasis: .medium, handler: handler))
alert.addAction(MDCAlertAction(title:"Low", emphasis: .low, handler: handler))
let scheme = MDCAlertScheme()
scheme.typographyScheme = self.typographyScheme
// Create a color theme with a different primary color
let colorScheme = MDCSemanticColorScheme()
colorScheme.primaryColor = .blue
// Assign the new color theme to both the button and the alert schemes.
let buttonScheme = MDCButtonScheme()
buttonScheme.colorScheme = colorScheme
scheme.colorScheme = colorScheme
scheme.buttonScheme = buttonScheme
MDCAlertControllerThemer.applyScheme(scheme, to: alert)
return alert
}
func performUnthemed() -> MDCAlertController {
let alert = MDCAlertController(title: "Unthemed Alert",
message: "Lorem ipsum dolor sit amet, consectetur adipiscing...")
alert.addAction(MDCAlertAction(title:"High", emphasis: .high, handler: handler))
alert.addAction(MDCAlertAction(title:"Medium", emphasis: .medium, handler: handler))
alert.addAction(MDCAlertAction(title:"Low", emphasis: .low, handler: handler))
return alert
}
private func createMDCAlertController(title: String?) -> MDCAlertController {
let alertController = MDCAlertController(title: title, message: """
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
""")
alertController.addAction(MDCAlertAction(title:"OK", handler: handler))
alertController.addAction(MDCAlertAction(title:"Cancel", handler: handler))
return alertController
}
}
// MDCCollectionViewController Data Source
extension DialogsAlertCustomizationViewController {
override func numberOfSections(in collectionView: UICollectionView) -> Int {
return 1
}
override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
return menu.count
}
override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: kReusableIdentifierItem,
for: indexPath)
guard let customCell = cell as? MDCCollectionViewTextCell else { return cell }
customCell.textLabel?.text = menu[indexPath.row]
return customCell
}
}
// MARK: Catalog by convention
extension DialogsAlertCustomizationViewController {
class func catalogMetadata() -> [String: Any] {
return [
"breadcrumbs": ["Dialogs", "Alert Customization"],
"primaryDemo": false,
"presentable": false,
]
}
}