material-components
diff --git a/‎MaterialComponents.podspec‎
Lines changed: 12 additions & 0 deletions b/‎MaterialComponents.podspec‎
Lines changed: 12 additions & 0 deletions
diff --git a/‎catalog/MDCCatalog/MDCCatalogTileView.swift‎
Lines changed: 2 additions & 0 deletions b/‎catalog/MDCCatalog/MDCCatalogTileView.swift‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎catalog/MDCCatalog/MDCCatalogTiles.h‎
Lines changed: 1 addition & 0 deletions b/‎catalog/MDCCatalog/MDCCatalogTiles.h‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎catalog/MDCCatalog/MDCCatalogTiles.m‎
Lines changed: 161 additions & 0 deletions b/‎catalog/MDCCatalog/MDCCatalogTiles.m‎
Lines changed: 161 additions & 0 deletions
diff --git a/‎catalog/Podfile.lock‎
Lines changed: 6 additions & 0 deletions b/‎catalog/Podfile.lock‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎components/README.md‎
Lines changed: 5 additions & 0 deletions b/‎components/README.md‎
Lines changed: 5 additions & 0 deletions
diff --git a/‎components/Tabs/README.md‎
Lines changed: 132 additions & 0 deletions b/‎components/Tabs/README.md‎
Lines changed: 132 additions & 0 deletions
diff --git a/‎components/Tabs/docs/assets/tabs.mp4‎
630 KB b/‎components/Tabs/docs/assets/tabs.mp4‎
630 KB
diff --git a/‎components/Tabs/docs/assets/tabs.png‎
40.5 KB b/‎components/Tabs/docs/assets/tabs.png‎
40.5 KB
@@ -244,6 +244,18 @@ Pod::Spec.new do |s|
     ss.dependency "MaterialComponents/private/Overlay"
   end
 
+  s.subspec "Tabs" do |ss|
+    ss.ios.deployment_target = '7.0'
+    ss.public_header_files = "components/#{ss.base_name}/src/*.h"
+    ss.source_files = "components/#{ss.base_name}/src/*.{h,m}", "components/#{ss.base_name}/src/private/*.{h,m}"
+    ss.resources = ["components/#{ss.base_name}/src/Material#{ss.base_name}.bundle"]
+
+    ss.dependency "MaterialComponents/AnimationTiming"
+    ss.dependency "MaterialComponents/Ink"
+    ss.dependency "MaterialComponents/Typography"
+    ss.dependency "MaterialComponents/private/RTL"
+  end
+
   s.subspec "Typography" do |ss|
     ss.ios.deployment_target = '7.0'
     ss.public_header_files = "components/#{ss.base_name}/src/*.h"
 
@@ -117,6 +117,8 @@ class MDCCatalogTileView: UIView {
       newImage = MDCDrawImage(defaultSize, MDCCatalogDrawSnackbarTile)
     case "Switch":
       newImage = MDCDrawImage(defaultSize, MDCCatalogDrawSwitchTile)
+    case "Tab Bar":
+      newImage = MDCDrawImage(defaultSize, MDCCatalogDrawTabsTile)
     case "Typography and Fonts":
       newImage = MDCDrawImage(defaultSize, MDCCatalogDrawTypographyTile)
     default:
 
@@ -45,4 +45,5 @@ void MDCCatalogDrawShadowLayerTile(CGRect frame);
 void MDCCatalogDrawSliderTile(CGRect frame);
 void MDCCatalogDrawSnackbarTile(CGRect frame);
 void MDCCatalogDrawSwitchTile(CGRect frame);
+void MDCCatalogDrawTabsTile(CGRect frame);
 void MDCCatalogDrawTypographyTile(CGRect frame);
@@ -3930,6 +3930,167 @@ void MDCCatalogDrawSwitchTile(CGRect frame) {
   [ovalPath fill];
 }
 
+void MDCCatalogDrawTabsTile(CGRect frame) {
+  CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
+  CGContextRef context = UIGraphicsGetCurrentContext();
+
+  UIColor* gradientColor = [UIColor colorWithRed:0.075 green:0.592 blue:0.945 alpha:0.1];
+  UIColor* fillColor = [UIColor colorWithRed:0.012 green:0.663 blue:0.957 alpha:1];
+  UIColor* fillColor2 = [UIColor colorWithRed:1 green:1 blue:1 alpha:1];
+
+  CGFloat gradientLocations[] = {0, 0.86, 1};
+  CGGradientRef gradient = CGGradientCreateWithColors(
+      colorSpace,
+      (__bridge CFArrayRef)
+          @[ (id)fillColor.CGColor, (id)gradientColor.CGColor, (id)gradientColor.CGColor ],
+      gradientLocations);
+
+  NSShadow* shadow = [[NSShadow alloc] init];
+  [shadow
+      setShadowColor:[fillColor colorWithAlphaComponent:CGColorGetAlpha(fillColor.CGColor) * 0.44]];
+  [shadow setShadowOffset:CGSizeMake(1.1, -0.1)];
+  [shadow setShadowBlurRadius:5];
+
+  CGRect tabsGroup = CGRectMake(CGRectGetMinX(frame) + 24, CGRectGetMinY(frame) + 24.1,
+                                floor((CGRectGetWidth(frame) - 24) * 0.85366 + 0.5),
+                                floor((CGRectGetHeight(frame) - 24.1) * 0.67227 + 23.7) - 23.2);
+
+  CGContextSaveGState(context);
+  CGContextBeginTransparencyLayer(context, NULL);
+
+  UIBezierPath* clip2Path = [UIBezierPath
+      bezierPathWithRect:CGRectMake(CGRectGetMinX(tabsGroup) +
+                                        floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                                    CGRectGetMinY(tabsGroup) +
+                                        floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5),
+                                    floor(CGRectGetWidth(tabsGroup) * 1.00000 + 0.5) -
+                                        floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                                    floor(CGRectGetHeight(tabsGroup) * 1.00000 + 0.5) -
+                                        floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5))];
+  [clip2Path addClip];
+
+  CGContextSaveGState(context);
+  CGContextSetAlpha(context, 0.1);
+  CGContextBeginTransparencyLayer(context, NULL);
+
+  UIBezierPath* clipPath = [UIBezierPath
+      bezierPathWithRect:CGRectMake(CGRectGetMinX(tabsGroup) +
+                                        floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                                    CGRectGetMinY(tabsGroup) +
+                                        floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5),
+                                    floor(CGRectGetWidth(tabsGroup) * 1.00000 + 0.5) -
+                                        floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                                    floor(CGRectGetHeight(tabsGroup) * 1.00000 + 0.5) -
+                                        floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5))];
+  [clipPath addClip];
+
+  CGRect rectangleRect =
+      CGRectMake(CGRectGetMinX(tabsGroup) + floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                 CGRectGetMinY(tabsGroup) + floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5),
+                 floor(CGRectGetWidth(tabsGroup) * 1.00000 + 0.5) -
+                     floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                 floor(CGRectGetHeight(tabsGroup) * 1.00000 + 0.5) -
+                     floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5));
+  UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect:rectangleRect];
+  CGContextSaveGState(context);
+  [rectanglePath addClip];
+  CGContextDrawLinearGradient(
+      context, gradient,
+      CGPointMake(CGRectGetMidX(rectangleRect) + 0 * CGRectGetWidth(rectangleRect) / 140,
+                  CGRectGetMidY(rectangleRect) + 18.17 * CGRectGetHeight(rectangleRect) / 88),
+      CGPointMake(CGRectGetMidX(rectangleRect) + 0 * CGRectGetWidth(rectangleRect) / 140,
+                  CGRectGetMidY(rectangleRect) + 41.79 * CGRectGetHeight(rectangleRect) / 88),
+      kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
+  CGContextRestoreGState(context);
+
+  CGContextEndTransparencyLayer(context);
+  CGContextRestoreGState(context);
+  UIBezierPath* tabBarBackgroundRectanglePath = [UIBezierPath
+      bezierPathWithRect:CGRectMake(CGRectGetMinX(tabsGroup) +
+                                        floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                                    CGRectGetMinY(tabsGroup) +
+                                        floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5),
+                                    floor(CGRectGetWidth(tabsGroup) * 1.00000 + 0.5) -
+                                        floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                                    floor(CGRectGetHeight(tabsGroup) * 0.68182 + 0.5) -
+                                        floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5))];
+  [fillColor setFill];
+  [tabBarBackgroundRectanglePath fill];
+
+  UIBezierPath* selectedRectanglePath = [UIBezierPath
+      bezierPathWithRect:CGRectMake(CGRectGetMinX(tabsGroup) +
+                                        floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
+                                    CGRectGetMinY(tabsGroup) +
+                                        floor(CGRectGetHeight(tabsGroup) * 0.63636 + 0.5),
+                                    floor(CGRectGetWidth(tabsGroup) * 0.33857 + 0.1) -
+                                        floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5) + 0.4,
+                                    floor(CGRectGetHeight(tabsGroup) * 0.68182 + 0.5) -
+                                        floor(CGRectGetHeight(tabsGroup) * 0.63636 + 0.5))];
+  CGContextSaveGState(context);
+  CGContextSetShadowWithColor(context, shadow.shadowOffset, shadow.shadowBlurRadius,
+                              [shadow.shadowColor CGColor]);
+  [fillColor2 setFill];
+  [selectedRectanglePath fill];
+  CGContextRestoreGState(context);
+
+  UIBezierPath* hamburgerBezierPath = [UIBezierPath bezierPath];
+  [hamburgerBezierPath
+      moveToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                              CGRectGetMinY(tabsGroup) + 0.13384 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.13384 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.12122 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.12122 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.13384 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath closePath];
+  [hamburgerBezierPath
+      moveToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                              CGRectGetMinY(tabsGroup) + 0.16541 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.16541 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.15278 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.15278 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.16541 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath closePath];
+  [hamburgerBezierPath
+      moveToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                              CGRectGetMinY(tabsGroup) + 0.19697 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.19697 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.18434 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.18434 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath
+      addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
+                                 CGRectGetMinY(tabsGroup) + 0.19697 * CGRectGetHeight(tabsGroup))];
+  [hamburgerBezierPath closePath];
+  [fillColor2 setFill];
+  [hamburgerBezierPath fill];
+
+  CGContextEndTransparencyLayer(context);
+  CGContextRestoreGState(context);
+  CGGradientRelease(gradient);
+  CGColorSpaceRelease(colorSpace);
+}
+
 void MDCCatalogDrawTypographyTile(CGRect frame) {
   UIColor* fillColor = [UIColor colorWithRed:0.077 green:0.591 blue:0.945 alpha:1];
 
 
@@ -25,6 +25,7 @@ PODS:
     - MaterialComponents/ShadowLayer (= 20.1.0)
     - MaterialComponents/Slider (= 20.1.0)
     - MaterialComponents/Snackbar (= 20.1.0)
+    - MaterialComponents/Tabs (= 20.1.0)
     - MaterialComponents/Typography (= 20.1.0)
   - MaterialComponents/ActivityIndicator (20.1.0):
     - MaterialComponents/private/Application
@@ -145,6 +146,11 @@ PODS:
     - MaterialComponents/private/KeyboardWatcher
     - MaterialComponents/private/Overlay
     - MaterialComponents/Typography
+  - MaterialComponents/Tabs (20.1.0):
+    - MaterialComponents/AnimationTiming
+    - MaterialComponents/Ink
+    - MaterialComponents/private/RTL
+    - MaterialComponents/Typography
   - MaterialComponents/Typography (20.1.0)
   - MaterialComponentsCatalog (20.1.0):
     - MaterialComponents
 
@@ -124,6 +124,11 @@ Material Components for iOS are written in Objective-C and support Swift and Int
   ](Switch/)
   <!--{: .icon-switch }-->
 
+- [**Tabs**
+  A material tab bar for switching between grouped content.
+  ](Tabs/)
+  <!--{: .icon-tabs }-->
+
 - [**Typography**
   Text styles for Material fonts and opacities.
   ](Typography/)
 
@@ -0,0 +1,132 @@
+<!--{% if site.link_to_site == "true" %}-->
+See <a href="https://material-ext.appspot.com/mdc-ios-preview/components/Tabs/">MDC site documentation</a> for richer experience.
+<!--{% else %}See <a href="https://github.com/google/material-components-ios/tree/develop/components/Tabs">GitHub</a> for README documentation.{% endif %}-->
+
+# Tabs
+
+<div class="ios-animation right" markdown="1">
+  <video src="docs/assets/tab_bar.mp4" autoplay loop></video>
+  [![Tab Bar](docs/assets/tab_bar.png)](docs/assets/tab_bar.mp4)
+</div>
+
+Tabs are bars of buttons used to navigate between groups of content.
+<!--{: .intro :}-->
+
+### Material Design Specifications
+
+<ul class="icon-list">
+  <li class="icon-link">
+    <a href="https://material.google.com/components/tabs.html">
+      Tabs
+    </a>
+  </li>
+</ul>
+
+- - -
+
+## Installation
+
+### Requirements
+
+- Xcode 7.0 or higher.
+- iOS SDK version 9.0 or higher.
+
+### Installation with CocoaPods
+
+To add this component to your Xcode project using CocoaPods, add the
+following to your `Podfile`:
+
+~~~
+pod 'MaterialComponents/Tabs'
+~~~
+
+Then, run the following command:
+
+~~~ bash
+pod install
+~~~
+
+- - -
+
+## Overview
+
+When a user taps a tab, the content should change to match the selected subject in the tabs. This is similar to a UITabBarViewController's behavior. But unlike a UITabBarViewController, tabs does not provide an interface for switching the views or view controllers. There is no array of view controllers like UITabBarViewController's array of view controllers.
+
+Rather, the tabs report to their delegate when there is a tab selection. The delegate can then handle the changing of views.
+
+Tabs can also show a badge (usually a number) like UITabBar.
+
+- - -
+
+## Usage
+
+### Importing
+
+To use the tab bar in your code, import the MaterialTabs umbrella header (Objective-C) or MaterialComponents module (Swift).
+
+<!--<div class="material-code-render" markdown="1">-->
+#### Objective-C
+
+~~~ objc
+#import "MaterialTabs.h"
+~~~
+
+#### Swift
+~~~ swift
+import MaterialComponents
+~~~
+<!--</div>-->
+
+### Delegate
+
+Conform your class to the MDCTabBarDelegate protocol and set it as the tab bar's delegate to handle updating the UI when the user selects a tab. 
+
+### Selected item
+
+Update the selected tab programmatically by setting `selectedItem`, optionally with an animation. Delegate methods are not called for programmatic changes, so callers are responsible for updating UI as needed after updating the selected item.
+
+### Appearance
+
+Set the `itemAppearance` property on the tab bar to switch between item display modes. Items can be displayed as titles (the default), icons, or combined.
+
+### Styling
+
+By default, the tab bar is configured to display items with white text and icons. To customize the color of the tab bar, set the `tintColor`, `selectedItemTintColor`, `unselectedItemTintColor`, `inkColor`, and `barTintColor` properties. If `selectedItemTintColor` is nil, the tab bar's `tintColor` will be used automatically for selected items.
+
+Configure where items are placed in the tab bar by setting the `alignment` property.
+
+- - -
+
+## Example
+
+### Creating a tab bar
+
+<!--<div class="material-code-render" markdown="1">-->
+#### Objective-C
+
+~~~ objc
+MDCTabBar *tabBar = [[MDCTabBar alloc] initWitFrame:self.view.bounds];
+tabBar.items = @[
+    [[UITabBarItem alloc] initWithTitle:@"Recents" image:[UIImage imageNamed:@"phone"] tag:0],
+    [[UITabBarItem alloc] initWithTitle:@"Favorites" image:[UIImage imageNamed:@"heart"] tag:0],
+];
+tabBar.itemAppearance = MDCTabBarItemAppearanceTitledImages;
+tabBar.autoresizingMask =
+    UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
+[tabBar sizeToFit];
+[self.view addSubview:tabBar];
+~~~
+
+#### Swift
+~~~ swift
+let tabBar = MDCTabBar(frame: view.bounds)
+tabBar.items = [
+    UITabBarItem(title: "Recents", image: UIImage(named: "phone"), tag: 0),
+    UITabBarItem(title: "Favorites", image: UIImage(named: "heart"), tag: 0),
+]
+tabBar.itemAppearance = .titledImages
+tabBar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
+tabBar.sizeToFit()
+view.addSubview(tabBar)
+~~~
+<!--</div>-->