Material design components for iOS written in Swift

Related tags

UI MaterialKit
Overview

MaterialKit

Platform Language License Issues

NOTE: This project is unmaintained.

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

Please feel free to make pull requests.

Features

  • Highly customizable

  • Complete example

  • 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 realtime

  • 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.rippleLocation = .TapLocation
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.rippleLocation = .Left
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.rippleLocation = .Center
cell.rippleLayerColor = UIColor.MKColor.Blue

MKRefreshControl

  • Customizable attributes: color, height
var refreshControl = MKRefreshControl()
refreshControl.addToScrollView(self.tableView, withRefreshBlock: { () -> Void in
	self.tableViewRefresh()
})
refreshControl.beginRefreshing()

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/imageview 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.rippleLocation = .Center
imgView.userInteractionEnabled = true

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

MKLayer

A subclass of CALayer.

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

  • Installation with CocoaPods
	pod 'MaterialKit', '~> 0.4'
  • Copying all the files into your project
  • Using submodule

Requirements

  • iOS 8.0+
  • Xcode 6.1

License

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

Comments
  • Support for Swift 2.0 ?

    Support for Swift 2.0 ?

    After I installed this MaterialKit using pod, it doesn't seem to support Swift 2.0. I was wondering if this is true or something is wrong with my settings. Thanks

    opened by rcholic 4
  • Update Swift Syntax to 2.0

    Update Swift Syntax to 2.0

    At the very least there needs to be a branch that we can point our podfiles at.

    A pull request with the needed changes: https://github.com/nghialv/MaterialKit/pull/39.

    Here is a branch others can use until this change is made: https://github.com/reesemclean/MaterialKit/tree/swift_2

    pod "MaterialKit", :git => "https://github.com/reesemclean/MaterialKit", :branch => "swift_2"
    opened by reesemclean 4
  • Converting MKTextField to a string

    Converting MKTextField to a string

    I'm still new to swift so this may be an easy answer.

    Is there a way to convert an MKTextField into a string? I'm using alamofire to create HTTP requests for login, however it doesn't support MKTextFields.

    opened by craigpearce5 4
  • I can only get a square ripple

    I can only get a square ripple

    image

    I can not get a circle ripple in my project! I just change the "custom class" to MKTableViewCell in the storyboard and it can only perform a square ripple. Same issues in TextField.

    But if i copy one from your storyboard directly, it works.

    opened by Huxpro 4
  • Error on buid

    Error on buid

    Hey guys! i'm getting this error on build time :

    MKTableViewCell.swift:54:48: Use of undeclared type 'Set'

    override public func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {

    I'm pretty new to swift, so any help would be much appreciated :+1:

    opened by olivierto 3
  • Xcode 6.3 beta 2 (and beta 3)

    Xcode 6.3 beta 2 (and beta 3)

    in the Classes MKimageView.swift MKLayer.swift MKTableViewCell.swift

    The following lines of code appear

    • override public func touchesBegan(touches: NSSet, withEvent event: UIEvent) { super.touchesBegan(touches, withEvent: event)
    •    if let firstTouch = touches.anyObject() as? UITouch {

    Which will need to be changed to the following in order to compile in the beta.

    • override public func touchesBegan(touches: Set, withEvent event: UIEvent) { super.touchesBegan(touches, withEvent: event) + if let firstTouch = touches.first as? UITouch {

    I am merely advising this course of action and thought it would save you some time and trouble.

    opened by Alexanderrgonzales77 3
  • Added CardView, ActivityIndicator, NavigationBar, RefreshControl

    Added CardView, ActivityIndicator, NavigationBar, RefreshControl

    • Changed ripple to match google apps
    • Added elevation and corner properties to views
    • Added MKCardView
    • Added MKActivityView
    • Added MKNavigationBar
    • Fixed Sample app to reflect new elements
    • Added MKRefreshControl
    opened by rahuliyer95 2
  • Removed Deprecation warnings, Added Delegations and more

    Removed Deprecation warnings, Added Delegations and more

    Removed Deprecation warnings. Modified the TextFieldViewController.swift, so that whenever the users taps on the empty space, the keyboard hides itself. In that way, the user can test out other textFields as well.

    opened by MHaroonBaig 2
  • Update Cocoapods

    Update Cocoapods

    Please create a new tag and push it to trunk so one can use the current version (Swift 2 compatibility) without specifying :head in the Podfile, thanks :+1:

    opened by elsesiy 1
  • Add removeAllAnimations() function to MKLayer.

    Add removeAllAnimations() function to MKLayer.

    I have added a removeAllAnimations() function to MKLayer which removes animations for the circle layer and background layer.

    This is particularly useful in prepareForReuse() on MKTableViewCell so that previous animations do not show on scroll.

    I added cells to the table view example in order to show this behavior.

    opened by reesemclean 1
  • MKLayer should have a way to cancel animations.

    MKLayer should have a way to cancel animations.

    When using MKLayer in a table view cell or collection view cell, on reuse an animation could still be in progress. We need a way to cancel any in progress animations.

    opened by reesemclean 1
  • RIght alignment of text

    RIght alignment of text

    When I am right aligning the textfield text become right aligned but placeholder isn't and sometime placeholder enter into right side and only some texts are visible

    opened by Anupamlal 0
  • Update to Swift 3~5 (Xcode 8~11.2.1) + Resolve memory leaks + SPM support

    Update to Swift 3~5 (Xcode 8~11.2.1) + Resolve memory leaks + SPM support

    Since the repo is no longer maintained, use this in your Podfile instead:

    pod 'MaterialKit', :git => 'https://github.com/ApolloZhu/MaterialKit.git'

    or in your Package.swift:

    .package(url: "https://github.com/ApolloZhu/MaterialKit.git",
         .upToNextMinor(from: "0.6.6")),

    This version is compatible, theoretically, with any version from Swift 3 to 5 (solve #63 and #72)

    This implementation also removed the strong reference cycles (which are causing memory leaks).

    I'm aware of this issue a long time ago, but had no idea why just declaring superLayer as weak causes unexpected crashes. Thanks to @theMeatloaf for his solutions in Swift 2, we only need to manually remove the observers by calling recycle method of MKLayer and MKRefreshControl if a class owns such properties directly. I can't figure out a way for us to automatically remove the observers, especially when the time deinit of MKLayer gets called, superLayer is already nil. Therefore, if you have a better solution, please definitely help.

    And yes, in addition to MKLayer and all other classes that has a property of type MKLayer, MKRefreshControl has strong reference loop and observer not removed, and MKSwitch has a strong reference loop, too.

    opened by ApolloZhu 0
Releases(0.4)
Owner
Le Van Nghia
Software Engineer. Lover of OSS. Creator of PipeCD, Promviz, LotusLoad, Hakuba, MaterialKit... 🐳
Le Van Nghia
GitHub
A Material Design drop down for iOS

A Material Design drop down for iOS written in Swift. Demo Do pod try DropDown in your console and run the project to try a demo. To install CocoaPods

AssistoLab 2.3k Dec 20, 2022
Blobmorphism is a brand new design language I've created to break free of the material overload in iOS, built in SwiftUI. Everything feels smooth and fluid.

Blobmorphism is a brand new design language I've created to break free of the material overload in iOS, built in SwiftUI. Everything feels smooth and fluid.

Ethan Lipnik 89 Nov 29, 2022
A Swift material design UI module which paints over the parent view when the switch is on.

:octocat: ?? RAMPaperSwitch is a Swift material design UI module which paints over the parent view when the switch is turned on. iOS library by @Ramotion

Ramotion 2.9k Dec 29, 2022
Material, a UI/UX framework for creating beautiful iOS applications

Material Welcome to Material, a UI/UX framework for creating beautiful applications. Material's animation system has been completely reworked to take

Cosmicmind 12k Jan 2, 2023
💾 A collection of classic-style UI components for iOS

A collection of classic-style UI components for UIKit, influenced by Windows 95 Introduction This is a little exploration into applying '90s-era desig

Blake Tsuzaki 2.2k Dec 22, 2022
It provides UI components such as popover, popup, dialog supporting iOS apps

Overview LCUIComponents is an on-going project, which supports creating transient views appearing above other content onscreen when a control is selec

Linh Chu 7 Apr 8, 2020
Swift Package for distributing Mozilla's Rust-based application components

Swift Package for Mozilla's Rust Components This repository is a Swift Package for distributing releases of Mozilla's various Rust-based application c

Mozilla 19 Dec 30, 2022
Spinner loader components with liquid animation

LiquidLoader LiquidLoader is the spinner loader UI components with liquid animation, inspired by Spinner Loader - Gooey light Effect [] (https://githu

Takuma Yoshida 1.3k Dec 21, 2022
SwiftUI: Components Library Inspired by Twitter's Bootstrap

bootswiftui SwiftUI: Components Library Inspired by Twitter's Bootstrap Warning This is just SwiftUI exercise. Please do not consider using this repo

Robert Sandru 1 Oct 27, 2022
A few drop-in SwiftUI components for easily importing and thumb-nailing files

FilesUI A few drop-in SwiftUI components for easily importing and thumb-nailing files Usage 1. Import Files To import files you can use the FileImport

Brianna Zamora 3 Oct 19, 2022
NotSwiftUI is designed to help you create UI components quickly and efficiently with code!

NotSwiftUI NotSwiftUI is designed to help you create UI components quickly and efficiently with code! Capitalizing on the idea that most of the UI ele

Jonathan G. 50 Dec 20, 2022
A paging scroll view for SwiftUI, using internal SwiftUI components

PagingView A paging scroll view for SwiftUI, using internal SwiftUI components. This is basically the same as TabView in the paging mode with the inde

Eric Lewis 18 Dec 25, 2022
SwiftUI components and extensions that seem to be highly reusable

SwiftUI components and extensions that seem to be highly reusable

Yusuke Hosonuma 56 Dec 15, 2022
Protocol oriented, type safe, scalable design system foundation swift framework for iOS.

Doric: Design System Foundation Design System foundation written in Swift. Protocol oriented, type safe, scalable framework for iOS. Features Requirem

Jay 93 Dec 6, 2022
Electronic Design in Swithft

Edith Electronic design in Swithft Serendipitously, the first woman to be professionally employed as an electrical engineer in the United States was a

CIRCT 37 Nov 3, 2021
A message bar for iOS written in Swift.

Dodo, a message bar for iOS / Swift This is a UI widget for showing text messages in iOS apps. It is useful for showing short messages to the user, so

Evgenii Neumerzhitckii 874 Dec 13, 2022
An easy to use FAQ view for iOS written in Swift

FAQView An easy to use FAQ view for iOS written in Swift. This view is a subclass of UIView. Setup with CocoaPods If you are using CocoaPods add this

Mukesh Thawani 467 Dec 5, 2022
An easy to use FAQ view for iOS written in Swift

FAQView An easy to use FAQ view for iOS written in Swift. This view is a subclass of UIView. Setup with CocoaPods If you are using CocoaPods add this

Mukesh Thawani 466 Nov 9, 2021
🏞 A simple iOS photo and video browser with optional grid view, captions and selections written in Swift5.0

Introduction ?? MediaBrowser can display one or more images or videos by providing either UIImage objects, PHAsset objects, or URLs to library assets,

Kyle Yi 631 Dec 29, 2022