mirror of
https://github.com/material-components/material-components-ios.git
synced 2026-02-20 08:27:32 +08:00
This is a collection of internal clean-ups that were overdue on Bottom Navigation examples. Nearly all examples (8 of 9) were updated. The majority of the improvements focused on visual layout and appearance, but some code clean-up took place as well. * Making sure buttons/labels remain on-screen after rotations. * Correctly positioning the BottomNavigationBar with respect to the safe area. * Not adding subviews or configuring views in `-init` * Allow Catalog/Dragons to inject an App Bar. * Stop overriding titles. * Use property access. ## Before/After Screenshots Not all examples visibly changed as a result of the code clean-up (e.g., "Bottom Navigation" and "Blur Effect"), but the before and after images are present to make it easier to review. |Example|Before|After| |---|---|---| |Badge Value Test||| |Blur Effect||| |Bottom Navigation||| |Bottom Navigation (Swift)||| |Bottom Navigation Reorder (Swift)||| |Bottom Navigation Selected||| |Bottom Navigation Set Color (Swift)||| |Bottom Navigation Title Visibility (Swift)|||
225 lines
8.9 KiB
Objective-C
225 lines
8.9 KiB
Objective-C
// Copyright 2019-present the Material Components for iOS authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
#import <UIKit/UIKit.h>
|
|
|
|
#import "MaterialBottomNavigation+ColorThemer.h"
|
|
#import "MaterialBottomNavigation+TypographyThemer.h"
|
|
#import "MaterialBottomNavigation.h"
|
|
#import "MaterialColorScheme.h"
|
|
#import "MaterialTypographyScheme.h"
|
|
|
|
@interface BottomNavigationBlurExample : UIViewController <UICollectionViewDataSource>
|
|
|
|
@property(nonatomic, strong) MDCTypographyScheme *typographyScheme;
|
|
@property(nonatomic, strong) MDCSemanticColorScheme *colorScheme;
|
|
@property(nonatomic, strong) MDCBottomNavigationBar *bottomNavBar;
|
|
@property(nonatomic, strong) UICollectionView *collectionView;
|
|
@property(nonatomic, strong) UIImage *blurOnIcon;
|
|
@property(nonatomic, strong) UIImage *blurOffIcon;
|
|
@end
|
|
|
|
@implementation BottomNavigationBlurExample
|
|
|
|
- (id)init {
|
|
self = [super init];
|
|
if (self) {
|
|
_colorScheme =
|
|
[[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];
|
|
_typographyScheme =
|
|
[[MDCTypographyScheme alloc] initWithDefaults:MDCTypographySchemeDefaultsMaterial201804];
|
|
}
|
|
return self;
|
|
}
|
|
|
|
- (void)configureNavigationBar {
|
|
self.bottomNavBar.sizeThatFitsIncludesSafeArea = NO;
|
|
self.bottomNavBar.titleVisibility = MDCBottomNavigationBarTitleVisibilitySelected;
|
|
self.bottomNavBar.alignment = MDCBottomNavigationBarAlignmentJustifiedAdjacentTitles;
|
|
|
|
UITabBarItem *tabBarItem1 = [[UITabBarItem alloc] initWithTitle:@"Home"
|
|
image:[UIImage imageNamed:@"Home"]
|
|
tag:0];
|
|
UITabBarItem *tabBarItem2 = [[UITabBarItem alloc] initWithTitle:@"Messages"
|
|
image:[UIImage imageNamed:@"Email"]
|
|
tag:0];
|
|
tabBarItem2.badgeValue = @"8";
|
|
UITabBarItem *tabBarItem3 = [[UITabBarItem alloc] initWithTitle:@"Favorites"
|
|
image:[UIImage imageNamed:@"Favorite"]
|
|
tag:0];
|
|
tabBarItem3.badgeValue = @"";
|
|
UITabBarItem *tabBarItem4 = [[UITabBarItem alloc]
|
|
initWithTitle:@"Reader"
|
|
image:[UIImage imageNamed:@"baseline_chrome_reader_mode_black_24pt"
|
|
inBundle:[NSBundle
|
|
bundleForClass:
|
|
[BottomNavigationBlurExample class]]
|
|
compatibleWithTraitCollection:nil]
|
|
tag:0];
|
|
tabBarItem4.badgeValue = @"88";
|
|
UITabBarItem *tabBarItem5 = [[UITabBarItem alloc] initWithTitle:@"Birthday"
|
|
image:[UIImage imageNamed:@"Cake"]
|
|
tag:0];
|
|
tabBarItem5.badgeValue = @"888+";
|
|
self.bottomNavBar.items = @[ tabBarItem1, tabBarItem2, tabBarItem3, tabBarItem4, tabBarItem5 ];
|
|
self.bottomNavBar.selectedItem = tabBarItem2;
|
|
}
|
|
|
|
- (void)configureBlurToggleButton {
|
|
NSBundle *selfBundle = [NSBundle bundleForClass:[BottomNavigationBlurExample class]];
|
|
self.blurOffIcon = [[UIImage imageNamed:@"baseline_blur_off_black_24pt"
|
|
inBundle:selfBundle
|
|
compatibleWithTraitCollection:nil]
|
|
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
|
|
self.blurOnIcon = [[UIImage imageNamed:@"baseline_blur_on_black_24pt"
|
|
inBundle:selfBundle
|
|
compatibleWithTraitCollection:nil]
|
|
imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
|
|
self.navigationItem.rightBarButtonItem =
|
|
[[UIBarButtonItem alloc] initWithImage:nil
|
|
style:UIBarButtonItemStylePlain
|
|
target:self
|
|
action:@selector(toggleBlurEffect)];
|
|
// Updates icon and accessibility values for blur button
|
|
[self updateBlurToggleButton];
|
|
}
|
|
|
|
- (void)applyTheming {
|
|
[MDCBottomNavigationBarTypographyThemer applyTypographyScheme:self.typographyScheme
|
|
toBottomNavigationBar:self.bottomNavBar];
|
|
[MDCBottomNavigationBarColorThemer applySemanticColorScheme:self.colorScheme
|
|
toBottomNavigation:self.bottomNavBar];
|
|
self.bottomNavBar.barTintColor =
|
|
[self.bottomNavBar.barTintColor colorWithAlphaComponent:(CGFloat)0.85];
|
|
self.view.backgroundColor = self.colorScheme.backgroundColor;
|
|
self.collectionView.backgroundColor = self.colorScheme.backgroundColor;
|
|
}
|
|
|
|
- (void)viewDidLoad {
|
|
[super viewDidLoad];
|
|
|
|
[self configureBlurToggleButton];
|
|
|
|
self.collectionView =
|
|
[[UICollectionView alloc] initWithFrame:self.view.bounds
|
|
collectionViewLayout:[[UICollectionViewFlowLayout alloc] init]];
|
|
self.collectionView.dataSource = self;
|
|
self.collectionView.autoresizingMask =
|
|
(UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
|
|
[self.collectionView registerClass:[UICollectionViewCell class]
|
|
forCellWithReuseIdentifier:@"cell"];
|
|
[self.view addSubview:self.collectionView];
|
|
|
|
self.bottomNavBar = [[MDCBottomNavigationBar alloc] initWithFrame:CGRectZero];
|
|
[self.view addSubview:self.bottomNavBar];
|
|
[self configureNavigationBar];
|
|
|
|
[self applyTheming];
|
|
}
|
|
|
|
#pragma mark - Layout
|
|
|
|
- (void)viewWillLayoutSubviews {
|
|
[super viewWillLayoutSubviews];
|
|
self.collectionView.frame = CGRectStandardize(self.view.bounds);
|
|
}
|
|
|
|
- (void)layoutBottomNavBar {
|
|
CGRect viewBounds = CGRectStandardize(self.view.bounds);
|
|
CGSize size = [self.bottomNavBar sizeThatFits:viewBounds.size];
|
|
UIEdgeInsets safeAreaInsets = UIEdgeInsetsZero;
|
|
// Extend the Bottom Navigation to the bottom of the screen.
|
|
if (@available(iOS 11.0, *)) {
|
|
safeAreaInsets = self.view.safeAreaInsets;
|
|
}
|
|
CGRect bottomNavBarFrame =
|
|
CGRectMake(0, viewBounds.size.height - size.height - safeAreaInsets.bottom, size.width,
|
|
size.height + safeAreaInsets.bottom);
|
|
self.bottomNavBar.frame = bottomNavBarFrame;
|
|
self.collectionView.contentInset = UIEdgeInsetsMake(0, 0, size.height, 0);
|
|
}
|
|
|
|
- (void)viewDidLayoutSubviews {
|
|
[super viewDidLayoutSubviews];
|
|
[self layoutBottomNavBar];
|
|
}
|
|
|
|
- (void)viewSafeAreaInsetsDidChange {
|
|
if (@available(iOS 11.0, *)) {
|
|
[super viewSafeAreaInsetsDidChange];
|
|
}
|
|
[self layoutBottomNavBar];
|
|
}
|
|
|
|
#pragma mark - Blur effect
|
|
|
|
- (void)toggleBlurEffect {
|
|
self.bottomNavBar.backgroundBlurEnabled = !self.bottomNavBar.isBackgroundBlurEnabled;
|
|
[self updateBlurToggleButton];
|
|
}
|
|
|
|
- (void)updateBlurToggleButton {
|
|
if (self.bottomNavBar.isBackgroundBlurEnabled) {
|
|
self.navigationItem.rightBarButtonItem.image = self.blurOnIcon;
|
|
self.navigationItem.rightBarButtonItem.accessibilityLabel = @"Disable blur";
|
|
self.navigationItem.rightBarButtonItem.accessibilityHint =
|
|
@"Disables the Bottom Navigation bar blur visual effect";
|
|
|
|
} else {
|
|
self.navigationItem.rightBarButtonItem.image = self.blurOffIcon;
|
|
self.navigationItem.rightBarButtonItem.accessibilityLabel = @"Enable blur";
|
|
self.navigationItem.rightBarButtonItem.accessibilityHint =
|
|
@"Enables the Bottom Navigation bar blur visual effect";
|
|
}
|
|
}
|
|
|
|
#pragma mark - UICollectionView
|
|
|
|
- (NSInteger)collectionView:(UICollectionView *)collectionView
|
|
numberOfItemsInSection:(NSInteger)section {
|
|
return 1000;
|
|
}
|
|
|
|
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
|
|
return 1;
|
|
}
|
|
|
|
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
|
|
cellForItemAtIndexPath:(NSIndexPath *)indexPath {
|
|
static NSArray<UIColor *> *colors;
|
|
static dispatch_once_t onceToken;
|
|
dispatch_once(&onceToken, ^{
|
|
colors = @[
|
|
UIColor.redColor, UIColor.blueColor, UIColor.greenColor, UIColor.cyanColor, UIColor.blackColor
|
|
];
|
|
});
|
|
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell"
|
|
forIndexPath:indexPath];
|
|
int colorIndex = indexPath.row % (int)colors.count;
|
|
cell.backgroundColor = colors[colorIndex];
|
|
return cell;
|
|
}
|
|
|
|
#pragma mark - CatalogByConvention
|
|
|
|
+ (NSDictionary *)catalogMetadata {
|
|
return @{
|
|
@"breadcrumbs" : @[ @"Bottom Navigation", @"Blur Effect" ],
|
|
@"primaryDemo" : @NO,
|
|
@"presentable" : @NO,
|
|
};
|
|
}
|
|
|
|
@end
|