Inherits from UIScrollView
Declared in SEssentialsFlowLayout.h
Availability
Related samples FlowLayoutGettingStarted
FlowLayoutHowToSortItems

Overview

The SEssentialsFlowLayout is a UIView that manages the layout of its subviews into rows attempting to flow the subviews as text would be laid out on a page. It supports an edit mode that allows users to long press a subview and then move/delete it.

Once a flow layout has been created, subviews are added using the addManagedSubview: method. These subviews will be arranged in raster order within the containing flow layout view. The gaps between adjacent views within a row are determined with the horizontalSpacing property, whilst the spacing between rows is managed with the verticalSpacing property.

The height of each row is determined by the subview within that row with the largest height. The vertical alignment of the subviews within a row is given by the verticalAlignment property and the horizontal alignment of each row within the flow layout by the horizontalAlignment property.

Managed subviews can be removed or replaced using the removeManagedSubview:animated: and moveManagedSubview:toIndex: methods. An array of managed subviews in their current display order is provided by managedViews and passing an array of the current subviews to reorderManagedSubviews:animated: will change their ordering to that defined in the array.

The flow layout has a style object, which is an instance of SEssentialsFlowLayoutStyle. This manages the look and feel of the control by setting things like the tint color and background texture of the flow layout. The style object should always be used to update the look of the control, rather than accessing the flow layout and setting its properties directly.

The style has precedence over any visual changes which are made to the flow layout directly. For example, if you were to set a property such as the background color on the flow layout directly, this change will be overridden the next time the style is updated. That is why it is important to use the style to manage the look and feel of the control.

Tasks

Subview alignment properties

Mainview Alignment properties

  •   horizontalPadding

    The horizontal padding at edges of parent view in points. Defaults to 8.

    property
  •   verticalPadding

    The vertical padding at edges of parent view in points. Defaults to 8.

    property
  •   edgeConstraints

    When moving a subview in edit mode this prevents the subview from positioning outside the bounds of the main view (defaults to SEssentialsEdgeConstraintNone)

    property

Animation properties

  •   animationType

    Animation type when subviews are laid out, defaults to SEssentialsAnimationSweep

    property
  •   movementAnimationDuration

    The duration of the animation when views animate to a new position, or when they grow as they are selected. This defaults to a quarter of a second.

    property
  •   wobbleAnimationDuration

    The duration of the wobble effect animation on views when they go into edit mode. This defaults to a quarter of a second.

    property
  •   instantUpdate

    Updates the layout during drag operations when YES otherwise waits until drag has stopped moving. (Defaults to YES)

    property
  •   showEditWobble

    Enable / disable the wobble effect during edit mode. (Defaults to YES)

    property

Edit Mode Properties

  •   showDestinationMarker

    Shows an indicator marking the target insertion point during edit. (Defaults to YES)

    property
  •   longPressDuration

    The minimum duration for pressing a subview before edit mode begins

    property
  •   editable

    Allows user to edit layout with long press. (Defaults to YES)

    property
  •   snapToCenter

    When moving a subview in edit mode this centers the subview on the touch point (defaults to NO)

    property
  •   showDoneButton

    When YES a ‘done’ button is generated when edit mode begins (for SEssentialsFlowDeleteIdiomIcon) When NO the implementer must offer a means to end editing (e.g. a button or gesture) that calls endEditMode to end editing (defaults to YES)

    property
  •   editButtonLocation

    The location of the editing button in the flow layout, defaults to SEssentialsLocationTopRight. The editing button is the trash can for SEssentialsFlowDeleteIdiomTrashCan and the done button for SEssentialsFlowDeleteIdiomIcon. The value is ignored if an implementation of editButtonPositionInFlowLayout: is supplied in the delegate.

    property
  •   dragsOutsideBounds

    Option to allow a managed view to be dragged outside the flow layout area. When YES, the view will follow the gesture anywhere When NO, the view will stop at the edge of the flow, until the gesture returns inside the flow bounds.

    property
  •   deleteIdiom

    A read only property set at creation that determines the style of the edit mode. The Trashcan idiom requires users to drag unwanted subviews to a trashcan to remove them. The Icon idiom adds delete buttons to each subview like the Apple home screen (default).

    property

Styling

  •   style

    Background, buttons and icons used in edit mode can be controlled through the style.

    property
  • – applyTheme:

    Applies the specified theme to the flow layout.

  •   managedViews

    A readonly property giving an NSArray of UIViews which have been added to the Flow Layout. This should be used in place of [layout subviews], as subviews may include additional UIView classes which were not added by the implementer.

    property

Initializing an SEssentialsFlowLayout

Managing layout subviews

Delegation

Properties

animationType

Animation type when subviews are laid out, defaults to SEssentialsAnimationSweep

@property (nonatomic, assign) SEssentialsAnimationType animationType

Discussion

typedef enum
{
   SEssentialsAnimationLinear,
   SEssentialsAnimationSweep,
   SEssentialsAnimationFromTop,
   SEssentialsAnimationUser
} SEssentialsAnimationType;

Declared In

SEssentialsFlowLayout.h

deleteIdiom

A read only property set at creation that determines the style of the edit mode. The Trashcan idiom requires users to drag unwanted subviews to a trashcan to remove them. The Icon idiom adds delete buttons to each subview like the Apple home screen (default).

@property (nonatomic, readonly) SEssentialsFlowDeleteIdiom deleteIdiom

Discussion

typedef enum
{
   SEssentialsFlowDeleteIdiomTrashCan,
   SEssentialsFlowDeleteIdiomIcon
} SEssentialsFlowDeleteIdiom;

The SEssentialsFlowDeleteIdomIcon idiom causes the managed views in the flow layout control to wobble, just like in the Apple home screen. By default, the edges of a view are not anti-aliased, so can appear jagged during this animation. In order to enable anti-aliasing, you can set the UIViewEdgeAntialiasing flag in your app’s info.plist. Bear in mind that this will have an impact on performance, as it requires Core Animation to do extra work in order to calculate the blending.

Declared In

SEssentialsFlowLayout.h

dragsOutsideBounds

Option to allow a managed view to be dragged outside the flow layout area. When YES, the view will follow the gesture anywhere When NO, the view will stop at the edge of the flow, until the gesture returns inside the flow bounds.

@property (nonatomic, assign) BOOL dragsOutsideBounds

Declared In

SEssentialsFlowLayout.h

edgeConstraints

When moving a subview in edit mode this prevents the subview from positioning outside the bounds of the main view (defaults to SEssentialsEdgeConstraintNone)

@property (nonatomic, assign) SEssentialsEdgeConstraints edgeConstraints

Discussion

typedef enum
{
   SEssentialsEdgeConstrainNone = 0,
   SEssentialsEdgeConstrainVertical = 1 << 0,
   SEssentialsEdgeConstrainHorizontal = 1 << 1
} SEssentialsEdgeConstraints;

Declared In

SEssentialsFlowLayout.h

editButtonLocation

The location of the editing button in the flow layout, defaults to SEssentialsLocationTopRight. The editing button is the trash can for SEssentialsFlowDeleteIdiomTrashCan and the done button for SEssentialsFlowDeleteIdiomIcon. The value is ignored if an implementation of editButtonPositionInFlowLayout: is supplied in the delegate.

@property (nonatomic, assign) SEssentialsEditButtonLocation editButtonLocation

Discussion

typedef enum
{
   SEssentialsLocationTopRight,
   SEssentialsLocationRight,
   SEssentialsLocationBottomRight,
   SEssentialsLocationBottom,
   SEssentialsLocationBottomLeft,
   SEssentialsLocationLeft,
   SEssentialsLocationTopLeft,
   SEssentialsLocationTop,
} SEssentialsEditButtonLocation;

Declared In

SEssentialsFlowLayout.h

editable

Allows user to edit layout with long press. (Defaults to YES)

@property (nonatomic, assign) BOOL editable

Declared In

SEssentialsFlowLayout.h

flowDelegate

The delegate for the SEssentialsFlowLayout edit events. See SEssentialsFlowLayoutDelegate

@property (assign) id<SEssentialsFlowLayoutDelegate> flowDelegate

Declared In

SEssentialsFlowLayout.h

horizontalPadding

The horizontal padding at edges of parent view in points. Defaults to 8.

@property (nonatomic, assign) CGFloat horizontalPadding

Declared In

SEssentialsFlowLayout.h

horizontalSubviewAlignment

Horizontal alignment of subviews within each row. Defaults to SEssentialsAlignLeft.

@property (nonatomic, assign) SEssentialsHorizontalAlignment horizontalSubviewAlignment

Discussion

typedef enum
{
   SEssentialsAlignLeft,
   SEssentialsAlignCenter,
   SEssentialsAlignRight
} SEssentialsHorizontalAlignment;

Declared In

SEssentialsFlowLayout.h

horizontalSubviewSpacing

The horizontal minimum spacing between elements in points. Defaults to 14.

@property (nonatomic, assign) CGFloat horizontalSubviewSpacing

Declared In

SEssentialsFlowLayout.h

instantUpdate

Updates the layout during drag operations when YES otherwise waits until drag has stopped moving. (Defaults to YES)

@property (nonatomic, assign) BOOL instantUpdate

Declared In

SEssentialsFlowLayout.h

longPressDuration

The minimum duration for pressing a subview before edit mode begins

@property (nonatomic, assign) CGFloat longPressDuration

Declared In

SEssentialsFlowLayout.h

managedViews

A readonly property giving an NSArray of UIViews which have been added to the Flow Layout. This should be used in place of [layout subviews], as subviews may include additional UIView classes which were not added by the implementer.

@property (nonatomic, readonly) NSArray *managedViews

Declared In

SEssentialsFlowLayout.h

movementAnimationDuration

The duration of the animation when views animate to a new position, or when they grow as they are selected. This defaults to a quarter of a second.

@property (nonatomic, assign) CGFloat movementAnimationDuration

Declared In

SEssentialsFlowLayout.h

showDestinationMarker

Shows an indicator marking the target insertion point during edit. (Defaults to YES)

@property (nonatomic, assign) BOOL showDestinationMarker

Declared In

SEssentialsFlowLayout.h

showDoneButton

When YES a ‘done’ button is generated when edit mode begins (for SEssentialsFlowDeleteIdiomIcon) When NO the implementer must offer a means to end editing (e.g. a button or gesture) that calls endEditMode to end editing (defaults to YES)

@property (nonatomic, assign) BOOL showDoneButton

Declared In

SEssentialsFlowLayout.h

showEditWobble

Enable / disable the wobble effect during edit mode. (Defaults to YES)

@property (nonatomic, assign) BOOL showEditWobble

Declared In

SEssentialsFlowLayout.h

snapToCenter

When moving a subview in edit mode this centers the subview on the touch point (defaults to NO)

@property (nonatomic, assign) BOOL snapToCenter

Declared In

SEssentialsFlowLayout.h

style

Background, buttons and icons used in edit mode can be controlled through the style.

@property (nonatomic, readonly, retain) SEssentialsFlowLayoutStyle *style

Declared In

SEssentialsFlowLayout.h

verticalPadding

The vertical padding at edges of parent view in points. Defaults to 8.

@property (nonatomic, assign) CGFloat verticalPadding

Declared In

SEssentialsFlowLayout.h

verticalSubviewAlignment

Vertical alignment of subviews within each row. Defaults to SEssentialsAlignTop.

@property (nonatomic, assign) SEssentialsVerticalAlignment verticalSubviewAlignment

Discussion

typedef enum
{
   SEssentialsAlignTop,
   SEssentialsAlignMiddle,
   SEssentialsAlignBottom
} SEssentialsVerticalAlignment;

Declared In

SEssentialsFlowLayout.h

verticalSubviewSpacing

The vertical minimum spacing between rows in points. Defaults to 14.

@property (nonatomic, assign) CGFloat verticalSubviewSpacing

Declared In

SEssentialsFlowLayout.h

wobbleAnimationDuration

The duration of the wobble effect animation on views when they go into edit mode. This defaults to a quarter of a second.

@property (nonatomic, assign) CGFloat wobbleAnimationDuration

Declared In

SEssentialsFlowLayout.h

Instance Methods

addManagedSubview:

Add a subview that has its position managed

- (void)addManagedSubview:(UIView *)subview

Parameters

subview

the subview to be added

Declared In

SEssentialsFlowLayout.h

addManagedSubview:atIndex:

Add a subview that has its position managed, at the specified index

- (void)addManagedSubview:(UIView *)subview atIndex:(NSInteger)index

Parameters

subview

the subview to be added

index

the index to insert at

Declared In

SEssentialsFlowLayout.h

applyTheme:

Applies the specified theme to the flow layout.

- (void)applyTheme:(SEssentialsTheme *)theme

Declared In

SEssentialsFlowLayout.h

beginEditMode

Puts the layout into edit mode (i.e. delete icons and wobbling, if necessary)

- (void)beginEditMode

Declared In

SEssentialsFlowLayout.h

endEditMode

End the edit mode if it is in progress (i.e. removes delete icons, stops wobbling)

- (void)endEditMode

Declared In

SEssentialsFlowLayout.h

forceLayout

Causes items to be laid out, this may be useful if a managed subview changes its size and the flow layout needs to respond to this.

- (void)forceLayout

Declared In

SEssentialsFlowLayout.h

forceLayoutFromPoint:

Force a layout with animation beginning at point.

- (void)forceLayoutFromPoint:(CGPoint)point

Parameters

point

the point from which the layout will begin

Declared In

SEssentialsFlowLayout.h

initWithFrame:

Initialize view with the specified frame rectangle with default deleteIdiom

- (id)initWithFrame:(CGRect)frame

Parameters

frame

rectangle defining views extent

Declared In

SEssentialsFlowLayout.h

initWithFrame:withDeleteIdiom:

Initialize view with the specified frame rectangle and deleteIdiom

- (id)initWithFrame:(CGRect)frame withDeleteIdiom:(SEssentialsFlowDeleteIdiom)idiom

Parameters

frame

rectangle defining views extent

idiom

see SEssentialsFlowDeleteIdiom

Declared In

SEssentialsFlowLayout.h

initWithFrame:withDeleteIdiom:style:

Initialize view with the specified frame rectangle and deleteIdiom and a custom style

- (id)initWithFrame:(CGRect)frame withDeleteIdiom:(SEssentialsFlowDeleteIdiom)idiom style:(SEssentialsFlowLayoutStyle *)style

Parameters

frame

rectangle defining views extent

idiom

see SEssentialsFlowDeleteIdiom

style

that controls icons and graphics

Declared In

SEssentialsFlowLayout.h

moveManagedSubview:toIndex:

Move a subview

- (void)moveManagedSubview:(UIView *)subview toIndex:(NSInteger)index

Parameters

subview

the subview that is to be moved

index

target index for destination in orderedViews. The item is added before the target index shifting items following it down the list

Declared In

SEssentialsFlowLayout.h

removeManagedSubview:animated:

Remove a subview

- (void)removeManagedSubview:(UIView *)subview animated:(BOOL)animated

Parameters

subview

the subview to be removed

animated

when YES a small fading animation occurs before removing subview

Declared In

SEssentialsFlowLayout.h

reorderManagedSubviews:animated:

Reorder subviews

- (void)reorderManagedSubviews:(NSArray *)newOrdering animated:(BOOL)animated

Parameters

newOrdering

an array holding the subviews in the desired ordering.

animated

a boolean specifying whether the reordering should be animated or not The array contents must match managedViews, otherwise an exception is thrown.

Declared In

SEssentialsFlowLayout.h

unmanageSubview:

Stops managing a view, without destroying the view.

- (void)unmanageSubview:(UIView *)subview

Parameters

subview

the subview to be unmanaged

Declared In

SEssentialsFlowLayout.h