Skip to content

Commit 5cd7b82

Browse files
andrewovertonmaterial-automation
andrewoverton
authored and
material-automation
committed
[Material-iOS/Chips] Extract clear button from MDCChipField
PiperOrigin-RevId: 369654054
1 parent 9638b0b commit 5cd7b82

File tree

4 files changed

+228
-138
lines changed

4 files changed

+228
-138
lines changed

‎components/Chips/src/MDCChipField.m

Lines changed: 3 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
#import <MDFInternationalization/MDFInternationalization.h>
1919

2020
#import "MDCChipFieldDelegate.h"
21+
#import "MDCChipViewDeleteButton.h"
2122
#import "MaterialTextFields.h"
2223

2324
NSString *const MDCEmptyTextString = @"";
@@ -28,8 +29,6 @@
2829
static const CGFloat MDCChipFieldIndent = 4;
2930
static const CGFloat MDCChipFieldHorizontalMargin = 8;
3031
static const CGFloat MDCChipFieldVerticalMargin = 8;
31-
static const CGFloat MDCChipFieldClearButtonSquareWidthHeight = 24;
32-
static const CGFloat MDCChipFieldClearImageSquareWidthHeight = 18;
3332
static const UIKeyboardType MDCChipFieldDefaultKeyboardType = UIKeyboardTypeEmailAddress;
3433

3534
const CGFloat MDCChipFieldDefaultMinTextFieldWidth = 44;
@@ -377,147 +376,13 @@ - (void)createNewChipFromInput {
377376
}
378377

379378
- (void)addClearButtonToChip:(MDCChipView *)chip {
380-
UIControl *clearButton = [[UIControl alloc] init];
381-
CGFloat clearButtonWidthAndHeight = MDCChipFieldClearButtonSquareWidthHeight;
382-
clearButton.frame = CGRectMake(0, 0, clearButtonWidthAndHeight, clearButtonWidthAndHeight);
383-
clearButton.layer.cornerRadius = clearButtonWidthAndHeight / 2;
384-
UIImageView *clearImageView = [[UIImageView alloc] initWithImage:[self drawClearButton]];
385-
CGFloat widthAndHeight = MDCChipFieldClearImageSquareWidthHeight;
386-
CGFloat padding =
387-
(MDCChipFieldClearButtonSquareWidthHeight - MDCChipFieldClearImageSquareWidthHeight) / 2;
388-
clearImageView.frame = CGRectMake(padding, padding, widthAndHeight, widthAndHeight);
389-
clearButton.tintColor = [UIColor.blackColor colorWithAlphaComponent:(CGFloat)0.6];
390-
[clearButton addSubview:clearImageView];
379+
MDCChipViewDeleteButton *clearButton = [[MDCChipViewDeleteButton alloc] init];
391380
chip.accessoryView = clearButton;
392381
[clearButton addTarget:self
393382
action:@selector(deleteChip:)
394383
forControlEvents:UIControlEventTouchUpInside];
395384
}
396385

397-
- (UIImage *)drawClearButton {
398-
CGSize clearButtonSize =
399-
CGSizeMake(MDCChipFieldClearImageSquareWidthHeight, MDCChipFieldClearImageSquareWidthHeight);
400-
401-
CGRect bounds = CGRectMake(0, 0, clearButtonSize.width, clearButtonSize.height);
402-
UIGraphicsBeginImageContextWithOptions(bounds.size, false, 0);
403-
[UIColor.grayColor setFill];
404-
[MDCPathForClearButtonImageFrame(bounds) fill];
405-
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
406-
UIGraphicsEndImageContext();
407-
408-
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
409-
return image;
410-
}
411-
412-
static inline UIBezierPath *MDCPathForClearButtonImageFrame(CGRect frame) {
413-
// GENERATED CODE
414-
415-
CGRect innerBounds =
416-
CGRectMake(CGRectGetMinX(frame) + 2, CGRectGetMinY(frame) + 2,
417-
floor((frame.size.width - 2) * (CGFloat)0.90909 + (CGFloat)0.5),
418-
floor((frame.size.height - 2) * (CGFloat)0.90909 + (CGFloat)0.5));
419-
UIBezierPath *ic_clear_path = [UIBezierPath bezierPath];
420-
[ic_clear_path moveToPoint:CGPointMake(CGRectGetMinX(innerBounds) +
421-
(CGFloat)0.50000 * innerBounds.size.width,
422-
CGRectGetMinY(innerBounds) + 0 * innerBounds.size.height)];
423-
[ic_clear_path
424-
addCurveToPoint:CGPointMake(
425-
CGRectGetMinX(innerBounds) + 1 * innerBounds.size.width,
426-
CGRectGetMinY(innerBounds) + (CGFloat)0.50000 * innerBounds.size.height)
427-
controlPoint1:CGPointMake(
428-
CGRectGetMinX(innerBounds) + (CGFloat)0.77600 * innerBounds.size.width,
429-
CGRectGetMinY(innerBounds) + 0 * innerBounds.size.height)
430-
controlPoint2:CGPointMake(
431-
CGRectGetMinX(innerBounds) + 1 * innerBounds.size.width,
432-
CGRectGetMinY(innerBounds) + (CGFloat)0.22400 * innerBounds.size.height)];
433-
[ic_clear_path
434-
addCurveToPoint:CGPointMake(
435-
CGRectGetMinX(innerBounds) + (CGFloat)0.50000 * innerBounds.size.width,
436-
CGRectGetMinY(innerBounds) + 1 * innerBounds.size.height)
437-
controlPoint1:CGPointMake(
438-
CGRectGetMinX(innerBounds) + 1 * innerBounds.size.width,
439-
CGRectGetMinY(innerBounds) + (CGFloat)0.77600 * innerBounds.size.height)
440-
controlPoint2:CGPointMake(
441-
CGRectGetMinX(innerBounds) + (CGFloat)0.77600 * innerBounds.size.width,
442-
CGRectGetMinY(innerBounds) + 1 * innerBounds.size.height)];
443-
[ic_clear_path
444-
addCurveToPoint:CGPointMake(
445-
CGRectGetMinX(innerBounds) + 0 * innerBounds.size.width,
446-
CGRectGetMinY(innerBounds) + (CGFloat)0.50000 * innerBounds.size.height)
447-
controlPoint1:CGPointMake(
448-
CGRectGetMinX(innerBounds) + (CGFloat)0.22400 * innerBounds.size.width,
449-
CGRectGetMinY(innerBounds) + 1 * innerBounds.size.height)
450-
controlPoint2:CGPointMake(
451-
CGRectGetMinX(innerBounds) + 0 * innerBounds.size.width,
452-
CGRectGetMinY(innerBounds) + (CGFloat)0.77600 * innerBounds.size.height)];
453-
[ic_clear_path
454-
addCurveToPoint:CGPointMake(
455-
CGRectGetMinX(innerBounds) + (CGFloat)0.50000 * innerBounds.size.width,
456-
CGRectGetMinY(innerBounds) + 0 * innerBounds.size.height)
457-
controlPoint1:CGPointMake(
458-
CGRectGetMinX(innerBounds) + 0 * innerBounds.size.width,
459-
CGRectGetMinY(innerBounds) + (CGFloat)0.22400 * innerBounds.size.height)
460-
controlPoint2:CGPointMake(
461-
CGRectGetMinX(innerBounds) + (CGFloat)0.22400 * innerBounds.size.width,
462-
CGRectGetMinY(innerBounds) + 0 * innerBounds.size.height)];
463-
[ic_clear_path closePath];
464-
[ic_clear_path
465-
moveToPoint:CGPointMake(
466-
CGRectGetMinX(innerBounds) + (CGFloat)0.73417 * innerBounds.size.width,
467-
CGRectGetMinY(innerBounds) + (CGFloat)0.31467 * innerBounds.size.height)];
468-
[ic_clear_path
469-
addLineToPoint:CGPointMake(
470-
CGRectGetMinX(innerBounds) + (CGFloat)0.68700 * innerBounds.size.width,
471-
CGRectGetMinY(innerBounds) + (CGFloat)0.26750 * innerBounds.size.height)];
472-
[ic_clear_path
473-
addLineToPoint:CGPointMake(
474-
CGRectGetMinX(innerBounds) + (CGFloat)0.50083 * innerBounds.size.width,
475-
CGRectGetMinY(innerBounds) + (CGFloat)0.45367 * innerBounds.size.height)];
476-
[ic_clear_path
477-
addLineToPoint:CGPointMake(
478-
CGRectGetMinX(innerBounds) + (CGFloat)0.31467 * innerBounds.size.width,
479-
CGRectGetMinY(innerBounds) + (CGFloat)0.26750 * innerBounds.size.height)];
480-
[ic_clear_path
481-
addLineToPoint:CGPointMake(
482-
CGRectGetMinX(innerBounds) + (CGFloat)0.26750 * innerBounds.size.width,
483-
CGRectGetMinY(innerBounds) + (CGFloat)0.31467 * innerBounds.size.height)];
484-
[ic_clear_path
485-
addLineToPoint:CGPointMake(
486-
CGRectGetMinX(innerBounds) + (CGFloat)0.45367 * innerBounds.size.width,
487-
CGRectGetMinY(innerBounds) + (CGFloat)0.50083 * innerBounds.size.height)];
488-
[ic_clear_path
489-
addLineToPoint:CGPointMake(
490-
CGRectGetMinX(innerBounds) + (CGFloat)0.26750 * innerBounds.size.width,
491-
CGRectGetMinY(innerBounds) + (CGFloat)0.68700 * innerBounds.size.height)];
492-
[ic_clear_path
493-
addLineToPoint:CGPointMake(
494-
CGRectGetMinX(innerBounds) + (CGFloat)0.31467 * innerBounds.size.width,
495-
CGRectGetMinY(innerBounds) + (CGFloat)0.73417 * innerBounds.size.height)];
496-
[ic_clear_path
497-
addLineToPoint:CGPointMake(
498-
CGRectGetMinX(innerBounds) + (CGFloat)0.50083 * innerBounds.size.width,
499-
CGRectGetMinY(innerBounds) + (CGFloat)0.54800 * innerBounds.size.height)];
500-
[ic_clear_path
501-
addLineToPoint:CGPointMake(
502-
CGRectGetMinX(innerBounds) + (CGFloat)0.68700 * innerBounds.size.width,
503-
CGRectGetMinY(innerBounds) + (CGFloat)0.73417 * innerBounds.size.height)];
504-
[ic_clear_path
505-
addLineToPoint:CGPointMake(
506-
CGRectGetMinX(innerBounds) + (CGFloat)0.73417 * innerBounds.size.width,
507-
CGRectGetMinY(innerBounds) + (CGFloat)0.68700 * innerBounds.size.height)];
508-
[ic_clear_path
509-
addLineToPoint:CGPointMake(
510-
CGRectGetMinX(innerBounds) + (CGFloat)0.54800 * innerBounds.size.width,
511-
CGRectGetMinY(innerBounds) + (CGFloat)0.50083 * innerBounds.size.height)];
512-
[ic_clear_path
513-
addLineToPoint:CGPointMake(
514-
CGRectGetMinX(innerBounds) + (CGFloat)0.73417 * innerBounds.size.width,
515-
CGRectGetMinY(innerBounds) + (CGFloat)0.31467 * innerBounds.size.height)];
516-
[ic_clear_path closePath];
517-
518-
return ic_clear_path;
519-
}
520-
521386
- (void)deleteChip:(id)sender {
522387
UIControl *deleteButton = (UIControl *)sender;
523388
MDCChipView *chip = (MDCChipView *)deleteButton.superview;
@@ -762,7 +627,7 @@ - (CGFloat)textInputDesiredWidth {
762627
context:nil];
763628
return MAX(placeholderDesiredWidth, CGRectGetWidth(desiredRect) + MDCChipFieldHorizontalMargin +
764629
self.contentEdgeInsets.right +
765-
MDCChipFieldClearImageSquareWidthHeight);
630+
[MDCChipViewDeleteButton imageSideLength]);
766631
}
767632

768633
- (CGFloat)placeholderDesiredWidth {

‎components/Chips/src/MDCChipViewDeleteButton.h

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
// Copyright 2021-present the Material Components for iOS authors. All Rights Reserved.
2+
//
3+
// Licensed under the Apache License, Version 2.0 (the "License");
4+
// you may not use this file except in compliance with the License.
5+
// You may obtain a copy of the License at
6+
//
7+
// http://www.apache.org/licenses/LICENSE-2.0
8+
//
9+
// Unless required by applicable law or agreed to in writing, software
10+
// distributed under the License is distributed on an "AS IS" BASIS,
11+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12+
// See the License for the specific language governing permissions and
13+
// limitations under the License.
14+
15+
#import <UIKit/UIKit.h>
16+
17+
/*
18+
A Material chip delete button. This is used by @c MDCChipField, but can also be used in any @c
19+
MDCChipView by setting it as its @c accessoryView.
20+
*/
21+
@interface MDCChipViewDeleteButton : UIButton
22+
23+
/*
24+
The length of the sides of the image view that displays the circular X.
25+
*/
26+
+ (CGFloat)imageSideLength;
27+
28+
@end

0 commit comments

Comments
 (0)