Dezignables

A collection of designable components I often use in my iOS projects. Checkout the Example project to see all available options.

Example

To run the example project, clone the repo, and run carthage bootstrap --no-use-binaries --platform ios from the Example directory first.

Installation

Dezignables is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "Dezignables"

API

Dezignables are implemented using protocol extensions. The pre-made components include all or most of the dezignables available and are ready to use. You could also apply one or more of the dezignable protocols on your own components.

Components

Class	Dezignables
DezignableView	DezignableBorder DezignableCorner DezignableRotation DezignableBackground DezignableShadow
DezignableButton	DezignableBorder DezignableCorner DezignableRotation DezignableBackground DezignableShadow DezignableHighlight
DezignableImageView	DezignableBorder DezignableCorner DezignableRotation DezignableBackground DezignableShadow
DezignableLabel	DezignableBorder DezignableCorner DezignableRotation DezignableBackground DezignableShadow
DezignableTableViewController	Fixes an issue with the swipe-back-gesture. When swiping back really fast to a table view controller, the selection of the cell would not be cleared. This component fixes this issue. Can be used with static tables, designed in Interface Builder. DezignableSeparator DezignableHighlight DezignableHiddenSections
DezignableViewController	DezignableHiddenNavigationBar DezignableStatusBar

Dezignables

DezignableBorder

Property	Description	Preview
borderWidth	Sets the width of the border in points	✅
borderColor	Color of the border	✅
borderTop	Draws top border	✅
borderBottom	Draws bottom border	✅
borderLeft	Draws left border	✅
borderRight	Draws right border	✅
borderScaleCorrection	Converts the borderWidth to physical pixels. The borderWidth value gets divided by UIScreen.mainScreen().scale. To create a hairline border use borderWidth=1.0 and borderScaleCorrection=true.	✅

DezignableCorner

Property	Description	Preview
cornerRadius	The radius of all four corners, in points	✅
cornerCircle	Make a full circle based on the height of the view. The preview looks weird when used with DezignableRotation	✅

DezignableRotation

Property	Description	Preview
rotation	The amount of degrees the view should rotate	❌

DezignableBackground

Property	Description	Preview
backgroundFillColor	Fill the view with a solid color	✅
backgroundGradientStartColor	Start color of the gradient	✅
backgroundGradientStopColor	Stop color of the gradient	✅
backgroundGradientStartPoint	Position of the start color in the gradient	✅
backgroundGradientStopPoint	Position of the stop color in the gradient	✅

DezignableShadow

When you want to use DezignableShadow together with DezignableBorder you'll need to use two different views and lay them out exactly on top of each other. See the Example app for a demo.

Property	Description	Preview
boxShadowColor	The color of the shadow	❌
boxShadowRadius	How far out the shadow will spread	❌
boxShadowOpacity	How transparant the shadow will be. 0.0 is invisible, 1.0 is fully visible	❌
boxShadowOffset	From what point the shadow will draw	❌

DezignableSeparator

This is a table cell separator that doesn't dissapear when selecting the cell. Cells need to be a subclass of DezignableTableViewCell, or you can use DezignableTableViewCell directly.

Property	Description	Preview
separatorColor	The color of the separator	❌
separatorWidth	The width of the separator, in points	❌
separatorScaleCorrection	Converts the separatorWidth to physical pixels. The separatorWidth value gets divided by UIScreen.mainScreen().scale. To create a hairline border use separatorWidth=1.0 and borderScaleCorrection=true.	❌

DezignableHiddenSections

These functions can be called from a subclass of DezignableTableViewController or directly on the controller.

Function	Description	Preview
hideSection(section: Int)	Hides the given section (section index is zero-based)	❌
showSection(section: Int)	Shows the given section (section index is zero-based)	❌
isSectionHidden(section: Int) -> Bool	Returns true when given section is hidden (section index is zero-based)	❌

DezignableHighlight

A custom highlight and selection background color for table cells and buttons. Cells need to be a subclass of DezignableTableViewCell or you can use DezignableTableViewCell directly.

Property	Description	Preview
selectedBackgroundColor	The color used when the cell is selected	Cell: ❌ - Button: ✅
highlightBackgroundColor	The color used when the cell is highlighted, for cells the selectedBackgroundColor is used when this value is nil	Cell: ❌ - Button: ✅
normalBackgroundColor	The default background color of the cell, defaults to UIColor.whiteColor()	Cell: ❌ - Button: ✅

DezignableHiddenNavigationBar

Property	Description	Preview
navigationBarHidden	Whether or not the navigation bar is hidden for this view controller	❌

DezignableStatusBar

Property	Description	Preview
statusBarLight	Shows a light status bar for this view controller	❌
statusBarHidden	Whether or not the status bar is hidden for this view controller	❌

License

Dezignables is available under the MIT license. See the LICENSE file for more info.