Skip to content
This repository was archived by the owner on Sep 27, 2022. It is now read-only.

Commit fd074fc

Browse files
brianjmoorewilllarche
authored andcommitted
[New Component] Tab component with MDCTabBar (material-components#1164)
* Initial implementation of MDCTabBar and private MDCItemBar (material-components#711) * Add initial headers for MDC*Bar * Initial chunk of work * It works…ish * Update demo images and update style with appearance * Update Podfile.lock * Merge * Merge * Revert bottom bar for now * Update description * Formatting and cleanup * Manual revert of mistaken changes * Manual revert of mistaken changes * Manual revert of mistaken changes * Update with consistent terminology * Update constant names * Update localizable strings * More naming updates * Rename TabBar to Tabs, move ItemBar into Tabs/private * Rename string keys * Rename string files from ItemBar to Tabs * Rename string keys header * Update podspec and move bundle * Reset Podfile.lock in preparation for re-updating * Clean update to Podfile.lock, adding MaterialTabs * Update import paths * Move CatalogByConvention method to end of file * Add copyright notice on all h/m files * Add safe fallbacks for switches * Use conventional common init method name * Podfile.lock checksum update * [Tabs] Initial README template and changes * [Tabs] Updating intro content. * [Tabs] Commenting out mention of bottom navigation bars in readme. * Initial implementation of MDCTabBar and private MDCItemBar (material-components#711) * Add initial headers for MDC*Bar * Initial chunk of work * It works…ish * Update demo images and update style with appearance * Update Podfile.lock * Merge * Merge * Revert bottom bar for now * Update description * Formatting and cleanup * Manual revert of mistaken changes * Manual revert of mistaken changes * Manual revert of mistaken changes * Update with consistent terminology * Update constant names * Update localizable strings * More naming updates * Rename TabBar to Tabs, move ItemBar into Tabs/private * Rename string keys * Rename string files from ItemBar to Tabs * Rename string keys header * Update podspec and move bundle * Reset Podfile.lock in preparation for re-updating * Clean update to Podfile.lock, adding MaterialTabs * Update import paths * Move CatalogByConvention method to end of file * Add copyright notice on all h/m files * Add safe fallbacks for switches * Use conventional common init method name * Podfile.lock checksum update * [Tabs] Initial README template and changes * [Tabs] Updating intro content. * [Tabs] Commenting out mention of bottom navigation bars in readme. * [Tabs] Correcting resources key in pod spec. * [Tabs] Correcting implementation of resources key in pod spec. * [Tabs] Removing duplicate entry in pod spec (cherry pick artifact.) * [Tabs] Overview written * [Tabs] Mentioning badges in overview. * [Tabs] Removing TODO in ready. * [Tabs] Duplicating tabs example in prep for splitting it into two. * [Tabs] Examples crudely split apart. * [Pods] Update of lock, catalog and tests for new version. * [Tabs] Refactored examples to be in style of supplemented examples. * [Tabs] Formatting. * [Tabs] Formatting. * [Tabs] Formatting. * Add usage examples * Add usage examples * Fix bad merge * Update import documentation * Small edits * Do not show badges for title-only tabs Also updates the text-only example to toggle upcasing rather than increment non-existent badges. * Update title-only documentation re: badges * Update README.md * Update Podfile.lock * Manually fix Podfile.lock * Feature tabs rebase from develop (#7) * [Docs] Add hero image to top-level README.md (material-components#1100) * Added hero image. * Added retina-sized hero image. * Add `srcset` image tag. * Flow image to the right. * Update README.md * Fixed srcset, duh. * Update README.md * Update README.md * Gave up on srcset+markdown for now. * Update README.md * Update README.md * Increased image size. * Remove redundant RTL frame adjustment (material-components#1103) * Made build/test scripts exit with failure if anything failed. (material-components#1088) * [ReadMes] - First image of each component is too big (material-components#1110) * MDC_#917 - Activity Indicator Readme Update * MDC_#917 - Updated remaining readme image links * MDC_#917 - Fixed typo * [Site] Removing unused files for and from generated doc site. (material-components#1108) * [ReadMes] - Updated asset name for collection_cells (material-components#1111) * Enable Travis CI integration (material-components#1095) * Add file to kick off Travis * Checking Travis CI's installed Xcode and simulator devices. * Adding Cocoapods init to Travis CI config. * Enabling building in Travis CI config. * Added temporary dumping of the log file on error. * Switched Shrine to manual signing. * Dump Travis code signing options. * Adding CocoaPods version to debug output. * Remove code signing reporting from Travis CI config. * Forcing `build_all` to skip code signing. * Switching Shrine back to automatic provisioning style. * Re-enabling testing in Travis CI. * Bump up verbosity of testing. * Changing test device from 10.2 to 10.1 to work around Travis CI bug. * Remove the printing of available devices, Xcode will print them out on error. * Added more context on failure for Travis CI builds only. * Re-enable CI for our normal branches. * Remove "do not merge" file. * Removing our development team and switching Catalog to automatic profiles. * Removing our development team and switching Bare to automatic profiles. * Removing our development team and switching Pesto to automatic profiles. * Add Travis CI build badge to README.md (material-components#1112) * Add uploading of testing code coverage results to codecov.io (material-components#1114) This won't do anything yet, but once we start emitting code coverage files it will. * Enable test code coverage reports in Xcode and in Travis CI. (material-components#1115) * Add codecov.io badge to README.md. (material-components#1116) * Add Codecov config to exclude uninteresting paths. (material-components#1118) * Extracts header code into method removing repetition (material-components#1119) * [AppBar] Header stack view in AppBarController (material-components#1121) Since the header stack view is going to be laid out with auto layout, it should be inited with a CGRectZero. Doing it with self.view.bounds creates a tiny loop since the view is not loaded yet. * Initial implementation of MDCTabBar and private MDCItemBar (material-components#711) * Add initial headers for MDC*Bar * Initial chunk of work * It works…ish * Update demo images and update style with appearance * Update Podfile.lock * Merge * Merge * Revert bottom bar for now * Update description * Formatting and cleanup * Manual revert of mistaken changes * Manual revert of mistaken changes * Manual revert of mistaken changes * Update with consistent terminology * Update constant names * Update localizable strings * More naming updates * Rename TabBar to Tabs, move ItemBar into Tabs/private * Rename string keys * Rename string files from ItemBar to Tabs * Rename string keys header * Update podspec and move bundle * Reset Podfile.lock in preparation for re-updating * Clean update to Podfile.lock, adding MaterialTabs * Update import paths * Move CatalogByConvention method to end of file * Add copyright notice on all h/m files * Add safe fallbacks for switches * Use conventional common init method name * Podfile.lock checksum update * Initial implementation of MDCTabBar and private MDCItemBar (material-components#711) * Add initial headers for MDC*Bar * Initial chunk of work * It works…ish * Update demo images and update style with appearance * Update Podfile.lock * Merge * Merge * Revert bottom bar for now * Update description * Formatting and cleanup * Manual revert of mistaken changes * Manual revert of mistaken changes * Manual revert of mistaken changes * Update with consistent terminology * Update constant names * Update localizable strings * More naming updates * Rename TabBar to Tabs, move ItemBar into Tabs/private * Rename string keys * Rename string files from ItemBar to Tabs * Rename string keys header * Update podspec and move bundle * Reset Podfile.lock in preparation for re-updating * Clean update to Podfile.lock, adding MaterialTabs * Update import paths * Move CatalogByConvention method to end of file * Add copyright notice on all h/m files * Add safe fallbacks for switches * Use conventional common init method name * Podfile.lock checksum update * [Tabs] Initial README template and changes * [Tabs] Updating intro content. * [Tabs] Commenting out mention of bottom navigation bars in readme. * [Tabs] Overview written * [Tabs] Correcting resources key in pod spec. * [Tabs] Correcting implementation of resources key in pod spec. * [Tabs] Mentioning badges in overview. * [Tabs] Removing TODO in ready. * [Tabs] Removing duplicate entry in pod spec (cherry pick artifact.) * [Tabs] Duplicating tabs example in prep for splitting it into two. * [Tabs] Examples crudely split apart. * [Pods] Update of lock, catalog and tests for new version. * [Tabs] Refactored examples to be in style of supplemented examples. * [Tabs] Formatting. * [Tabs] Formatting. * [Tabs] Formatting. * Add usage examples * Add usage examples * Update import documentation * Small edits * Do not show badges for title-only tabs Also updates the text-only example to toggle upcasing rather than increment non-existent badges. * Update title-only documentation re: badges * Update README.md * Update Podfile.lock * Manually fix Podfile.lock * [Tabs] Making delegate methods all optional. (#8) * [Tabs] Now that protocol has optional methods, putting in safety for the method calls. (#9) * [Tabs] Small changes for UIAppearance support. * [Tabs] Formatting examples. * [Tabs] Changed icon example to be an appBar’s bottomBar. * [Tabs] Styling of examples. * [Tabs] Example layout correction. * [Tabs] Example update. * [Tabs] Example has more ‘content’. * [Tabs] Removing unused delegate method in example. * [Tabs] Formatting of code for style. * [Tabs] Better unselected style choice in icon example. * [Tabs] More content in example vies. * [Tabs] iOS 8 support for icons example. * [Tabs] Still image. * [Tabs] Video added. * [Tabs] Renaming for clarity. * [Tabs] Correcting comment. * [Tabs] Better organization of example view creation methods. * [Tabs] Cleaning up imports in example. * [Tabs] Better code for incrementing badge in example. * [Tabs] Using local variable vs @Property in example * [Tabs] Example format correction. * [Tabs] Alphabetizing lists in examples. * [Tabs] Example code style improvement. * [Tab] Example NSAssert. Safety. * [Tabs] Comments and clarity in example. * [Tabs] clang-format in examples. * [Tabs] Text color correction in example. * [Tabs] Catalog tile. * [Tabs] clang-format in tile. * [Tabs] Adding IBOutlet for delegate (optional.) * [Tabs] Fix 32-bit build * [Tabs] Interface Builder example. * [Tabs] Beginning Swift example. * [Tabs] More swift example content. * [Tabs] Swift example complete * [Tabs] Swift example PR note implementations. * [Tabs] Swift formatting * [Tabs] Formatting in example * [Tabs] Formatting swift example. * [Tabs] Swift example clarity. * [Tabs] Example wrapping revert. * [Tabs] Example wrapping revert. * Fixes from review
1 parent 3ae0241 commit fd074fc

File tree

97 files changed

+4210
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+4210
-0
lines changed

MaterialComponents.podspec

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,18 @@ Pod::Spec.new do |s|
244244
ss.dependency "MaterialComponents/private/Overlay"
245245
end
246246

247+
s.subspec "Tabs" do |ss|
248+
ss.ios.deployment_target = '7.0'
249+
ss.public_header_files = "components/#{ss.base_name}/src/*.h"
250+
ss.source_files = "components/#{ss.base_name}/src/*.{h,m}", "components/#{ss.base_name}/src/private/*.{h,m}"
251+
ss.resources = ["components/#{ss.base_name}/src/Material#{ss.base_name}.bundle"]
252+
253+
ss.dependency "MaterialComponents/AnimationTiming"
254+
ss.dependency "MaterialComponents/Ink"
255+
ss.dependency "MaterialComponents/Typography"
256+
ss.dependency "MaterialComponents/private/RTL"
257+
end
258+
247259
s.subspec "Typography" do |ss|
248260
ss.ios.deployment_target = '7.0'
249261
ss.public_header_files = "components/#{ss.base_name}/src/*.h"

catalog/MDCCatalog/MDCCatalogTileView.swift

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,8 @@ class MDCCatalogTileView: UIView {
117117
newImage = MDCDrawImage(defaultSize, MDCCatalogDrawSnackbarTile)
118118
case "Switch":
119119
newImage = MDCDrawImage(defaultSize, MDCCatalogDrawSwitchTile)
120+
case "Tab Bar":
121+
newImage = MDCDrawImage(defaultSize, MDCCatalogDrawTabsTile)
120122
case "Typography and Fonts":
121123
newImage = MDCDrawImage(defaultSize, MDCCatalogDrawTypographyTile)
122124
default:

catalog/MDCCatalog/MDCCatalogTiles.h

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,4 +45,5 @@ void MDCCatalogDrawShadowLayerTile(CGRect frame);
4545
void MDCCatalogDrawSliderTile(CGRect frame);
4646
void MDCCatalogDrawSnackbarTile(CGRect frame);
4747
void MDCCatalogDrawSwitchTile(CGRect frame);
48+
void MDCCatalogDrawTabsTile(CGRect frame);
4849
void MDCCatalogDrawTypographyTile(CGRect frame);

catalog/MDCCatalog/MDCCatalogTiles.m

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3930,6 +3930,167 @@ void MDCCatalogDrawSwitchTile(CGRect frame) {
39303930
[ovalPath fill];
39313931
}
39323932

3933+
void MDCCatalogDrawTabsTile(CGRect frame) {
3934+
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
3935+
CGContextRef context = UIGraphicsGetCurrentContext();
3936+
3937+
UIColor* gradientColor = [UIColor colorWithRed:0.075 green:0.592 blue:0.945 alpha:0.1];
3938+
UIColor* fillColor = [UIColor colorWithRed:0.012 green:0.663 blue:0.957 alpha:1];
3939+
UIColor* fillColor2 = [UIColor colorWithRed:1 green:1 blue:1 alpha:1];
3940+
3941+
CGFloat gradientLocations[] = {0, 0.86, 1};
3942+
CGGradientRef gradient = CGGradientCreateWithColors(
3943+
colorSpace,
3944+
(__bridge CFArrayRef)
3945+
@[ (id)fillColor.CGColor, (id)gradientColor.CGColor, (id)gradientColor.CGColor ],
3946+
gradientLocations);
3947+
3948+
NSShadow* shadow = [[NSShadow alloc] init];
3949+
[shadow
3950+
setShadowColor:[fillColor colorWithAlphaComponent:CGColorGetAlpha(fillColor.CGColor) * 0.44]];
3951+
[shadow setShadowOffset:CGSizeMake(1.1, -0.1)];
3952+
[shadow setShadowBlurRadius:5];
3953+
3954+
CGRect tabsGroup = CGRectMake(CGRectGetMinX(frame) + 24, CGRectGetMinY(frame) + 24.1,
3955+
floor((CGRectGetWidth(frame) - 24) * 0.85366 + 0.5),
3956+
floor((CGRectGetHeight(frame) - 24.1) * 0.67227 + 23.7) - 23.2);
3957+
3958+
CGContextSaveGState(context);
3959+
CGContextBeginTransparencyLayer(context, NULL);
3960+
3961+
UIBezierPath* clip2Path = [UIBezierPath
3962+
bezierPathWithRect:CGRectMake(CGRectGetMinX(tabsGroup) +
3963+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
3964+
CGRectGetMinY(tabsGroup) +
3965+
floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5),
3966+
floor(CGRectGetWidth(tabsGroup) * 1.00000 + 0.5) -
3967+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
3968+
floor(CGRectGetHeight(tabsGroup) * 1.00000 + 0.5) -
3969+
floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5))];
3970+
[clip2Path addClip];
3971+
3972+
CGContextSaveGState(context);
3973+
CGContextSetAlpha(context, 0.1);
3974+
CGContextBeginTransparencyLayer(context, NULL);
3975+
3976+
UIBezierPath* clipPath = [UIBezierPath
3977+
bezierPathWithRect:CGRectMake(CGRectGetMinX(tabsGroup) +
3978+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
3979+
CGRectGetMinY(tabsGroup) +
3980+
floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5),
3981+
floor(CGRectGetWidth(tabsGroup) * 1.00000 + 0.5) -
3982+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
3983+
floor(CGRectGetHeight(tabsGroup) * 1.00000 + 0.5) -
3984+
floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5))];
3985+
[clipPath addClip];
3986+
3987+
CGRect rectangleRect =
3988+
CGRectMake(CGRectGetMinX(tabsGroup) + floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
3989+
CGRectGetMinY(tabsGroup) + floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5),
3990+
floor(CGRectGetWidth(tabsGroup) * 1.00000 + 0.5) -
3991+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
3992+
floor(CGRectGetHeight(tabsGroup) * 1.00000 + 0.5) -
3993+
floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5));
3994+
UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRect:rectangleRect];
3995+
CGContextSaveGState(context);
3996+
[rectanglePath addClip];
3997+
CGContextDrawLinearGradient(
3998+
context, gradient,
3999+
CGPointMake(CGRectGetMidX(rectangleRect) + 0 * CGRectGetWidth(rectangleRect) / 140,
4000+
CGRectGetMidY(rectangleRect) + 18.17 * CGRectGetHeight(rectangleRect) / 88),
4001+
CGPointMake(CGRectGetMidX(rectangleRect) + 0 * CGRectGetWidth(rectangleRect) / 140,
4002+
CGRectGetMidY(rectangleRect) + 41.79 * CGRectGetHeight(rectangleRect) / 88),
4003+
kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation);
4004+
CGContextRestoreGState(context);
4005+
4006+
CGContextEndTransparencyLayer(context);
4007+
CGContextRestoreGState(context);
4008+
UIBezierPath* tabBarBackgroundRectanglePath = [UIBezierPath
4009+
bezierPathWithRect:CGRectMake(CGRectGetMinX(tabsGroup) +
4010+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
4011+
CGRectGetMinY(tabsGroup) +
4012+
floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5),
4013+
floor(CGRectGetWidth(tabsGroup) * 1.00000 + 0.5) -
4014+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
4015+
floor(CGRectGetHeight(tabsGroup) * 0.68182 + 0.5) -
4016+
floor(CGRectGetHeight(tabsGroup) * 0.00000 + 0.5))];
4017+
[fillColor setFill];
4018+
[tabBarBackgroundRectanglePath fill];
4019+
4020+
UIBezierPath* selectedRectanglePath = [UIBezierPath
4021+
bezierPathWithRect:CGRectMake(CGRectGetMinX(tabsGroup) +
4022+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5),
4023+
CGRectGetMinY(tabsGroup) +
4024+
floor(CGRectGetHeight(tabsGroup) * 0.63636 + 0.5),
4025+
floor(CGRectGetWidth(tabsGroup) * 0.33857 + 0.1) -
4026+
floor(CGRectGetWidth(tabsGroup) * 0.00000 + 0.5) + 0.4,
4027+
floor(CGRectGetHeight(tabsGroup) * 0.68182 + 0.5) -
4028+
floor(CGRectGetHeight(tabsGroup) * 0.63636 + 0.5))];
4029+
CGContextSaveGState(context);
4030+
CGContextSetShadowWithColor(context, shadow.shadowOffset, shadow.shadowBlurRadius,
4031+
[shadow.shadowColor CGColor]);
4032+
[fillColor2 setFill];
4033+
[selectedRectanglePath fill];
4034+
CGContextRestoreGState(context);
4035+
4036+
UIBezierPath* hamburgerBezierPath = [UIBezierPath bezierPath];
4037+
[hamburgerBezierPath
4038+
moveToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4039+
CGRectGetMinY(tabsGroup) + 0.13384 * CGRectGetHeight(tabsGroup))];
4040+
[hamburgerBezierPath
4041+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
4042+
CGRectGetMinY(tabsGroup) + 0.13384 * CGRectGetHeight(tabsGroup))];
4043+
[hamburgerBezierPath
4044+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
4045+
CGRectGetMinY(tabsGroup) + 0.12122 * CGRectGetHeight(tabsGroup))];
4046+
[hamburgerBezierPath
4047+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4048+
CGRectGetMinY(tabsGroup) + 0.12122 * CGRectGetHeight(tabsGroup))];
4049+
[hamburgerBezierPath
4050+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4051+
CGRectGetMinY(tabsGroup) + 0.13384 * CGRectGetHeight(tabsGroup))];
4052+
[hamburgerBezierPath closePath];
4053+
[hamburgerBezierPath
4054+
moveToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4055+
CGRectGetMinY(tabsGroup) + 0.16541 * CGRectGetHeight(tabsGroup))];
4056+
[hamburgerBezierPath
4057+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
4058+
CGRectGetMinY(tabsGroup) + 0.16541 * CGRectGetHeight(tabsGroup))];
4059+
[hamburgerBezierPath
4060+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
4061+
CGRectGetMinY(tabsGroup) + 0.15278 * CGRectGetHeight(tabsGroup))];
4062+
[hamburgerBezierPath
4063+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4064+
CGRectGetMinY(tabsGroup) + 0.15278 * CGRectGetHeight(tabsGroup))];
4065+
[hamburgerBezierPath
4066+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4067+
CGRectGetMinY(tabsGroup) + 0.16541 * CGRectGetHeight(tabsGroup))];
4068+
[hamburgerBezierPath closePath];
4069+
[hamburgerBezierPath
4070+
moveToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4071+
CGRectGetMinY(tabsGroup) + 0.19697 * CGRectGetHeight(tabsGroup))];
4072+
[hamburgerBezierPath
4073+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
4074+
CGRectGetMinY(tabsGroup) + 0.19697 * CGRectGetHeight(tabsGroup))];
4075+
[hamburgerBezierPath
4076+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.14286 * CGRectGetWidth(tabsGroup),
4077+
CGRectGetMinY(tabsGroup) + 0.18434 * CGRectGetHeight(tabsGroup))];
4078+
[hamburgerBezierPath
4079+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4080+
CGRectGetMinY(tabsGroup) + 0.18434 * CGRectGetHeight(tabsGroup))];
4081+
[hamburgerBezierPath
4082+
addLineToPoint:CGPointMake(CGRectGetMinX(tabsGroup) + 0.07143 * CGRectGetWidth(tabsGroup),
4083+
CGRectGetMinY(tabsGroup) + 0.19697 * CGRectGetHeight(tabsGroup))];
4084+
[hamburgerBezierPath closePath];
4085+
[fillColor2 setFill];
4086+
[hamburgerBezierPath fill];
4087+
4088+
CGContextEndTransparencyLayer(context);
4089+
CGContextRestoreGState(context);
4090+
CGGradientRelease(gradient);
4091+
CGColorSpaceRelease(colorSpace);
4092+
}
4093+
39334094
void MDCCatalogDrawTypographyTile(CGRect frame) {
39344095
UIColor* fillColor = [UIColor colorWithRed:0.077 green:0.591 blue:0.945 alpha:1];
39354096

catalog/Podfile.lock

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ PODS:
2525
- MaterialComponents/ShadowLayer (= 20.1.0)
2626
- MaterialComponents/Slider (= 20.1.0)
2727
- MaterialComponents/Snackbar (= 20.1.0)
28+
- MaterialComponents/Tabs (= 20.1.0)
2829
- MaterialComponents/Typography (= 20.1.0)
2930
- MaterialComponents/ActivityIndicator (20.1.0):
3031
- MaterialComponents/private/Application
@@ -145,6 +146,11 @@ PODS:
145146
- MaterialComponents/private/KeyboardWatcher
146147
- MaterialComponents/private/Overlay
147148
- MaterialComponents/Typography
149+
- MaterialComponents/Tabs (20.1.0):
150+
- MaterialComponents/AnimationTiming
151+
- MaterialComponents/Ink
152+
- MaterialComponents/private/RTL
153+
- MaterialComponents/Typography
148154
- MaterialComponents/Typography (20.1.0)
149155
- MaterialComponentsCatalog (20.1.0):
150156
- MaterialComponents

components/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,11 @@ Material Components for iOS are written in Objective-C and support Swift and Int
124124
](Switch/)
125125
<!--{: .icon-switch }-->
126126

127+
- [**Tabs**
128+
A material tab bar for switching between grouped content.
129+
](Tabs/)
130+
<!--{: .icon-tabs }-->
131+
127132
- [**Typography**
128133
Text styles for Material fonts and opacities.
129134
](Typography/)

components/Tabs/README.md

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!--{% if site.link_to_site == "true" %}-->
2+
See <a href="https://material-ext.appspot.com/mdc-ios-preview/components/Tabs/">MDC site documentation</a> for richer experience.
3+
<!--{% else %}See <a href="https://github.com/google/material-components-ios/tree/develop/components/Tabs">GitHub</a> for README documentation.{% endif %}-->
4+
5+
# Tabs
6+
7+
<div class="ios-animation right" markdown="1">
8+
<video src="docs/assets/tab_bar.mp4" autoplay loop></video>
9+
[![Tab Bar](docs/assets/tab_bar.png)](docs/assets/tab_bar.mp4)
10+
</div>
11+
12+
Tabs are bars of buttons used to navigate between groups of content.
13+
<!--{: .intro :}-->
14+
15+
### Material Design Specifications
16+
17+
<ul class="icon-list">
18+
<li class="icon-link">
19+
<a href="https://material.google.com/components/tabs.html">
20+
Tabs
21+
</a>
22+
</li>
23+
</ul>
24+
25+
- - -
26+
27+
## Installation
28+
29+
### Requirements
30+
31+
- Xcode 7.0 or higher.
32+
- iOS SDK version 9.0 or higher.
33+
34+
### Installation with CocoaPods
35+
36+
To add this component to your Xcode project using CocoaPods, add the
37+
following to your `Podfile`:
38+
39+
~~~
40+
pod 'MaterialComponents/Tabs'
41+
~~~
42+
43+
Then, run the following command:
44+
45+
~~~ bash
46+
pod install
47+
~~~
48+
49+
- - -
50+
51+
## Overview
52+
53+
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.
54+
55+
Rather, the tabs report to their delegate when there is a tab selection. The delegate can then handle the changing of views.
56+
57+
Tabs can also show a badge (usually a number) like UITabBar.
58+
59+
- - -
60+
61+
## Usage
62+
63+
### Importing
64+
65+
To use the tab bar in your code, import the MaterialTabs umbrella header (Objective-C) or MaterialComponents module (Swift).
66+
67+
<!--<div class="material-code-render" markdown="1">-->
68+
#### Objective-C
69+
70+
~~~ objc
71+
#import "MaterialTabs.h"
72+
~~~
73+
74+
#### Swift
75+
~~~ swift
76+
import MaterialComponents
77+
~~~
78+
<!--</div>-->
79+
80+
### Delegate
81+
82+
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.
83+
84+
### Selected item
85+
86+
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.
87+
88+
### Appearance
89+
90+
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.
91+
92+
### Styling
93+
94+
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.
95+
96+
Configure where items are placed in the tab bar by setting the `alignment` property.
97+
98+
- - -
99+
100+
## Example
101+
102+
### Creating a tab bar
103+
104+
<!--<div class="material-code-render" markdown="1">-->
105+
#### Objective-C
106+
107+
~~~ objc
108+
MDCTabBar *tabBar = [[MDCTabBar alloc] initWitFrame:self.view.bounds];
109+
tabBar.items = @[
110+
[[UITabBarItem alloc] initWithTitle:@"Recents" image:[UIImage imageNamed:@"phone"] tag:0],
111+
[[UITabBarItem alloc] initWithTitle:@"Favorites" image:[UIImage imageNamed:@"heart"] tag:0],
112+
];
113+
tabBar.itemAppearance = MDCTabBarItemAppearanceTitledImages;
114+
tabBar.autoresizingMask =
115+
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
116+
[tabBar sizeToFit];
117+
[self.view addSubview:tabBar];
118+
~~~
119+
120+
#### Swift
121+
~~~ swift
122+
let tabBar = MDCTabBar(frame: view.bounds)
123+
tabBar.items = [
124+
UITabBarItem(title: "Recents", image: UIImage(named: "phone"), tag: 0),
125+
UITabBarItem(title: "Favorites", image: UIImage(named: "heart"), tag: 0),
126+
]
127+
tabBar.itemAppearance = .titledImages
128+
tabBar.autoresizingMask = [.flexibleWidth, .flexibleBottomMargin]
129+
tabBar.sizeToFit()
130+
view.addSubview(tabBar)
131+
~~~
132+
<!--</div>-->
630 KB
Binary file not shown.
40.5 KB
Loading

0 commit comments

Comments
 (0)