[Chips] Adding Examples/Documentation for all chips types.
* Added example for Action Chips Type.
Cleaned up/Documented the examples for Filter and Choice chips type.
Added More documentation to MDCChipCollectionViewCell.
* typo.
PR:
ADD
components/Chips/examples/ChipsActionExampleViewController.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 "ChipsExamplesSupplemental.h"
+
+#import "MaterialChips.h"
+#import "MDCChipViewColorThemer.h"
+
+@implementation ChipsActionExampleViewController {
+ UICollectionView *_collectionView;
+ MDCChipView *_sizingChip;
+ MDCSemanticColorScheme *_colorScheme;
+}
+
+- (void)loadView {
+ [super loadView];
+
+ _colorScheme = [[MDCSemanticColorScheme alloc] init];
+
+ // Our preferred CollectionView Layout For chips
+ MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init];
+ layout.minimumInteritemSpacing = 10;
+
+
+ // Action chips should allow single selection, collection view default is based on single
+ // selection. Note that MDCChipCollectionViewCell manages the state of the chip accordingly.
+ _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
+
+ // Since there is no scrolling turning off the delaysContentTouches makes the cells respond faster
+ _collectionView.delaysContentTouches = NO;
+
+ // Collection view setup
+ _collectionView.dataSource = self;
+ _collectionView.delegate = self;
+ _collectionView.backgroundColor = [UIColor whiteColor];
+ _collectionView.contentInset = UIEdgeInsetsMake(4, 8, 4, 8);
+ [_collectionView registerClass:[MDCChipCollectionViewCell class]
+ forCellWithReuseIdentifier:@"Cell"];
+
+ // This is used to calculate the size of each chip based on the chip setup
+ _sizingChip = [[MDCChipView alloc] init];
+
+ [self.view addSubview:_collectionView];
+}
+
+- (void)viewWillLayoutSubviews {
+ [super viewWillLayoutSubviews];
+
+ _collectionView.frame = self.view.bounds;
+}
+
+- (NSInteger)collectionView:(UICollectionView *)collectionView
+ numberOfItemsInSection:(NSInteger)section {
+ return self.titles.count;
+}
+
+- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
+ cellForItemAtIndexPath:(NSIndexPath *)indexPath {
+ MDCChipCollectionViewCell *cell =
+ [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
+ MDCChipView *chipView = cell.chipView;
+
+ // Customize Chip
+ chipView.titleLabel.text = self.titles[indexPath.row];
+
+ // Apply Theming
+ [MDCChipViewColorThemer applySemanticColorScheme:_colorScheme toChipView:cell.chipView];
+
+ return cell;
+}
+
+- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
+ // For action chips, we never want the chip to stay in selected state.
+ // Other possible apporaches would be relying on theming or Customizing collectionViewCell
+ // selected state.
+ [collectionView deselectItemAtIndexPath:indexPath animated:NO];
+
+ // Do the action related to the chip
+ [self setTitle:[NSString stringWithFormat:@"Action %d", (int)indexPath.row]];
+
+}
+
+- (CGSize)collectionView:(UICollectionView *)collectionView
+ layout:(UICollectionViewLayout*)collectionViewLayout
+ sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
+ _sizingChip.titleLabel.text = self.titles[indexPath.row];
+ return [_sizingChip sizeThatFits:collectionView.bounds.size];
+}
+
+- (NSArray *)titles {
+ if (!_titles) {
+ _titles = @[
+ @"Change Title to Action 0",
+ @"Change Title to Action 1",
+ @"Change Title to Action 2",
+ @"Change Title to Action 3",
+ ];
+ }
+ return _titles;
+}
+
+@end
+

MODIFY
components/Chips/examples/ChipsChoiceExampleViewController.m
components/Chips/examples/ChipsChoiceExampleViewController.m
@implementation ChipsChoiceExampleViewController {
MDCSemanticColorScheme *_colorScheme;
+ MDCChipView *_sizingChip;
}
- (void)loadView {
_colorScheme = [[MDCSemanticColorScheme alloc] init];
- CGSize estimatedItemSize = CGSizeMake(60, 33);
- CGRect collectionStartingRect = CGRectMake(0, 0, 100, estimatedItemSize.height);
+ // This is used to calculate the size of each chip based on the chip setup
+ _sizingChip = [[MDCChipView alloc] init];
- UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
- layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
- layout.minimumInteritemSpacing = 10.0f;
- layout.estimatedItemSize = estimatedItemSize;
+ // Our preferred CollectionView Layout For chips
+ MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init];
+ layout.minimumInteritemSpacing = 10;
- _collectionView = [[UICollectionView alloc] initWithFrame:collectionStartingRect
- collectionViewLayout:layout];
+ _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
+
+ // Since there is no scrolling turning off the delaysContentTouches makes the cells respond faster
+ _collectionView.delaysContentTouches = NO;
+
+ // Collection view setup
_collectionView.dataSource = self;
_collectionView.delegate = self;
_collectionView.backgroundColor = [UIColor whiteColor];
- _collectionView.delaysContentTouches = NO;
- _collectionView.clipsToBounds = NO;
+ _collectionView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
[_collectionView registerClass:[MDCChipCollectionViewCell class]
forCellWithReuseIdentifier:@"Cell"];
- (void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
- // increased the height so bottom slider doesn't overlap with chips
- _collectionView.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.frame), 45);
+ _collectionView.frame = self.view.bounds;
}
+
- (NSInteger)collectionView:(UICollectionView *)collectionView
numberOfItemsInSection:(NSInteger)section {
return self.titles.count;
cellForItemAtIndexPath:(NSIndexPath *)indexPath {
MDCChipCollectionViewCell *cell =
[collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
- cell.chipView.titleLabel.text = self.titles[indexPath.row];
- // Every other chip is stroked
- if (indexPath.row % 2) {
- [cell.chipView setBorderWidth:0 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:_colorScheme toChipView:cell.chipView];
- } else {
- [cell.chipView setBorderWidth:1 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:_colorScheme
- toStrokedChipView:cell.chipView];
- }
+ MDCChipView *chipView = cell.chipView;
+
+ // Customize Chip
+ chipView.titleLabel.text = self.titles[indexPath.row];
+
return cell;
}
+- (CGSize)collectionView:(UICollectionView *)collectionView
+ layout:(UICollectionViewLayout*)collectionViewLayout
+ sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
+
+ // The size of the chip depends on title here.
+ _sizingChip.titleLabel.text = self.titles[indexPath.row];
+ return [_sizingChip sizeThatFits:collectionView.bounds.size];
+}
+
- (NSArray *)titles {
if (!_titles) {
_titles = @[

MODIFY
components/Chips/examples/ChipsFilterExampleViewController.m
components/Chips/examples/ChipsFilterExampleViewController.m
_colorScheme = [[MDCSemanticColorScheme alloc] init];
+ // Our preferred CollectionView Layout For chips
MDCChipCollectionViewFlowLayout *layout = [[MDCChipCollectionViewFlowLayout alloc] init];
layout.minimumInteritemSpacing = 10;
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
+ // Filter chips should allow multiSelection, MDCChipCollectionViewCell manages the state of the
+ // chip accordingly.
+ _collectionView.allowsMultipleSelection = YES;
+
+ // Since there is no scrolling turning off the delaysContentTouches makes the cells respond faster
+ _collectionView.delaysContentTouches = NO;
+
+ // Collection view setup
_collectionView.dataSource = self;
_collectionView.delegate = self;
- _collectionView.allowsMultipleSelection = YES;
_collectionView.backgroundColor = [UIColor whiteColor];
- _collectionView.delaysContentTouches = NO;
_collectionView.contentInset = UIEdgeInsetsMake(4, 8, 4, 8);
[_collectionView registerClass:[MDCChipCollectionViewCell class]
forCellWithReuseIdentifier:@"Cell"];
+ // This is used to calculate the size of each chip based on the chip setup
_sizingChip = [[MDCChipView alloc] init];
[self.view addSubview:_collectionView];
cellForItemAtIndexPath:(NSIndexPath *)indexPath {
MDCChipCollectionViewCell *cell =
[collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
- cell.chipView.titleLabel.text = self.titles[indexPath.row];
- cell.chipView.selectedImageView.image = [self doneImage];
+ MDCChipView *chipView = cell.chipView;
+
+ // Customize Chip
+ chipView.titleLabel.text = self.titles[indexPath.row];
+ chipView.selectedImageView.image = [self doneImage];
cell.alwaysAnimateResize = YES;
- if (indexPath.row % 2) {
- [cell.chipView setBorderWidth:0 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:_colorScheme toChipView:cell.chipView];
- } else {
- [cell.chipView setBorderWidth:1 forState:UIControlStateNormal];
- [MDCChipViewColorThemer applySemanticColorScheme:_colorScheme
- toStrokedChipView:cell.chipView];
- }
+
return cell;
}
layout:(UICollectionViewLayout*)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
NSArray *selectedPaths = [collectionView indexPathsForSelectedItems];
+
+ // The size of the chip depends on title, image and selection state.
_sizingChip.selected = [selectedPaths containsObject:indexPath];
_sizingChip.titleLabel.text = self.titles[indexPath.row];
_sizingChip.selectedImageView.image = [self doneImage];
- (void)collectionView:(UICollectionView *)collectionView
didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
+ // Animating Chip Selection
[collectionView performBatchUpdates:nil completion:nil];
}
- (void)collectionView:(UICollectionView *)collectionView
didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
+ // Animating Chip Deselection
[collectionView performBatchUpdates:nil completion:nil];
}

MODIFY
components/Chips/examples/supplemental/ChipsExamplesSupplemental.h
components/Chips/examples/supplemental/ChipsExamplesSupplemental.h
@property(nonatomic, strong) UICollectionView *collectionView;
@end
+@interface ChipsActionExampleViewController : UIViewController
+ <UICollectionViewDelegate, UICollectionViewDataSource>
+@property(nonatomic, strong) NSArray<NSString *> *titles;
+@property(nonatomic, strong) UICollectionView *collectionView;
+@end
+
@interface ChipsCollectionExampleViewController : ExampleChipCollectionViewController
<UICollectionViewDelegate, UICollectionViewDataSource>
@property(nonatomic, strong) NSArray<NSString *> *titles;

MODIFY
components/Chips/examples/supplemental/ChipsExamplesSupplemental.m
components/Chips/examples/supplemental/ChipsExamplesSupplemental.m
@@ -88,6 +88,25 @@ static UIButton *DeleteButton() {
@end
+@interface ChipsActionExampleViewController (Supplemental)
+@end
+
+@implementation ChipsActionExampleViewController (Supplemental)
+
++ (NSArray *)catalogBreadcrumbs {
+ return @[ @"Chips", @"Action" ];
+}
+
++ (BOOL)catalogIsPrimaryDemo {
+ return NO;
+}
+
++ (BOOL)catalogIsPresentable {
+ return YES;
+}
+
+@end
+
@interface ChipsCollectionExampleViewController (Supplemental)
@end

MODIFY
components/Chips/src/MDCChipCollectionViewCell.h
components/Chips/src/MDCChipCollectionViewCell.h
/*
A collection view cell containing a single MDCChipView.
+ MDCChipCollectionViewCell manages the state of its chipView based on its own states.
+ E.g: setting the state of the cell to selected will automatically apply to its chipView as well.
*/
@interface MDCChipCollectionViewCell : UICollectionViewCell

[Chips] Adding Examples/Documentation for all chips types. (#3393)

* Added example for Action Chips Type.
Cleaned up/Documented the examples for Filter and Choice chips type.
Added More documentation to MDCChipCollectionViewCell.

* typo.

PR: https://github.com/material-components/material-components-ios/pull/3393