nghialv blog

practice makes perfect

MaterialKit

| Comments

Material design components (inspired by Google Material Design) for iOS written in Swift

Please feel free to make pull requests.

Github

Features

  • Highly customizable
  • Complete example
  • Supports @IBDesignable to live-render the component in the Interface Builder

  • By suporting @IBInspectable, the class properties can be exposed in the Interface Builder, and you can edit these properties in realtime

  • [x] MKButton: floating action button, raised button, flat button, ripple effect

  • [x] MKTextField: ripple effect, floating placeholder
  • [x] MKTableViewCell
  • [x] MKLabel
  • [x] MKImageView
  • [ ] MKTextView (In progress)
  • [ ] MKSwitch (In progress)
  • [ ] MKAlert (In progress)
  • [ ] MKActivityIndicator (In progress)
  • [x] MKLayer
  • [x] MKColor

Components

MKButton

  • There are 3 types of main buttons: Floating Action Button, Raised Button, Flat Button
  • Custommizable attributes: color, ripple location, animation timing function, animation duration…
1
2
3
4

let button = MKButton(frame: CGRect(x: 10, y: 10, width: 100, height: 35))
button.maskEnabled = true
button.rippleLocation = .TapLocation
button.rippleLayerColor = UIColor.MKColor.LightGreen

MKTextField

  • Single-line text field
  • Floating placeholder
  • Ripple Animation
  • Custommizable attributes: color, ripple location, bottom border, animation timing function, animation duration…
1
2
3
4
5

textField.rippleLocation = .Left
textField.floatingPlaceholderEnabled = true
textField.placeholder = "Description"
textField.layer.borderColor = UIColor.MKColor.Green.CGColor
textField.rippleLayerColor = UIColor.MKColor.LightGreen

MKTableViewCell

  • Custommizable attributes: color, ripple location, animation timing function, animation duration…
1
2
3

var cell = tableView.dequeueReusableCellWithIdentifier("MyCell") as MyCell
cell.rippleLocation = .Center
cell.rippleLayerColor = UIColor.MKColor.Blue

MKLabel, MKImageView (BarButtonItem)

  • Custommizable attributes: color, ripple location, animation timing function, animation duration…

  • Play ripple animation whenever you want by calling animateRipple method or by setting userInteractionEnabled = true ripple animation will be played when the label/imageview is tapped

  • Easy to customize UIBarButtonItem or UITabBarButton by using MKLabel or MKImageView

1
2
3
4
5
6
7
8

// customize UIBarButtonItem by using MKImageView
let imgView = MKImageView(frame: CGRect(x: 0, y: 0, width: 44, height: 32))
imgView.image = UIImage(named: "uibaritem_icon.png")
imgView.rippleLocation = .Center
imgView.userInteractionEnabled = true

let rightBarButton = UIBarButtonItem(customView: imgView)
self.navigationItem.rightBarButtonItem = rightBarButton

MKProgressView (Coming Soon)

MKLayer

A subclass of CALayer.

MKColor

A category for UIColor that adds some methods to get flat colors designed by Google

1
2

// get color from UIColor
let lightBlueColor = UIColor.MKColor.LightBlue

TODO

  • [x] pod file

Installation

  • Installation with CocoaPods
1

pod 'MaterialKit'
  • Copying all the files into your project
  • Using submodule

Requirements

  • iOS 7.0+
  • Xcode 6.1

License

MaterialKit is released under the MIT license. See LICENSE for details.

Comments