Classes

An Anatomy-styled push button element. Includes properties for adding and positioning Anatomy icons as well as all normal UIButton functionality.

For storyboards, add a UIButton to your view and change the class name to DSButton. BE SURE THE TYPE IS SET TO CUSTOM otherwise some colors won’t show correctly.

Initialize and set properties as needed.

let button = DSButton(renderingType: .primary)

button.setTitle("Settings", for: .normal)
button.icon = .gear

If the button performs an asynchonous operation, you can present a spinning indicator by setting isLoading to true. This will also disable the button.

button.isLoading = true

See more

@IBDesignable
public final class DSButton : UIButton

An Anatomy-styled, image-only push button element that displays an icon as well as all normal UIButton functionality. Title text is not allowed.

For storyboards, add a UIButton to your view and change the class name to DSIconButton. BE SURE THE TYPE IS SET TO CUSTOM otherwise some colors won’t show correctly.

If the button performs an asynchronous operation, you can present a spinning indicator by setting isLoading to true. This will also disable the button.

Initialize and set properties as needed.

let button = DSIconButton(icon: .gear)

See more

@IBDesignable
public final class DSIconButton : UIButton

A content divider for use outside of a UITableView context. There are no properties to set.

For storyboards, add a UIView to your view and change the class name to DSDivider.

A top and bottom margin is built into the component and cannot be altered or removed. However, the divider stretches horizontally to its full width.

Initialize as follows:

let divider = DSDivider()

@IBDesignable
public final class DSDivider : UIView

An Anatomy-styled drop-in replacement for a UIImageView designed for (tinted) icon display. For storyboards, add a UIImageView to your view and change the class name to DSIcon.

Initialize with a rendering type to specify the image displayed. The default intrinsic size is 20x20, but can be overridden by specifying a renderingSize. A rendering size of .size24 would size the icon at 24x24. It’s recommended not to use layout constraints for sizing.

let defaultIcon = DSIcon(renderingType: .phone)
let smallIcon = DSIcon(renderingType: .credit_card, renderingSize: .size20)
let largeIcon = DSIcon(renderingType: .credit_card, renderingSize: .size24)

Do not attempt to change the icon directly using image as this change could be overwritten if other properties get changed:

let icon = DSIcon(renderingType: .phone)

icon.image = UIImage(named: "my-own-image-specified")
icon.renderingSize = .size20 // <-- improper Icon image will be lost

No tintColor is applied by DSIcon. The rendering type for a DSIcon can be changed at any time.

See more

@IBDesignable
public final class DSIcon : UIImageView, DSIconDisplayable

An Anatomy-styled drop-in replacement for a UIImageView designed for (colored) illustration display. For storyboards, add a UIImageView to your view and change the class name to DSIllustration.

Initialize with a rendering type to specify the image displayed. The default intrinsic size is 120x120, but can be overridden by specifying a renderingSize. A rendering size of .size160 would size the illustration at 160x160. It’s recommended not to use layout constraints for sizing.

let defaultIllustration = DSIllustration(renderingType: .office)
let smallIllustration = DSIllustration(renderingType: .quiz, renderingSize: .size160)
let largeIllustration = DSIllustration(renderingType: .tests, renderingSize: .size120)

Do not attempt to change the illustration directly using image as this change could be overwritten if other properties get changed:

let illustration = DSIllustration(renderingType: .gluten)

illustration.image = UIImage(named: "illustration-anatomy-scale")
illustration.renderingSize = .size64 // <-- improper Illustration image will be lost

The rendering type for an DSIllustration can be changed at any time.

See more

@IBDesignable
public final class DSIllustration : UIImageView, DSIconDisplayable

The DSCreditCardInputMask, when assigned to a DSTextField, will enforce use of a number pad for text entry and format credit card numbers if it recognizes the brand of the card being entered. (e.g., Visa, Mastercard, etc.)

It will also limit the number of characters based on the same rules.

let textField = DSTextField()

textField.inputMask = DSCreditCardInputMask()

See more

public class DSCreditCardInputMask : DSInputMask

The DSCurrencyInputMask, when assigned to a DSTextField, will enforce use of a decimal pad for text entry and only allows digits and a decimal point (no more than one) to be entered.

It’s recommended to use prefix text for currency entry which will display in the field.

let textField = DSTextField()

textField.inputMask = DSCurrencyInputMask()
textField.prefixText = Locale.current.currencySymbol ?? "$"

let currencyText = textField.text // <-- $1.23 (as seen)
let currency = textField.rawText // <-- 1.23 (without formatting)

See more

public class DSCurrencyInputMask : DSInputMask

The DSEmailAddressInputMask, when assigned to a DSTextField, will enforce use of an email keyboard for text entry and prevents invalid typing of email addresses where possible.

It’s recommended to use the DSEmailAddressValidationRule along with this mask.

let textField = DSTextField()

textField.inputMask = DSEmailAddressInputMask()
textField.addValidationRule(DSEmailAddressValidationRule())

See more

public class DSEmailAddressInputMask : DSInputMask

The DSNumberInputMask, when assigned to a DSTextField, will enforce use of an number pad for numeric entry where only digits are allowed.

let textField = DSTextField()

textField.inputMask = DSNumberInputMask()

See more

public class DSNumberInputMask : DSInputMask

The DSPhoneNumberInputMask, when assigned to a DSTextField, will enforce use of an number pad for text entry and allows only digits to be entered and formatted. Only 10-digit phone numbers are allowed.

It’s recommended to use the DSPhoneNumberValidationRule along with this mask.

let textField = DSTextField()

textField.inputMask = DSPhoneNumberInputMask()
textField.addValidationRule(DSPhoneNumberValidationRule())

See more

public class DSPhoneNumberInputMask : DSInputMask

An Anatomy-styled text entry element. Includes properties for providing placeholder text (which shrinks and moves upwards when text is entered), helper text that sits below that educates the user on what text to enter, and DSValidationRule rules which will fire when the entered text isn’t determined to be valid.

The field defaults to single-line, but if isMultiline is set to true the field will grow vertically as text is entered and space is required.

For storyboards, add a UIView to your view and change the class name to DSTextField.

Since this component can shrink and grow vertically to accomodate its contents, it’s recommended that the DSTextField be embedded in a UITableView that makes it easy for its contents to resize smoothly vertically. The easiest way to do this is to use the DSTextFieldDelegate method textFieldDidLayout which gets called when the size changes. Implement it somewhat as follows:

textFieldDidLayout(_ textField: DSTextField) {
    tableView.beginUpdates()
    tableView.endUpdates()
}

Initialize and set properties as needed.

let bioField = DSTextField()

bioField.placeholderText = "Bio"
bioField.helperText = "XXX-XXX-XXXX"
bioField.addValidationRule(RequiredValidationRule())
bioField.clearButtonMode = .whileEditing

See more

@IBDesignable
public final class DSTextField : UIView

extension DSTextField: UITextViewDelegate