Giter VIP home page Giter VIP logo

zmaterialdesignuibutton's Introduction

ZMaterialDesignUIButton

Swift Animated Material Design UIButton

This Swift UIButton was made inspired in Google new Material Design, and this GIF :]


[![ZMaterialButton](http://img.youtube.com/vi/LApnUpnI094/0.jpg)](http://www.youtube.com/watch?v=LApnUpnI094)

**You need to add the ZMaterialButtonDelegate to your Controller:**
class ViewController: UIViewController, ZMaterialButtonDelegate {
}

**To create a Material UIButton init it with frame and set the Zdelegate, a .endPoint (CGPoint) and a .changeToImage (UIImage)**
let containerView = UIView(frame: CGRect(x: 0, y: 200, width: self.view.frame.size.width, height: self.view.frame.size.height-200))
containerView.clipsToBounds = true
self.view.addSubview(containerView)
        
self.button = ZMaterialButton(frame: CGRect(x: 10, y: 40, width: 100, height: 100))
self.button.setImage(UIImage(named: "play"), forState: UIControlState.Normal)
self.button.backgroundColor = UIColor(red:0.05, green:0.69, blue:0.79, alpha:1)
self.button.endPoint = CGPoint(x:self.view.center.x-50, y: self.view.center.y-50)
self.button.changeToImage = UIImage(named: "pause")
self.button.Zdelegate = self
containerView.addSubview(self.button)

**Add the delegate function ZMaterialButtonDidExpand() to your controller to know when the button expanded or reduced.**
```swift func ZMaterialButtonDidExpand(button: ZMaterialButton, expanded: Bool){ if expanded == true { self.testButtonExpanded() UIView.animateWithDuration(0.1, delay: 0, options: .CurveEaseOut, animations: { self.fButton.alpha = 1 self.bButton.alpha = 1 }, completion:nil) } else { self.testButtonReduced() UIView.animateWithDuration(0.2, delay: 0, options: .CurveEaseOut, animations: { self.fButton.alpha = 0 self.bButton.alpha = 0 }, completion:nil) } } ```

Hope you like it :]

Follow me on Twitter @richzertuche

zmaterialdesignuibutton's People

Contributors

richzertuche avatar

Watchers

Sobin George Thomas avatar James Cloos 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.