4b61cdccea
Summary:
When dealing with manual sizing in UIView's (or UIKit in general) we see a common pattern like so:
Below we have an example implementation of a view with two Labels that want to be stacked horizontally. If we don't pass a second string, we hide the second label and give up the available space to the first label. See below:
```
interface TitleSubtitleView : UIView
- (void)configureWithTitle:(NSString *)title subtitle:(NSString *)subtitle;
end
implementation {
UILabel *_titleLabel;
UILabel *_subtitleLabel;
}
....
- (void)configureWithTitle:(NSString *)title subtitle:(NSString *)subtitle {
_titleLabel.text = title;
if (subtitle.length > 0) {
_subtitleLabel.hidden = NO;
_subtitleLabel.text = subtitle;
} else {
_subtitleLabel.hidden = YES;
}
}
- (CGSize)sizeThatFits:(CGSize)size {
const CGSize titleSize = [_titleLabel sizeThatFits:size];
CGSize subtitleSize = CGSizeZero;
if (!_subtitleLabel.isHidden) {
subtitleSize = [_subtitleSize sizeThatFits:CGSizeMake(size.width - titleSize.width, size.height - titleSize.height)];
}
}
- (void)layoutSubviews {
[super layoutSubviews];
const CGSize titleSize = [_titleLabel sizeThatFits:size];
_titleLabel.frame = CGRectMake(0, 0, titleSize.width, titleSize.height);
if (!_subtitleLabel.isHidden) {
subtitleSize = [_subtitleSize sizeThatFits:CGSizeMake(size.width - titleSize.width, size.height - titleSize.height)];
_subtitleLabel.frame = CGRectMake(CGRectGetMaxX(_titleLabel.frame), 0, subtitleSize.width, subtitleSize.height);
}
}
```
The problem is with the CSSLayout framework, as long as your view is in hierarchy, it's going to be allocated space during layout calculation. The only way to fix the view above would be to completely remove it from view hierarchy if it isn't being used. The problem is that adding/removing views from hierarchy is much less performant than hiding.
As a result, we need a way to tell the CSSLayoutKit library that even though a view is in hierarchy, we don't want to include it in layout. With this diff, we could change the class to look like this:
```
interface TitleSubtitleView : UIView
- (void)configureWithTitle:(NSString *)title subtitle:(NSString *)subtitle;
end
implementation {
UILabel *_titleLabel;
UILabel *_subtitleLabel;
}
....
- (void)configureWithTitle:(NSString *)title subtitle:(NSString *)subtitle {
_titleLabel.text = title;
_subtitleLabel.text = subtitle;
const BOOL subtitleHasText = subtitle.length > 0;
_subtitleLabel.hidden = !subtitleHasText;
[_subtitleLabel css_includeInLayout:!subtitleHasText];
}
- (CGSize)sizeThatFits:(CGSize)size {
const intrinsicSize = [self css_intrinsicSize];
return CGSizeMake(MIN(size.width, intrinsicSize.width), MIN(size.height, intrinsicSize.height)));
}
- (void)layoutSubviews {
[super layoutSubviews];
[self css_applyLayout];
}
```
Reviewed By: emilsjolander
Differential Revision: D4189897
fbshipit-source-id: 403d11d84d47691e3ce0b5ac18a180b0e4c104c4
65 lines
2.2 KiB
Objective-C
65 lines
2.2 KiB
Objective-C
/**
|
|
* Copyright (c) 2014-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*/
|
|
|
|
#import <UIKit/UIKit.h>
|
|
#import <CSSLayout/CSSLayout.h>
|
|
|
|
@interface UIView (CSSLayout)
|
|
|
|
/**
|
|
The property that decides if we should include this view when calculating layout. Defaults to YES.
|
|
*/
|
|
@property (nonatomic, readwrite, assign, setter=css_setIncludeInLayout:) BOOL css_includeInLayout;
|
|
|
|
/**
|
|
The property that decides during layout/sizing whether or not css_* properties should be applied. Defaults to NO.
|
|
*/
|
|
@property (nonatomic, readwrite, assign, setter=css_setUsesFlexbox:) BOOL css_usesFlexbox;
|
|
|
|
- (void)css_setDirection:(CSSDirection)direction;
|
|
- (void)css_setFlexDirection:(CSSFlexDirection)flexDirection;
|
|
- (void)css_setJustifyContent:(CSSJustify)justifyContent;
|
|
- (void)css_setAlignContent:(CSSAlign)alignContent;
|
|
- (void)css_setAlignItems:(CSSAlign)alignItems;
|
|
- (void)css_setAlignSelf:(CSSAlign)alignSelf;
|
|
- (void)css_setPositionType:(CSSPositionType)positionType;
|
|
- (void)css_setFlexWrap:(CSSWrap)flexWrap;
|
|
|
|
- (void)css_setFlexGrow:(CGFloat)flexGrow;
|
|
- (void)css_setFlexShrink:(CGFloat)flexShrink;
|
|
- (void)css_setFlexBasis:(CGFloat)flexBasis;
|
|
|
|
- (void)css_setPosition:(CGFloat)position forEdge:(CSSEdge)edge;
|
|
- (void)css_setMargin:(CGFloat)margin forEdge:(CSSEdge)edge;
|
|
- (void)css_setPadding:(CGFloat)padding forEdge:(CSSEdge)edge;
|
|
|
|
- (void)css_setWidth:(CGFloat)width;
|
|
- (void)css_setHeight:(CGFloat)height;
|
|
- (void)css_setMinWidth:(CGFloat)minWidth;
|
|
- (void)css_setMinHeight:(CGFloat)minHeight;
|
|
- (void)css_setMaxWidth:(CGFloat)maxWidth;
|
|
- (void)css_setMaxHeight:(CGFloat)maxHeight;
|
|
|
|
/**
|
|
Get the resolved direction of this node. This won't be CSSDirectionInherit
|
|
*/
|
|
- (CSSDirection)css_resolvedDirection;
|
|
|
|
/**
|
|
Perform a layout calculation and update the frames of the views in the hierarchy with th results
|
|
*/
|
|
- (void)css_applyLayout;
|
|
|
|
/**
|
|
Returns the size of the view if no constraints were given. This could equivalent to calling [self sizeThatFits:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX)];
|
|
*/
|
|
- (CGSize)css_intrinsicSize;
|
|
|
|
@end
|