Giter Club home page Giter Club logo

materialkit's Introduction

MaterialKit

Release Platform Language License Issues Up Stream Issues

NOTE: The upstream project is no longer maintained.

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

Please feel free to make pull requests.

Features

  • Highly customizable

  • Complete examples

  • Supports @IBDesignable to live-render the component in the Interface Builder

  • By supporting @IBInspectable, the class properties can be exposed in the Interface Builder, and you can edit these properties in real time.

  • MKButton: floating action button, raised button, flat button, ripple effect

  • MKTextField: ripple effect, floating placeholder

  • MKTableViewCell

  • MKLabel

  • MKImageView

  • MKLayer

  • MKColor

  • MKActivityIndicator

  • MKRefreshControl

  • MKNavigationBar

Components

MKButton

  • There are 3 types of main buttons: Floating Action Button, Raised Button, Flat Button
  • Customizable attributes: color, ripple location, animation timing function, animation duration...
let button = MKButton(frame: CGRect(x: 10, y: 10, width: 100, height: 35))
button.maskEnabled = true
button.rippleLayerColor = UIColor.MKColor.LightGreen

MKTextField

  • Single-line text field
  • Floating placeholder
  • Ripple Animation
  • Customizable attributes: color, ripple location, bottom border, animation timing function, animation duration...
textField.floatingPlaceholderEnabled = true
textField.placeholder = "Description"
textField.layer.borderColor = UIColor.MKColor.Green.CGColor
textField.rippleLayerColor = UIColor.MKColor.LightGreen

MKTableViewCell

  • Customizable attributes: color, ripple location, animation timing function, animation duration...
var cell = tableView.dequeueReusableCellWithIdentifier("MyCell") as MyCell
cell.rippleLayerColor = UIColor.MKColor.Blue

MKRefreshControl

  • Customizable attributes: color, height
var refreshControl = MKRefreshControl()
refreshControl.addToScrollView(tableView) { [weak self] in
	self?.tableViewRefresh()
}
refreshControl.beginRefreshing()

Important: because MKRefreshControl observes changes in contentOffset of the scrollView it is added to, before the scrollView is deinitialized, you must call recycle to remove the observer.

deinit {
	refreshControl.recycle()
}

MKImageView (BarButtonItem), MKActivityIndicator

  • Customizable 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/image view is tapped

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

// 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.userInteractionEnabled = true

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

MKLayer

A subclass of CALayer.

Important: because MKLayer observes changes in bounds and cornerRadius of the superLayer/View it is made from, before the superLayer/View is deinitialized, you must call recycle to remove the observers.

deinit {
	mkLayer.recycle()
}

MKColor

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

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

MKNavigationBar

A custom UINavigationBar which supports elevation and adding a tint above itself

  • Customizable attributes: color, dark color, elevation, shadow opacity, tint color...
  • Set the class of the navigation bar in the storyboard designer to MKNavigationBar and set the custom properties

MKSwitch

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

Installation

  • Install using CocoaPods
	pod 'MaterialKit', :git => 'https://github.com/ApolloZhu/MaterialKit.git'
  • Copying all the files into your project
  • Using submodule

Requirements

  • iOS 8.0+
  • Xcode 8.0+

License

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

materialkit's People

Contributors

apollozhu avatar countcain avatar evermeer avatar ken0nek avatar mharoonbaig avatar nghialv avatar rahuliyer95 avatar themeatloaf avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.