blob: 09e13686c21bbae21f116a514437af97a6232dd4 [file] [log] [blame] [edit]
// Copyright 2019-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 UIKit
import MaterialComponents.MaterialCollections
import MaterialComponents.MaterialDialogs
import MaterialComponents.MaterialDialogs_Theming
import MaterialComponents.MaterialTextControls_FilledTextFields
import MaterialComponents.MaterialTextControls_FilledTextFieldsTheming
import MaterialComponents.MaterialContainerScheme
import MaterialComponents.MaterialTypographyScheme
class DialogsAccessoryExampleViewController: MDCCollectionViewController {
@objc lazy var containerScheme: MDCContainerScheming = {
let scheme = MDCContainerScheme()
scheme.colorScheme = MDCSemanticColorScheme(defaults: .material201907)
scheme.typographyScheme = MDCTypographyScheme(defaults: .material201902)
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 = containerScheme.colorScheme.backgroundColor
loadCollectionView(menu: [
"Material Filled Text Field",
"UI Text Field",
"Confirmation Dialog",
"Autolayout in Custom View",
])
}
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 performMDCTextField()
case 1:
return performUITextField()
case 2:
return performConfirmationDialog()
case 3:
return performCustomLabelWithButton()
default:
print("No row is selected")
return nil
}
}
// Demonstrate a custom view with MDCFilledTextField being assigned to the accessoryView API.
// This example also demonstrates the use of autolayout in custom views.
func performMDCTextField() -> MDCAlertController {
let alert = MDCAlertController(title: "Rename File", message: nil)
alert.addAction(MDCAlertAction(title: "Rename", emphasis: .medium, handler: handler))
alert.addAction(MDCAlertAction(title: "Cancel", emphasis: .low, handler: handler))
if let alertView = alert.view as? MDCAlertControllerView {
alertView.contentInsets.bottom = 16.0
}
let view = UIView(frame: CGRect.zero)
let label = newLabel(text: "OLD_FILE.PNG will be renamed:")
let namefield = MDCFilledTextField()
namefield.label.text = "New File Name"
namefield.placeholder = "Enter a new file name"
namefield.labelBehavior = MDCTextControlLabelBehavior.floats
namefield.clearButtonMode = UITextField.ViewMode.whileEditing
namefield.leadingAssistiveLabel.text = "An optional assistive message"
namefield.applyTheme(withScheme: containerScheme)
// Enable dynamic type.
namefield.adjustsFontForContentSizeCategory = true
namefield.font = UIFont.preferredFont(
forTextStyle: .body, compatibleWith: namefield.traitCollection)
namefield.leadingAssistiveLabel.font = UIFont.preferredFont(
forTextStyle: .caption2, compatibleWith: namefield.traitCollection)
label.translatesAutoresizingMaskIntoConstraints = false
namefield.translatesAutoresizingMaskIntoConstraints = false
view.translatesAutoresizingMaskIntoConstraints = true
view.addSubview(label)
view.addSubview(namefield)
label.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
label.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
label.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: namefield.topAnchor, constant: -10).isActive = true
namefield.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
namefield.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
namefield.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
alert.accessoryView = view
alert.mdc_adjustsFontForContentSizeCategory = true // Enable dynamic type.
alert.applyTheme(withScheme: self.containerScheme)
return alert
}
func performUITextField() -> MDCAlertController {
let alert = MDCAlertController(title: "This is a title", message: "This is a message")
let textField = UITextField()
textField.placeholder = "This is a text field"
alert.accessoryView = textField
alert.addAction(MDCAlertAction(title: "Dismiss", emphasis: .medium, handler: handler))
alert.mdc_adjustsFontForContentSizeCategory = true // Enable dynamic type.
alert.applyTheme(withScheme: self.containerScheme)
return alert
}
// Demonstrate a confirmation dialog with a custom table view.
func performConfirmationDialog() -> MDCAlertController {
let alert = MDCAlertController(title: "Phone ringtone", message: "Please select a ringtone:")
alert.addAction(MDCAlertAction(title: "OK", handler: handler))
alert.addAction(MDCAlertAction(title: "Cancel", handler: handler))
alert.accessoryView = ExampleTableSeparatorView()
if let alertView = alert.view as? MDCAlertControllerView {
// Zero bottom-inset ensuring the bottom separator appears immediately above the actions.
alertView.contentInsets.bottom = 0
// Decreasing vertical margin between the accessory view and the message
alertView.accessoryViewVerticalInset = 8
// Aligning the accessory view with the dialog's edge by removing all horizontal insets.
alertView.accessoryViewHorizontalInset = -alertView.contentInsets.left
}
alert.mdc_adjustsFontForContentSizeCategory = true // Enable dynamic type.
alert.applyTheme(withScheme: self.containerScheme)
return alert
}
// Demonstrate a custom accessory view with auto layout, presenting a label and a button.
func performCustomLabelWithButton() -> MDCAlertController {
let alert = MDCAlertController(title: "Title", message: nil)
alert.addAction(MDCAlertAction(title: "Dismiss", emphasis: .medium, handler: handler))
let view = UIView(frame: CGRect.zero)
let label = newLabel(text: "Your storage is full. Your storage is full.")
let button = MDCButton()
button.setTitle("Learn More", for: UIControl.State.normal)
button.contentEdgeInsets = UIEdgeInsets(top: 8, left: 0, bottom: 0, right: 8)
button.applyTextTheme(withScheme: containerScheme)
label.translatesAutoresizingMaskIntoConstraints = false
button.translatesAutoresizingMaskIntoConstraints = false
view.translatesAutoresizingMaskIntoConstraints = true
view.addSubview(label)
view.addSubview(button)
label.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
label.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
label.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
label.bottomAnchor.constraint(equalTo: button.topAnchor).isActive = true
button.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
button.trailingAnchor.constraint(lessThanOrEqualTo: view.trailingAnchor).isActive = true
button.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
alert.accessoryView = view
alert.mdc_adjustsFontForContentSizeCategory = true // Enable dynamic type.
alert.applyTheme(withScheme: self.containerScheme)
return alert
}
func newLabel(text: String) -> UILabel {
let label = UILabel()
label.textColor = containerScheme.colorScheme.onSurfaceColor
label.font = containerScheme.typographyScheme.subtitle2
label.text = text
label.numberOfLines = 0
return label
}
}
// MDCCollectionViewController Data Source
extension DialogsAccessoryExampleViewController {
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.isAccessibilityElement = true
customCell.accessibilityTraits = .button
let cellTitle = menu[indexPath.row]
customCell.accessibilityLabel = cellTitle
customCell.textLabel?.text = cellTitle
return customCell
}
}
// MARK: Catalog by convention
extension DialogsAccessoryExampleViewController {
@objc class func catalogMetadata() -> [String: Any] {
return [
"breadcrumbs": ["Dialogs", "Dialog With Accessory View"],
"primaryDemo": false,
"presentable": true,
]
}
}
// MARK: Snapshot Testing by Convention
extension DialogsAccessoryExampleViewController {
func resetTests() {
if presentedViewController != nil {
dismiss(animated: false)
}
}
@objc func testTextField() {
resetTests()
self.present(performUITextField(), animated: false, completion: nil)
}
@objc func testMDCTextField() {
resetTests()
self.present(performMDCTextField(), animated: false, completion: nil)
}
@objc func testCustomLabelWithButton() {
resetTests()
self.present(performCustomLabelWithButton(), animated: false, completion: nil)
}
@objc func testConfirmationDialog() {
resetTests()
self.present(performConfirmationDialog(), animated: false, completion: nil)
}
}
// An example view with a tableview and a bottom separator.
class ExampleTableSeparatorView: UIView, UITableViewDataSource {
let ringtones = ["Callisto", "Luna", "Phobos", "Dione"]
let tableView: UITableView = {
let tv = AutoSizedTableView()
tv.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
tv.separatorStyle = .none
tv.rowHeight = 40
return tv
}()
init() {
super.init(frame: .zero)
setup()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
func setup() {
tableView.dataSource = self
tableView.alwaysBounceVertical = false
addSubview(tableView)
let separator = UIView(frame: .zero)
separator.backgroundColor = UIColor.lightGray.withAlphaComponent(0.5)
addSubview(separator)
tableView.translatesAutoresizingMaskIntoConstraints = false
separator.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
tableView.topAnchor.constraint(lessThanOrEqualTo: self.topAnchor),
tableView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
tableView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
separator.topAnchor.constraint(equalTo: tableView.bottomAnchor),
separator.leadingAnchor.constraint(equalTo: self.leadingAnchor),
separator.trailingAnchor.constraint(equalTo: self.trailingAnchor),
separator.bottomAnchor.constraint(equalTo: self.bottomAnchor),
separator.heightAnchor.constraint(equalToConstant: 2),
])
tableView.reloadData()
let currentRingtone = IndexPath(row: 1, section: 0)
tableView.selectRow(at: currentRingtone, animated: false, scrollPosition: .top)
}
func numberOfSections(in tableView: UITableView) -> Int {
return 1
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return ringtones.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
cell.textLabel?.text = ringtones[indexPath.row]
cell.indentationLevel = 1
return cell
}
}
// A tableview with intrinsic size that matches its content size.
final class AutoSizedTableView: UITableView {
override var contentSize: CGSize {
didSet {
invalidateIntrinsicContentSize()
}
}
override var intrinsicContentSize: CGSize {
layoutIfNeeded()
return CGSize(width: UIView.noIntrinsicMetric, height: contentSize.height)
}
}