MaterialComponents 45.0.0

MaterialComponents 45.0.0

TestsTested
LangLanguage Obj-CObjective C
License Apache 2
ReleasedLast Release Feb 2018

Maintained by Jeff Verkoeyen, Adrian Secord, Randall Li, Ian Gordon, Justin Shephard, Sam Morrison.


Downloads

Total338,612
Week0
Month41,498

Installs

Apps6,327
Pod Tries4,040
Test Targets329
Watch Apps2
powered by Segment

GitHub

Stars1,577
Watchers90
Forks198
Issues361
Contributors62
Pull Requests8

Code

Files410
LOCLines of Code 32,791


  • By
  • The Material Components authors.

Material Components for iOS

Build Status
Code coverage
Chat

Material Components for iOS (MDC-iOS) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional iOS apps. Learn more about how Material Components for iOS supports design and usability best practices across platforms in the Material Design Platform Adaptation guidelines.

Material Components for iOS are written in Objective-C and support Swift and Interface Builder.

Useful Links

Trying out Material Components

Our catalog showcases Material Components. You can use the pod try command from anywhere on your machine to try the components, even if you haven't checked out the repo yet:

pod try MaterialComponents

In case you have already checked out the repo, run the following command:

pod install --project-directory=catalog/

If you want to take a look at the implementation of the components, you can find the code inside the Development Pods folder.
Use cmd-1 to open the project navigator within Xcode. Peal open the Pods project and inside the Development Pods folder you will find the component source code.

Installation

Getting Started with a New Project

Check out our tutorial for a step-by-step guide to setting up a new project using Material Components.

Adding Material Components to an Existing Project

CocoaPods is the easiest way to get started (if you're new to CocoaPods,
check out their getting started documentation.)

To install CocoaPods, run the following commands:

sudo gem install cocoapods

To integrate Material Components in your existing application, first create a new Podfile:

cd your-project-directory
pod init

Next, add the
Material Components for iOS pod
to your target in your Podfile:

target "MyApp" do
  ...
  pod 'MaterialComponents'
end

If you are using Swift, don’t forget to uncomment the use_frameworks! line
at the top of your Podfile.

Then run the command:

pod install

Now you're ready to get started in Xcode. Don't forget to open the workspace Cocoapods created for you instead of the original project:

open your-project.xcworkspace

Usage

The components are built upon familiar UIKit classes and can be added to a view with just a couple of lines. Simply import the Material Components header for the component you're interested in, and add it to your view.

Swift

import MaterialComponents.MaterialButtons

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let raiseButton = MDCRaisedButton()
        raiseButton.setTitle("Raised Button", for: .normal)
        raiseButton.sizeToFit()
        raiseButton.addTarget(self, action: #selector(tapped), for: .touchUpInside)
        view.addSubview(raiseButton)
    }

    @objc func tapped(sender: UIButton){
        print("Button was tapped!")
    }

}

Objective-C

#import "MaterialButtons.h"

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  MDCRaisedButton *raisedButton = [[MDCRaisedButton alloc] init];
  [raisedButton setTitle:@"Raised Button" forState:UIControlStateNormal];
  [raisedButton sizeToFit];
  [raisedButton addTarget:self
                   action:@selector(tapped:)
         forControlEvents:UIControlEventTouchUpInside];

  [self.view addSubview:raisedButton];
}

- (void)tapped:(id)sender {
  NSLog(@"Button was tapped!");
}

@end

Attributions

Material Components for iOS uses
Material Design icons,
copyright Google Inc. and licensed under
CC BY 4.0.

Several components use
MDFTextAccessibility,
copyright Google Inc. and licensed under
Apache 2.0
without a NOTICE file.

MDCCatalog uses the
Roboto font,
copyright 2011 Google Inc. and licensed under
Apache 2.0
without a NOTICE file.