diff --git a/components/Tabs/BUILD b/components/Tabs/BUILD index 479b9a5982d..2f2bad2fc4d 100644 --- a/components/Tabs/BUILD +++ b/components/Tabs/BUILD @@ -100,13 +100,21 @@ mdc_extension_objc_library( ], ) +filegroup( + name = "TabsExamplesAssets", + srcs = glob(["examples/resources/TabBarDemoAssets.xcassets/**"]), +) + mdc_examples_objc_library( name = "ObjcExamples", + data = [":TabsExamplesAssets"], deps = [ ":ColorThemer", ":TabBarView", ":Tabs", ":TypographyThemer", + "//components/ActionSheet", + "//components/ActionSheet:Theming", "//components/AppBar", "//components/AppBar:ColorThemer", "//components/AppBar:TypographyThemer", @@ -115,6 +123,7 @@ mdc_examples_objc_library( "//components/Collections", "//components/Palettes", "//components/Slider", + "//components/private/Icons/icons/ic_settings", "//components/private/Math", "//components/schemes/Color", "//components/schemes/Container", diff --git a/components/Tabs/examples/MDCTabBarViewTypicalExampleViewController.m b/components/Tabs/examples/MDCTabBarViewTypicalExampleViewController.m index 4a3485ce7cd..d460e6e558e 100644 --- a/components/Tabs/examples/MDCTabBarViewTypicalExampleViewController.m +++ b/components/Tabs/examples/MDCTabBarViewTypicalExampleViewController.m @@ -14,13 +14,23 @@ #import +#import +#import #import #import +#import +#import #import #import "MaterialTabs+TabBarView.h" static NSString *const kExampleTitle = @"TabBarView"; +/** Accessibility label for the content insets toggle button. */ +static NSString *const kToggleContentInsetsAccessibilityLabel = @"Toggle content insets"; + +/** Accessibility label for the preferred layout menu button. */ +static NSString *const kPreferredLayoutMenuAccessibilityLabel = @"Change preferred alignment"; + /** A custom view to place in an MDCTabBarView. */ @interface MDCTabBarViewTypicalExampleViewControllerCustomView : UIView @@ -112,6 +122,12 @@ @interface MDCTabBarViewTypicalExampleViewController /** Tracks the UITabBarItem views that are currently on-screen. */ @property(nonatomic, copy) NSSet *visibleItems; +/** Image for toggle button when contentInset is non-zero. */ +@property(nonatomic, strong) UIImage *contentInsetToggleEnabledImage; + +/** Image for toggle button when contentInset is zero. */ +@property(nonatomic, strong) UIImage *contentInsetToggleDisabledImage; + @end @implementation MDCTabBarViewTypicalExampleViewController @@ -119,6 +135,15 @@ @implementation MDCTabBarViewTypicalExampleViewController - (void)viewDidLoad { [super viewDidLoad]; self.title = kExampleTitle; + NSBundle *selfBundle = [NSBundle bundleForClass:[self class]]; + self.contentInsetToggleEnabledImage = [[UIImage imageNamed:@"contentInset_enabled" + inBundle:selfBundle + compatibleWithTraitCollection:nil] + imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; + self.contentInsetToggleDisabledImage = [[UIImage imageNamed:@"contentInset_disabled" + inBundle:selfBundle + compatibleWithTraitCollection:nil] + imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; [self applyFixForInjectedAppBar]; @@ -185,6 +210,23 @@ - (void)viewDidLoad { [self applyThemingToTabBarView]; [self addSegmentedControl]; + + UIBarButtonItem *alignmentButton = [[UIBarButtonItem alloc] + initWithImage:[MDCIcons.imageFor_ic_settings + imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate] + style:UIBarButtonItemStylePlain + target:self + action:@selector(didTapAlignmentButton)]; + alignmentButton.accessibilityLabel = kPreferredLayoutMenuAccessibilityLabel; + + UIBarButtonItem *insetsButton = + [[UIBarButtonItem alloc] initWithImage:self.contentInsetToggleDisabledImage + style:UIBarButtonItemStylePlain + target:self + action:@selector(didToggleInsets:)]; + insetsButton.accessibilityLabel = kToggleContentInsetsAccessibilityLabel; + + self.navigationItem.rightBarButtonItems = @[ alignmentButton, insetsButton ]; } - (void)applyThemingToTabBarView { @@ -272,6 +314,65 @@ - (void)applyFixForInjectedAppBar { #pragma mark - Item style variations +- (void)didTapAlignmentButton { + MDCTabBarViewLayoutStyle currentStyle = self.tabBar.preferredLayoutStyle; + UIImage *checkIcon = + [MDCIcons.imageFor_ic_check imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]; + MDCActionSheetController *actionSheet = + [MDCActionSheetController actionSheetControllerWithTitle:@"Preferred Layout Style"]; + MDCActionSheetAction *fixedJustifiedAction = [MDCActionSheetAction + actionWithTitle:@"Fixed" + image:((currentStyle == MDCTabBarViewLayoutStyleFixed) ? checkIcon : nil) + handler:^(MDCActionSheetAction *_Nonnull action) { + self.tabBar.preferredLayoutStyle = MDCTabBarViewLayoutStyleFixed; + }]; + MDCActionSheetAction *fixedClusteredLeadingAction = [MDCActionSheetAction + actionWithTitle:@"Fixed Clustered Leading" + image:((currentStyle == MDCTabBarViewLayoutStyleFixedClusteredLeading) ? checkIcon + : nil) + handler:^(MDCActionSheetAction *_Nonnull action) { + self.tabBar.preferredLayoutStyle = MDCTabBarViewLayoutStyleFixedClusteredLeading; + }]; + MDCActionSheetAction *fixedClusteredTrailingAction = [MDCActionSheetAction + actionWithTitle:@"Fixed Clustered Trailing" + image:((currentStyle == MDCTabBarViewLayoutStyleFixedClusteredTrailing) ? checkIcon + : nil) + handler:^(MDCActionSheetAction *_Nonnull action) { + self.tabBar.preferredLayoutStyle = MDCTabBarViewLayoutStyleFixedClusteredTrailing; + }]; + MDCActionSheetAction *fixedClusteredCenteredAction = [MDCActionSheetAction + actionWithTitle:@"Fixed Clustered Centered" + image:((currentStyle == MDCTabBarViewLayoutStyleFixedClusteredCentered) ? checkIcon + : nil) + handler:^(MDCActionSheetAction *_Nonnull action) { + self.tabBar.preferredLayoutStyle = MDCTabBarViewLayoutStyleFixedClusteredCentered; + }]; + MDCActionSheetAction *scrollableAction = [MDCActionSheetAction + actionWithTitle:@"Scrollable" + image:((currentStyle == MDCTabBarViewLayoutStyleScrollable) ? checkIcon : nil) + handler:^(MDCActionSheetAction *_Nonnull action) { + self.tabBar.preferredLayoutStyle = MDCTabBarViewLayoutStyleScrollable; + }]; + [actionSheet addAction:fixedJustifiedAction]; + [actionSheet addAction:fixedClusteredLeadingAction]; + [actionSheet addAction:fixedClusteredTrailingAction]; + [actionSheet addAction:fixedClusteredCenteredAction]; + [actionSheet addAction:scrollableAction]; + [actionSheet applyThemeWithScheme:self.containerScheme]; + actionSheet.alwaysAlignTitleLeadingEdges = YES; + [self presentViewController:actionSheet animated:YES completion:nil]; +} + +- (void)didToggleInsets:(UIBarButtonItem *)sender { + if (UIEdgeInsetsEqualToEdgeInsets(self.tabBar.contentInset, UIEdgeInsetsZero)) { + self.tabBar.contentInset = UIEdgeInsetsMake(0, 10, 0, 30); + sender.image = self.contentInsetToggleEnabledImage; + } else { + self.tabBar.contentInset = UIEdgeInsetsZero; + sender.image = self.contentInsetToggleDisabledImage; + } +} + - (void)segmentedControlChangedValue:(id)sender { if ([sender isKindOfClass:[UISegmentedControl class]]) { UISegmentedControl *segmentedControl = (UISegmentedControl *)sender; diff --git a/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/Contents.json b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/Contents.json new file mode 100644 index 00000000000..0dc69244b28 --- /dev/null +++ b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "outline_crop_din_black_24pt_1x.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "filename" : "outline_crop_din_black_24pt_2x.png", + "scale" : "2x" + }, + { + "idiom" : "universal", + "filename" : "outline_crop_din_black_24pt_3x.png", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} \ No newline at end of file diff --git a/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_1x.png b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_1x.png new file mode 100644 index 00000000000..efb02cd04a6 Binary files /dev/null and b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_1x.png differ diff --git a/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_2x.png b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_2x.png new file mode 100644 index 00000000000..561f473bc60 Binary files /dev/null and b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_2x.png differ diff --git a/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_3x.png b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_3x.png new file mode 100644 index 00000000000..e338723b6eb Binary files /dev/null and b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_disabled.imageset/outline_crop_din_black_24pt_3x.png differ diff --git a/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/Contents.json b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/Contents.json new file mode 100644 index 00000000000..7fceefbff30 --- /dev/null +++ b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/Contents.json @@ -0,0 +1,23 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "outline_view_array_black_24pt_1x.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "filename" : "outline_view_array_black_24pt_2x.png", + "scale" : "2x" + }, + { + "idiom" : "universal", + "filename" : "outline_view_array_black_24pt_3x.png", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} \ No newline at end of file diff --git a/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_1x.png b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_1x.png new file mode 100644 index 00000000000..9ed37d51f30 Binary files /dev/null and b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_1x.png differ diff --git a/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_2x.png b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_2x.png new file mode 100644 index 00000000000..492735ee088 Binary files /dev/null and b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_2x.png differ diff --git a/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_3x.png b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_3x.png new file mode 100644 index 00000000000..6cfcf40b260 Binary files /dev/null and b/components/Tabs/examples/resources/TabBarDemoAssets.xcassets/contentInset_enabled.imageset/outline_view_array_black_24pt_3x.png differ