Latest 0.9.9
Homepage https://github.com/cemolcay/KeyboardLayoutEngine
License MIT
Platforms ios 8.0, requires ARC
Dependencies Shadow
Frameworks UIKit
Authors

Version
License

⌨️ Simplest custom keyboard generator for iOS ever!

alt tag

KeyboardLayoutEngine is all about laying out keyboard buttons dynamically in a rectangle with a custom style easily. For the sake of flexiblity, KeyboardLayoutEngine provides:

  • KeyboardLayout: For laying out rows with custom paddings, colors.
  • KeyboardRow: For laying out buttons or another set of KeyboardRow’s inside.
  • KeyboardButton: For rendering buttons in rows. Also provides flexible width, type and other very useful API’s.
  • They are also UIViews and handles their layout in their layoutSubviews function.
  • They are faster than autolayout yet they can adopt perfectly any CGFrame you want apply a keyboard layout.
  • That means they are play very well with orientation changes. (Layout for size class and/or orientation support is on the way.)
  • KeyboardLayoutStyle, KeyboardRowStyle and KeyboardButtonStyle structs handles pretty much everything about styling.
  • KeyboardLayoutDelegate for inform about button presses.
  • Also CustomKeyboard provided out of box, a good start point for figuring out how it works other than being of fully functional original keyboard.

Install

CocoaPods

use_frameworks!
# Target Keyboard
pod 'KeyboardLayoutEngine'

Usage

  • Describe your keyboard with custom styles, rows and buttons with either text or image in it.
  • Checkout the CustomKeyboardLayout for detailed usage.
let keyboardLayout = KeyboardLayout(
  style: CustomKeyboardLayoutStyle,
  rows: [
    KeyboardRow(
      style: CustomKeyboardRowStyle,
      characters: [
        KeyboardButton(type: .Key("Q"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("W"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("E"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("R"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("T"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("Y"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("U"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("I"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("O"), style: CustomKeyboardKeyButtonStyle),
        KeyboardButton(type: .Key("P"), style: CustomKeyboardKeyButtonStyle),
      ]
    )
  ]
)

override func viewDidLoad() {
    super.viewDidLoad()
    view.addSubview(keyboardLayout)
}

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    keyboardLayout.setNeedsLayout()
}

KeyboardLayoutDelegate

  • Implement KeyboardLayoutDelegate for get information about the button presses.
@objc public protocol KeyboardLayoutDelegate {
  // Key Press Events
  optional func keyboardLayout(keyboardLayout: KeyboardLayout, didKeyPressStart keyboardButton: KeyboardButton)
  optional func keyboardLayout(keyboardLayout: KeyboardLayout, didKeyPressEnd keyboardButton: KeyboardButton)
  optional func keyboardLayout(keyboardLayout: KeyboardLayout, didDraggedIn fromKeyboardButton: KeyboardButton, toKeyboardButton: KeyboardButton)
  // Touch Events
  optional func keyboardLayout(keyboardLayout: KeyboardLayout, didTouchesBegin touches: Set<UITouch>)
  optional func keyboardLayout(keyboardLayout: KeyboardLayout, didTouchesMove touches: Set<UITouch>)
  optional func keyboardLayout(keyboardLayout: KeyboardLayout, didTouchesEnd touches: Set<UITouch>?)
  optional func keyboardLayout(keyboardLayout: KeyboardLayout, didTouchesCancel touches: Set<UITouch>?)
}

KeyboardButtonWidth

public enum KeyboardButtonWidth {
  case Dynamic
  case Static(width: CGFloat)
  case Relative(percent: CGFloat)
}
  • Laying out buttons in rows are important. Since rows can their child rows, calculating right sizes for buttons and rows done by button types.
  • If you leave .Dynamic which is default by the way, every button in a row, it will calculate their width by KeyboardRowStyle.buttonPadding and total width of row and figure out equal widths with equal buttonPaddings.
  • Static will be static width obviusly.
  • Relative is an interesting one, which takes a value between [0, 1], fills percent of parent row, smartly calculated.

KeyboardButtonType

public enum KeyboardButtonType {
  case Key(String)
  case Text(String)
  case Image(UIImage?)
}
  • A button can be Key, Text or Image.
  • Key case might be useful for textDocumentProxy.insertTextoperation.
  • Text case might be useful for buttons like "space", "return", "ABC", "123" or any string include emojis.
  • Image case might be useful for buttons like "shift", "backspace", "switch keyboard" etc.

Styling

  • Every style struct has their default values in taste of original keyboard.
  • If you dont assign a value in init function of a style struct, it will be loaded with its default value.

KeyboardLayoutStyle

Definition:

public struct KeyboardLayoutStyle {
  public var topPadding: CGFloat
  public var bottomPadding: CGFloat
  public var rowPadding: CGFloat
  public var backgroundColor: UIColor
}

Example:

let CustomKeyboardLayoutStyle = KeyboardLayoutStyle(
  topPadding: 10,
  bottomPadding: 5,
  rowPadding: 13,
  backgroundColor: UIColor(red: 208.0/255.0, green: 213.0/255.0, blue: 219.0/255.0, alpha: 1))

KeyboardRowStyle

Definition:

public struct KeyboardRowStyle {
  public var leadingPadding: CGFloat
  public var trailingPadding: CGFloat
  public var buttonsPadding: CGFloat
}

Example:

let CustomKeyboardRowStyle = KeyboardRowStyle(
  leadingPadding: 5,
  trailingPadding: 5,
  buttonsPadding: 6)

KeyboardButtonStyle

Definition:

public struct KeyboardButtonStyle {
  public var backgroundColor: UIColor
  public var cornerRadius: CGFloat

  // Border
  public var borderColor: UIColor
  public var borderWidth: CGFloat

  // Shadow
  public var shadowColor: UIColor
  public var shadowOpacity: Float
  public var shadowOffset: CGSize
  public var shadowRadius: CGFloat
  public var shadowPath: UIBezierPath?

  // Text
  public var textColor: UIColor
  public var font: UIFont

  // Image
  public var imageSize: CGFloat?

  // Popup
  public var showsPopup: Bool
  public var popupWidthMultiplier: CGFloat
  public var popupHeightMultiplier: CGFloat
}

Example:

let CustomKeyboardDarkImageButtonStyle = KeyboardButtonStyle(
  backgroundColor: UIColor(red: 180.0/255.0, green: 188.0/255.0, blue: 201.0/255.0, alpha: 1),
  imageSize: 18,
  showsPopup: false)

CustomKeyboard

Default iOS Keyboard implementation with KeyboardLayoutEngine.

  • Shift toggle mechanism
  • Backspace mechanisim
  • Key button popups
  • textDocumentProxy integrations with CustomKeyboardDelegate
  • Ridiculusly easy implementation in KeyboardViewController
  • Change default styles before initilze it and you have your fully functional custumised standard English QWERTY keyboard!
override func viewDidLoad() {
    super.viewDidLoad()
    CustomKeyboardLayoutStyle.backgroundColor = UIColor.redColor()
    CustomKeyboardRowStyle.buttonsPadding = 5
    customKeyboard = CustomKeyboard()
    customKeyboard.delegate = self
    view.addSubview(customKeyboard)
}

CustomKeyboard styles

  • CustomKeyboardLayoutStyle: KeyboardLayoutStyle
  • CustomKeyboardRowStyle: KeyboardRowStyle
  • CustomKeyboardSecondRowStyle: KeyboardRowStyle
  • CustomKeyboardChildRowStyle: KeyboardRowStyle
  • CustomKeyboardSpaceButtonStyle: KeyboardButtonStyle
  • CustomKeyboardBackspaceButtonStyle: KeyboardButtonStyle
  • CustomKeyboardShiftButtonStyle: KeyboardButtonStyle
  • CustomKeyboardGlobeButtonStyle: KeyboardButtonStyle
  • CustomKeyboardReturnButtonStyle: KeyboardButtonStyle
  • CustomKeyboardNumbersButtonStyle: KeyboardButtonStyle
  • CustomKeyboardKeyButtonStyle: KeyboardButtonStyle

CustomKeyboardDelegate

  • Provides information about key and special button presses.
@objc public protocol CustomKeyboardDelegate {
optional func customKeyboard(customKeyboard: CustomKeyboard, keyboardButtonPressed keyboardButton: KeyboardButton)
optional func customKeyboard(customKeyboard: CustomKeyboard, keyButtonPressed key: String)
optional func customKeyboardSpaceButtonPressed(customKeyboard: CustomKeyboard)
optional func customKeyboardBackspaceButtonPressed(customKeyboard: CustomKeyboard)
optional func customKeyboardGlobeButtonPressed(customKeyboard: CustomKeyboard)
optional func customKeyboardReturnButtonPressed(customKeyboard: CustomKeyboard)
}

Latest podspec

{
    "name": "KeyboardLayoutEngine",
    "version": "0.9.9",
    "summary": "u2328ufe0f Simplest custom keyboard generator for iOS ever!",
    "description": "KeyboardLayoutEnginen===nnu2328ufe0f Simplest custom keyboard generator for iOS ever!nn`KeyboardLayoutEngine` is all about laying out keyboard buttons dynamically in a rectangle in a custom style easily but in fashion of original keyboard. For the sake of flexiblity, KeyboardLayoutEngine provides:nn* `KeyboardLayout`: For laying out rows with custom paddings, colors.n* `KeyboardRow`: For laying out buttons or another set of KeyboardRow's inside.n* `KeyboardButton`: For rendering buttons in rows. Also provides flexible width, type and other very useful API's for flexiblty.n* They are also `UIView`s and handles their layout in their `layoutSubviews` function.n* They are faster than autolayout yet they can adopt perfectly any `CGFrame` you want apply a keyboard layout.n* That means they are play very well with orientation changes. (Layout for size class and/or orientation support is on the way.)n* `KeyboardLayoutStyle`, `KeyboardRowStyle` and `KeyboardButtonStyle` structs handles pretty much everything about styling.n* `KeyboardLayoutDelegate` for inform about button presses.n* Also `DefaultKeyboard` provided out of box, a good start point for figuring out how it works other than being of fully functional original keyboard.nnInstalln----n#### CocoaPodsnn``` rubynuse_frameworks!n# Target Keyboardnpod 'KeyboardLayoutEngine'n```nnUsagen----nn* Describe your keyboard with custom styles, rows and buttons with either text or image in it.n* Checkout the [DefaultKeyboardLayout](https://github.com/cemolcay/KeyboardLayoutEngine/blob/master/Keyboard/DefaultKeyboard/DefaultKeyboardLayout.swift) for detailed usage.nn``` swiftnlet keyboardLayout = KeyboardLayout(nstyle: DefaultKeyboardLayoutStyle,nrows: [nKeyboardRow(nstyle: DefaultKeyboardRowStyle,ncharacters: [nKeyboardButton(type: .Key("Q"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("W"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("E"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("R"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("T"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("Y"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("U"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("I"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("O"), style: DefaultKeyboardKeyButtonStyle),nKeyboardButton(type: .Key("P"), style: DefaultKeyboardKeyButtonStyle),n]n)n]n)nnoverride func viewDidLoad() {nsuper.viewDidLoad()nview.addSubview(keyboardLayout)n}nnoverride func viewDidLayoutSubviews() {nsuper.viewDidLayoutSubviews()nkeyboardLayout.setNeedsLayout()n}n```nnKeyboardLayoutDelegaten----nn* Implement `KeyboardLayoutDelegate` for get information about the button presses.nn``` [email protected] public protocol KeyboardLayoutDelegate {noptional func keyboardLayoutDidStartPressingButton(keyboardLayout: KeyboardLayout, keyboardButton: KeyboardButton)noptional func keyboardLayoutDidPressButton(keyboardLayout: KeyboardLayout, keyboardButton: KeyboardButton)n}n```nnKeyboardButtonWidthn----nn``` swiftnpublic enum KeyboardButtonWidth {ncase Dynamicncase Static(width: CGFloat)ncase Relative(percent: CGFloat)n}n```nn* Laying out buttons in rows are important. Since rows can their child rows, calculating right sizes for buttons and rows done by button types.n* If you leave `.Dynamic` which is default by the way, every button in a row, it will calculate their width by `KeyboardRowStyle.buttonPadding` and total width of row and figure out equal widths with equal buttonPaddings.n* Static will be static width obviusly.n* Relative is an interesting one, which takes a value between [0, 1], fills percent of parent row, smartly calculated.nnKeyboardButtonTypen----nn``` swiftnpublic enum KeyboardButtonType {ncase Key(String)ncase Text(String)ncase Image(UIImage?)n}n```nn* A button can be `Key`, `Text` or `Image`.n* Key case might be useful for `textDocumentProxy.insertText`operation.n* Text case might be useful for buttons like "space", "return", "ABC", "123" or any string include emojis.n* Image case might be useful for buttons like "shift", "backspace", "switch keyboard" etc.nnStylingn----nn* Every style struct has their default values in taste of original keyboard.n* If you dont assign a value in `init` function of a style struct, it will be loaded with its default value.nnKeyboardLayoutStylen----nDefinition:nn``` swiftnpublic struct KeyboardLayoutStyle {npublic var topPadding: CGFloatnpublic var bottomPadding: CGFloatnpublic var rowPadding: CGFloatnpublic var backgroundColor: UIColorn}n```nnExample:nn``` swiftnlet DefaultKeyboardLayoutStyle = KeyboardLayoutStyle(ntopPadding: 10,nbottomPadding: 5,nrowPadding: 13,nbackgroundColor: UIColor(red: 208.0/255.0, green: 213.0/255.0, blue: 219.0/255.0, alpha: 1))n```nnKeyboardRowStylen----nnDefinition:nnn``` swiftnpublic struct KeyboardRowStyle {npublic var leadingPadding: CGFloatnpublic var trailingPadding: CGFloatnpublic var buttonsPadding: CGFloatn}n```nnExample:nn``` swiftnlet DefaultKeyboardRowStyle = KeyboardRowStyle(nleadingPadding: 5,ntrailingPadding: 5,nbuttonsPadding: 6)n```nnKeyboardButtonStylen----nnDefinition:nn``` swiftnpublic struct KeyboardButtonStyle {npublic var backgroundColor: UIColornpublic var cornerRadius: CGFloatnn// Bordernpublic var borderColor: UIColornpublic var borderWidth: CGFloatnn// Shadownpublic var shadowColor: UIColornpublic var shadowOpacity: Floatnpublic var shadowOffset: CGSizenpublic var shadowRadius: CGFloatnpublic var shadowPath: UIBezierPath?nn// Textnpublic var textColor: UIColornpublic var font: UIFontnn// Imagenpublic var imageSize: CGFloat?nn// Popupnpublic var showsPopup: Boolnpublic var popupWidthMultiplier: CGFloatnpublic var popupHeightMultiplier: CGFloatn}n```nnExample:nn``` swiftnlet DefaultKeyboardDarkImageButtonStyle = KeyboardButtonStyle(nbackgroundColor: UIColor(red: 180.0/255.0, green: 188.0/255.0, blue: 201.0/255.0, alpha: 1),nimageSize: 18,nshowsPopup: false)n```nnDefaultKeyboardn----nnDefault iOS Keyboard implementation with `KeyboardLayoutEngine`.nn* Shift toggle mechanismn* Backspace mechanisimn* Key button popupsn* `textDocumentProxy` integrations with `DefaultKeyboardDelegate`n* Ridiculusly easy implementation in `KeyboardViewController`n* Change default styles before initilze it and you have your fully functional custumised standard English QWERTY keyboard!nn``` swiftnoverride func viewDidLoad() {nsuper.viewDidLoad()nDefaultKeyboardLayoutStyle.backgroundColor = UIColor.redColor()nDefaultKeyboardRowStyle.buttonsPadding = 5ndefaultKeyboard = DefaultKeyboard()ndefaultKeyboard.delegate = selfnview.addSubview(defaultKeyboard)n}n```nn#### DefaultKeyboard stylesnn* DefaultKeyboardLayoutStyle: `KeyboardLayoutStyle`n* DefaultKeyboardRowStyle: `KeyboardRowStyle`n* DefaultKeyboardSecondRowStyle: `KeyboardRowStyle`n* DefaultKeyboardChildRowStyle: `KeyboardRowStyle`n* DefaultKeyboardSpaceButtonStyle: `KeyboardButtonStyle`n* DefaultKeyboardBackspaceButtonStyle: `KeyboardButtonStyle`n* DefaultKeyboardShiftButtonStyle: `KeyboardButtonStyle`n* DefaultKeyboardGlobeButtonStyle: `KeyboardButtonStyle`n* DefaultKeyboardReturnButtonStyle: `KeyboardButtonStyle`n* DefaultKeyboardNumbersButtonStyle: `KeyboardButtonStyle`n* DefaultKeyboardKeyButtonStyle: `KeyboardButtonStyle`nnDefaultKeyboardDelegaten----nn* Provides information about key and special button presses.nn``` [email protected] public protocol DefaultKeyboardDelegate {noptional func defaultKeyboardDidPressKeyButton(defaultKeyboard: DefaultKeyboard, key: String)noptional func defaultKeyboardDidPressSpaceButton(defaultKeyboard: DefaultKeyboard)noptional func defaultKeyboardDidPressBackspaceButton(defaultKeyboard: DefaultKeyboard)noptional func defaultKeyboardDidPressGlobeButton(defaultKeyboard: DefaultKeyboard)noptional func defaultKeyboardDidPressReturnButton(defaultKeyboard: DefaultKeyboard)n}n```",
    "homepage": "https://github.com/cemolcay/KeyboardLayoutEngine",
    "license": "MIT",
    "authors": {
        "cemolcay": "[email protected]"
    },
    "platforms": {
        "ios": "8.0"
    },
    "source": {
        "git": "https://github.com/cemolcay/KeyboardLayoutEngine.git",
        "tag": "0.9.9"
    },
    "source_files": [
        "Keyboard/KeyboardLayoutEngine/*.swift",
        "Keyboard/CustomKeyboard/*.swift",
        "Keyboard/KeyPop/*.swift"
    ],
    "resources": "Keyboard/Resources.xcassets",
    "frameworks": "UIKit",
    "requires_arc": true,
    "dependencies": {
        "Shadow": []
    }
}

Pin It on Pinterest

Share This