Create a ChipThemer for material and outlined schemes
Before:
![simulator screen shot - iphone x - 2018-04-27 at 13 43 06](https://user-images.githubusercontent.com/1418389/39376826-0283c50a-4a21-11e8-921f-1d18ac2e8c38.png)
After:
![simulator screen shot - iphone x - 2018-04-27 at 13 42 03](https://user-images.githubusercontent.com/1418389/39376832-050ea088-4a21-11e8-8c93-29ba62114249.png)
MODIFY
MaterialComponents.podspec
MaterialComponents.podspec
@@ -313,6 +313,15 @@ Pod::Spec.new do |mdc|
extension.dependency "MaterialComponents/Chips"
extension.dependency "MaterialComponents/schemes/Typography"
end
+ component.subspec "ChipThemer" do |extension|
+ extension.ios.deployment_target = '8.0'
+ extension.public_header_files = "components/Chips/src/#{extension.base_name}/*.h"
+ extension.source_files = "components/Chips/src/#{extension.base_name}/*.{h,m}"
+
+ extension.dependency "MaterialComponents/Chips"
+ extension.dependency "MaterialComponents/Chips+Extensions/ColorThemer"
+ extension.dependency "MaterialComponents/Chips+Extensions/TypographyThemer"
+ end
end
mdc.subspec "CollectionCells" do |component|

MODIFY
components/Chips/BUILD
components/Chips/BUILD
@@ -39,6 +39,19 @@ mdc_public_objc_library(
],
)
+mdc_objc_library(
+ name = "ChipThemer",
+ srcs = native.glob(["src/ChipThemer/*.m"]),
+ hdrs = native.glob(["src/ChipThemer/*.h"]),
+ includes = ["src/ChipThemer"],
+ deps = [
+ ":Chips",
+ ":ColorThemer",
+ ":TypographyThemer",
+ ],
+ visibility = ["//visibility:public"],
+)
+
mdc_objc_library(
name = "FontThemer",
srcs = native.glob(["src/FontThemer/*.m"]),

MODIFY
components/Chips/examples/ChipsActionExampleViewController.m
components/Chips/examples/ChipsActionExampleViewController.m
#import "ChipsExamplesSupplemental.h"
#import "MaterialChips.h"
-#import "MaterialChips+ColorThemer.h"
+#import "MaterialChips+ChipThemer.h"
@implementation ChipsActionExampleViewController {
UICollectionView *_collectionView;
// Customize Chip
chipView.titleLabel.text = self.titles[indexPath.row];
+ MDCChipViewScheme *scheme = [[MDCChipViewScheme alloc] init];
+ scheme.colorScheme = self.colorScheme;
+
// Apply Theming
if (_isStroked) {
- [chipView setBorderWidth:1 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:self.colorScheme toStrokedChipView:chipView];
+ [MDCChipViewThemer applyOutlinedVariantWithScheme:scheme toChipView:chipView];
} else {
- [chipView setBorderWidth:0 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:self.colorScheme toChipView:chipView];
+ [MDCChipViewThemer applyScheme:scheme toChipView:chipView];
}
return cell;

MODIFY
components/Chips/examples/ChipsChoiceExampleViewController.m
components/Chips/examples/ChipsChoiceExampleViewController.m
#import "ChipsExamplesSupplemental.h"
#import "MaterialChips.h"
-#import "MaterialChips+ColorThemer.h"
+#import "MaterialChips+ChipThemer.h"
@implementation ChipsChoiceExampleViewController {
MDCChipView *_sizingChip;
if (indexPath.row == 2) {
[chipView setEnabled:NO];
}
+
+ MDCChipViewScheme *scheme = [[MDCChipViewScheme alloc] init];
+ scheme.colorScheme = self.colorScheme;
+
if (_isStroked) {
- [chipView setBorderWidth:1 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:_colorScheme toStrokedChipView:chipView];
+ [MDCChipViewThemer applyOutlinedVariantWithScheme:scheme toChipView:chipView];
} else {
- [chipView setBorderWidth:0 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:_colorScheme toChipView:chipView];
+ [MDCChipViewThemer applyScheme:scheme toChipView:chipView];
}
return cell;

MODIFY
components/Chips/examples/ChipsFilterExampleViewController.m
components/Chips/examples/ChipsFilterExampleViewController.m
#import "ChipsExamplesSupplemental.h"
#import "MaterialChips.h"
-#import "MaterialChips+ColorThemer.h"
+#import "MaterialChips+ChipThemer.h"
@implementation ChipsFilterExampleViewController {
UICollectionView *_collectionView;
chipView.selected = [_selectedIndecies containsObject:indexPath];
cell.alwaysAnimateResize = [self shouldAnimateResize];
+ MDCChipViewScheme *scheme = [[MDCChipViewScheme alloc] init];
+ scheme.colorScheme = self.colorScheme;
+
if (_isStroked) {
- [chipView setBorderWidth:1 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:self.colorScheme toStrokedChipView:chipView];
+ [MDCChipViewThemer applyOutlinedVariantWithScheme:scheme toChipView:chipView];
} else {
- [chipView setBorderWidth:0 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:self.colorScheme toChipView:chipView];
+ [MDCChipViewThemer applyScheme:scheme toChipView:chipView];
}
return cell;

MODIFY
components/Chips/examples/ChipsInputExampleViewController.m
components/Chips/examples/ChipsInputExampleViewController.m
#import "MaterialChips.h"
#import "MaterialTextFields.h"
-#import "MaterialChips+ColorThemer.h"
+#import "MaterialChips+ChipThemer.h"
@interface ChipsInputExampleViewController () <MDCChipFieldDelegate>
@end
}
- (void)chipField:(MDCChipField *)chipField didAddChip:(MDCChipView *)chip {
+ MDCChipViewScheme *scheme = [[MDCChipViewScheme alloc] init];
+ scheme.colorScheme = self.colorScheme;
+
// Every other chip is stroked
if (chipField.chips.count%2) {
- [chip setBorderWidth:1 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:self.colorScheme toStrokedChipView:chip];
+ [MDCChipViewThemer applyOutlinedVariantWithScheme:scheme toChipView:chip];
} else {
- [chip setBorderWidth:0 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:self.colorScheme toChipView:chip];
+ [MDCChipViewThemer applyScheme:scheme toChipView:chip];
}
[chip sizeToFit];
CGFloat chipVerticalInset = MIN(0, (CGRectGetHeight(chip.bounds) - 48) / 2);

ADD
components/Chips/src/ChipThemer/MDCChipViewScheme.h
+/*
+ Copyright 2018-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 "MaterialChips.h"
+#import "MaterialColorScheme.h"
+#import "MaterialTypographyScheme.h"
+
+#import <Foundation/Foundation.h>
+
+/**
+ MDCChipViewScheming represents the design parameters for an MDCChipView.
+
+ An instance of this protocol can be applied to an instance of MDCChipView using any of the
+ MDCChipViewThemer APIs.
+ */
+@protocol MDCChipViewScheming
+
+/**
+ The color scheme to apply to a chip view.
+ */
+@property(nonnull, readonly, nonatomic) id<MDCColorScheming> colorScheme;
+
+/**
+ The typography scheme to apply to a chip view.
+ */
+@property(nonnull, readonly, nonatomic) id<MDCTypographyScheming> typographyScheme;
+
+@end
+
+/**
+ An MDCChipViewScheme is a mutable representation of the design parameters for an MDCChipView.
+ */
+@interface MDCChipViewScheme : NSObject <MDCChipViewScheming>
+
+/**
+ A mutable representation of a color scheme.
+
+ By default, this is initialized with the latest color scheme defaults.
+ */
+@property(nonnull, readwrite, nonatomic) id<MDCColorScheming> colorScheme;
+
+/**
+ A mutable representation of a typography scheme.
+
+ By default, this is initialized with the latest typography scheme defaults.
+ */
+@property(nonnull, readwrite, nonatomic) id<MDCTypographyScheming> typographyScheme;
+
+@end

ADD
components/Chips/src/ChipThemer/MDCChipViewScheme.m
+/*
+ Copyright 2018-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 "MDCChipViewScheme.h"
+
+@implementation MDCChipViewScheme
+
+- (instancetype)init {
+ self = [super init];
+ if (self) {
+ _colorScheme = [[MDCSemanticColorScheme alloc] init];
+ _typographyScheme = [[MDCTypographyScheme alloc] init];
+ }
+ return self;
+}
+@end

ADD
components/Chips/src/ChipThemer/MDCChipViewThemer.h
+/*
+ Copyright 2018-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 "MDCChipViewScheme.h"
+
+#import "MaterialChips.h"
+
+#import <Foundation/Foundation.h>
+
+/**
+ The Material Design themer for instances of MDCChipView.
+ */
+@interface MDCChipViewThemer : NSObject
+
+/**
+ Applies a chip view scheme's properties to an MDCChipView.
+
+ @param scheme The chip view scheme to apply to the component instance.
+ @param chip A component instance to which the scheme should be applied.
+ */
++ (void)applyScheme:(nonnull id<MDCChipViewScheming>)scheme
+ toChipView:(nonnull MDCChipView *)chip;
+
+/**
+ Applies a chip view scheme's properties to an MDCChipView using the outlined style.
+
+ @param scheme The chip view scheme to apply to the component instance.
+ @param chip A component instance to which the scheme should be applied.
+ */
++ (void)applyOutlinedVariantWithScheme:(nonnull id<MDCChipViewScheming>)scheme
+ toChipView:(nonnull MDCChipView *)chip;
+
+@end

ADD
components/Chips/src/ChipThemer/MDCChipViewThemer.m
+/*
+ Copyright 2018-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 "MaterialChips+ChipThemer.h"
+
+#import "MaterialChips+ColorThemer.h"
+#import "MaterialChips+TypographyThemer.h"
+
+@implementation MDCChipViewThemer
+
++ (void)applyScheme:(nonnull id<MDCChipViewScheming>)scheme
+ toChipView:(nonnull MDCChipView *)chip {
+ NSUInteger maximumStateValue =
+ UIControlStateNormal | UIControlStateSelected | UIControlStateHighlighted |
+ UIControlStateDisabled;
+ for (NSUInteger state = 0; state <= maximumStateValue; ++state) {
+ [chip setBorderWidth:0 forState:state];
+ }
+ [MDCChipViewColorThemer applySemanticColorScheme:scheme.colorScheme toChipView:chip];
+ [MDCChipViewTypographyThemer applyTypographyScheme:scheme.typographyScheme toChipView:chip];
+}
+
++ (void)applyOutlinedVariantWithScheme:(nonnull id<MDCChipViewScheming>)scheme
+ toChipView:(nonnull MDCChipView *)chip {
+ NSUInteger maximumStateValue =
+ UIControlStateNormal | UIControlStateSelected | UIControlStateHighlighted |
+ UIControlStateDisabled;
+ for (NSUInteger state = 0; state <= maximumStateValue; ++state) {
+ [chip setBorderWidth:1 forState:state];
+ }
+ [MDCChipViewColorThemer applyOutlinedVariantWithColorScheme:scheme.colorScheme toChipView:chip];
+ [MDCChipViewTypographyThemer applyTypographyScheme:scheme.typographyScheme toChipView:chip];
+}
+
+@end
+
+

ADD
components/Chips/src/ChipThemer/MaterialChips+ChipThemer.h
+/*
+ Copyright 2018-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 "MDCChipViewThemer.h"
+#import "MDCChipViewScheme.h"

MODIFY
components/Chips/src/ColorThemer/MDCChipViewColorThemer.h
components/Chips/src/ColorThemer/MDCChipViewColorThemer.h
+ (void)applySemanticColorScheme:(nonnull id<MDCColorScheming>)colorScheme
toChipView:(nonnull MDCChipView *)chipView;
+/**
+ Applies a color scheme's properties to the component instance with the outlined style.
+
+ @param colorScheme The color scheme to apply to the component instance.
+ @param chipView @c A component instance to which the color scheme should be applied.
+ */
++ (void)applyOutlinedVariantWithColorScheme:(nonnull id<MDCColorScheming>)colorScheme
+ toChipView:(nonnull MDCChipView *)chipView;
+
+#pragma mark - Soon to be deprecated
+
/**
Applies a color scheme's properties to a stroked MDCChipView.
+ @warning This method will soon be deprecated. Consider using
+ @c +applyOutlinedVariantWithColorScheme:toChipView: instead.
+
@param colorScheme The color scheme to apply to the component instance.
@param strokedChipView A component instance to which the color scheme should be applied.
*/

MODIFY
components/Chips/src/ColorThemer/MDCChipViewColorThemer.m
components/Chips/src/ColorThemer/MDCChipViewColorThemer.m
forState:UIControlStateDisabled];
}
++ (void)applyOutlinedVariantWithColorScheme:(nonnull id<MDCColorScheming>)colorScheme
+ toChipView:(nonnull MDCChipView *)chipView {
+ [MDCChipViewColorThemer resetUIControlStatesForChipTheming:chipView];
+ UIColor *onSurface12Opacity = [colorScheme.onSurfaceColor colorWithAlphaComponent:0.12f];
+ UIColor *onSurface87Opacity = [colorScheme.onSurfaceColor colorWithAlphaComponent:0.87f];
+ UIColor *onSurface16Opacity = [colorScheme.onSurfaceColor colorWithAlphaComponent:0.16f];
+ UIColor *selectedBackgroundColor =
+ [MDCSemanticColorScheme blendColor:onSurface12Opacity
+ withBackgroundColor:colorScheme.surfaceColor];
+ UIColor *borderColor =
+ [MDCSemanticColorScheme blendColor:onSurface12Opacity
+ withBackgroundColor:colorScheme.surfaceColor];
+ UIColor *textColor =
+ [MDCSemanticColorScheme blendColor:onSurface87Opacity
+ withBackgroundColor:colorScheme.surfaceColor];
+ UIColor *selectedTextColor =
+ [MDCSemanticColorScheme blendColor:onSurface87Opacity
+ withBackgroundColor:selectedBackgroundColor];
+
+ [chipView setInkColor:onSurface16Opacity forState:UIControlStateNormal];
+ [chipView setTitleColor:textColor forState:UIControlStateNormal];
+ [chipView setBackgroundColor:colorScheme.surfaceColor forState:UIControlStateNormal];
+ [chipView setBorderColor:borderColor forState:UIControlStateNormal];
+
+ [chipView setTitleColor:selectedTextColor forState:UIControlStateSelected];
+ [chipView setBackgroundColor:selectedBackgroundColor forState:UIControlStateSelected];
+ [chipView setBorderColor:[UIColor clearColor] forState:UIControlStateSelected];
+
+ [chipView setTitleColor:[textColor colorWithAlphaComponent:0.38f]
+ forState:UIControlStateDisabled];
+ [chipView setBackgroundColor:[colorScheme.surfaceColor colorWithAlphaComponent:0.38f]
+ forState:UIControlStateDisabled];
+ [chipView setBorderColor:[borderColor colorWithAlphaComponent:0.38f]
+ forState:UIControlStateDisabled];
+}
+
+ (void)applySemanticColorScheme:(nonnull id<MDCColorScheming>)colorScheme
toStrokedChipView:(nonnull MDCChipView *)strokedChipView {
[MDCChipViewColorThemer resetUIControlStatesForChipTheming:strokedChipView];

MODIFY
components/Chips/tests/unit/ChipViewColorThemerTests.m
components/Chips/tests/unit/ChipViewColorThemerTests.m
}
- (void)testStrokedChipViewColorThemer {
- [MDCChipViewColorThemer applySemanticColorScheme:self.colorScheme toStrokedChipView:self.chip];
+ [MDCChipViewColorThemer applyOutlinedVariantWithColorScheme:self.colorScheme
+ toChipView:self.chip];
UIColor *onSurface12Opacity = [self.colorScheme.onSurfaceColor colorWithAlphaComponent:0.12f];
UIColor *onSurface87Opacity = [self.colorScheme.onSurfaceColor colorWithAlphaComponent:0.87f];
UIColor *onSurface16Opacity = [self.colorScheme.onSurfaceColor colorWithAlphaComponent:0.16f];

Create a ChipThemer for material and outlined schemes (#3563)

Before:
![simulator screen shot - iphone x - 2018-04-27 at 13 43 06](https://user-images.githubusercontent.com/1418389/39376826-0283c50a-4a21-11e8-921f-1d18ac2e8c38.png)

After:
![simulator screen shot - iphone x - 2018-04-27 at 13 42 03](https://user-images.githubusercontent.com/1418389/39376832-050ea088-4a21-11e8-8c93-29ba62114249.png)