Skip to content

Commit

Permalink
[Tabs] Expand configuration in MDCTabBarView example. (#8498)
Browse files Browse the repository at this point in the history
Adds configuration options for `preferredLayoutStyle` and toggling
`contentInset`.

|Fewer Tabs (Portrait)|More Tabs (Landscape)|
|---|---|
|![Simulator Screen Shot - iPhone 7 - 2019-09-25 at 09 12 25](https://user-images.githubusercontent.com/1753199/65605352-f3260180-df76-11e9-8fcd-2cd68ec30fa3.png)|![Simulator Screen Shot - iPhone 7 - 2019-09-25 at 09 15 47](https://user-images.githubusercontent.com/1753199/65605434-181a7480-df77-11e9-993d-1a9c4e7a68e0.png)|


Helps exercise #8236
  • Loading branch information
Robert Moore committed Sep 25, 2019
1 parent 38de02d commit 1ce82c6
Show file tree
Hide file tree
Showing 10 changed files with 156 additions and 0 deletions.
9 changes: 9 additions & 0 deletions components/Tabs/BUILD
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
101 changes: 101 additions & 0 deletions components/Tabs/examples/MDCTabBarViewTypicalExampleViewController.m
Expand Up @@ -14,13 +14,23 @@

#import <UIKit/UIKit.h>

#import <MaterialComponents/MaterialActionSheet+Theming.h>
#import <MaterialComponents/MaterialActionSheet.h>
#import <MaterialComponents/MaterialAnimationTiming.h>
#import <MaterialComponents/MaterialContainerScheme.h>
#import <MaterialComponents/MaterialIcons+ic_check.h>
#import <MaterialComponents/MaterialIcons+ic_settings.h>
#import <MaterialComponents/MaterialMath.h>
#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 <MDCTabBarViewCustomViewable>
Expand Down Expand Up @@ -112,13 +122,28 @@ @interface MDCTabBarViewTypicalExampleViewController
/** Tracks the UITabBarItem views that are currently on-screen. */
@property(nonatomic, copy) NSSet<UITabBarItem *> *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

- (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];

Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand Down
@@ -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"
}
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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"
}
}
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1ce82c6

Please sign in to comment.