CreationKit Documentation

Protocol Component​Layout 

public protocol ComponentLayout

A protocol to share components (view layouts) across different types.

ComponentLayout ComponentLayout ChipLayout ChipLayout ChipLayout->ComponentLayout DayCellLayout DayCellLayout DayCellLayout->ComponentLayout StaticInputFieldLayout StaticInputFieldLayout StaticInputFieldLayout->ComponentLayout RatingLayout RatingLayout RatingLayout->ComponentLayout ModalDialog.Buttons ModalDialog.Buttons ModalDialog.Buttons->ComponentLayout ActionSheetHeader ActionSheetHeader ActionSheetHeader->ComponentLayout ConversationStarterLayout ConversationStarterLayout ConversationStarterLayout->ComponentLayout CheckboxLayout CheckboxLayout CheckboxLayout->ComponentLayout CardErrorLayout CardErrorLayout CardErrorLayout->ComponentLayout VerticalCenteredImageTextLayout VerticalCenteredImageTextLayout VerticalCenteredImageTextLayout->ComponentLayout AttachmentMessageView AttachmentMessageView AttachmentMessageView->ComponentLayout ModalDialog.Header ModalDialog.Header ModalDialog.Header->ComponentLayout MessagesHeaderLayout MessagesHeaderLayout MessagesHeaderLayout->ComponentLayout TitleLayout TitleLayout TitleLayout->ComponentLayout TabViewLayout TabViewLayout TabViewLayout->ComponentLayout AvatarListCellLayout AvatarListCellLayout AvatarListCellLayout->ComponentLayout ModalDialog.TextField ModalDialog.TextField ModalDialog.TextField->ComponentLayout Handle Handle Handle->ComponentLayout ListCellRightImageLayout ListCellRightImageLayout ListCellRightImageLayout->ComponentLayout ListCellLayout ListCellLayout ListCellLayout->ComponentLayout TagLayout TagLayout TagLayout->ComponentLayout ModalDialog.ActionSheetLayout ModalDialog.ActionSheetLayout ModalDialog.ActionSheetLayout->ComponentLayout CheckboxActionLayout CheckboxActionLayout CheckboxActionLayout->ComponentLayout TextInputFormLayout TextInputFormLayout TextInputFormLayout->ComponentLayout ActionsLayout ActionsLayout ActionsLayout->ComponentLayout LabelInputFormLayout LabelInputFormLayout LabelInputFormLayout->ComponentLayout ModalDialog.Message ModalDialog.Message ModalDialog.Message->ComponentLayout CardHeaderLayout CardHeaderLayout CardHeaderLayout->ComponentLayout ModalDialog.DatePickerHeader ModalDialog.DatePickerHeader ModalDialog.DatePickerHeader->ComponentLayout Scrim Scrim Scrim->ComponentLayout AvailabilityBannerLayout AvailabilityBannerLayout AvailabilityBannerLayout->ComponentLayout ModalDialog.DatePickerForm ModalDialog.DatePickerForm ModalDialog.DatePickerForm->ComponentLayout TabImageTitleLayout TabImageTitleLayout TabImageTitleLayout->ComponentLayout

Types Conforming to Component​Layout

AvailabilityBannerLayout
ActionsLayout
CheckboxActionLayout

A layout that contains a Checkbox and a label.

TitleLayout
VerticalCenteredImageTextLayout
CardErrorLayout
CardHeaderLayout
CheckboxLayout

The ComponentLayout to make a Checkbox. You usually won't need to use this directly, prefer to use Checkbox instead.

ChipLayout
ConversationStarterLayout
DayCellLayout

A layout for day cells in a DatePicker

LabelInputFormLayout

A layout used in forms for gathering input from a user.

TextInputFormLayout

A layout used in forms for gathering text input from a user.

StaticInputFieldLayout

A layout for static input fields for Forms.

AvatarListCellLayout
ListCellLayout
ListCellRightImageLayout
MessagesHeaderLayout

A header for MessagesViewController. This could possible be placed elsewhere, but it's main design is made to be placed in a MessagesViewController as a header.

Handle

A Handle for a BottomSheet.

Scrim

Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. They help direct user attention to other parts of the screen, away from the surface receiving a scrim.

TabViewLayout
TagLayout

Requirements

layout(on:​) 

func layout(on view: UIView)

Called to layout your view onto a view. Ensure to call view.addSubview(myView) in this method.

You should not call this method yourself. The Component type that receives this layout will call layout(on:) for you.

init() 

init()