DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Add flag to not include view in layout.

Browse Source 
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
This commit is contained in:
Dustin Shahidehpour
2016-11-17 08:32:37 -08:00
committed by Facebook Github Bot
parent b9c4c403a9
commit 4b61cdccea
3 changed files with 108 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
CSSLayoutKit/Tests/CSSLayoutKitTests.m
View File

@@ -125,4 +125,78 @@
XCTAssertEqual(containerSize.width, totalWidth, @"The container's width is %.6f, the subviews take up %.6f", containerSize.width, totalWidth);
}
- (void)testThatWeRespectIncludeInLayoutFlag
{
const CGSize containerSize = CGSizeMake(300, 50);
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0, 0, containerSize.width, containerSize.height)];
[container css_setUsesFlexbox:YES];
[container css_setFlexDirection:CSSFlexDirectionRow];
UIView *subview1 = [[UIView alloc] initWithFrame:CGRectZero];
[subview1 css_setUsesFlexbox:YES];
[subview1 css_setFlexGrow:1];
[container addSubview:subview1];
UIView *subview2 = [[UIView alloc] initWithFrame:CGRectZero];
[subview2 css_setUsesFlexbox:YES];
[subview2 css_setFlexGrow:1];
[container addSubview:subview2];
UIView *subview3 = [[UIView alloc] initWithFrame:CGRectZero];
[subview3 css_setUsesFlexbox:YES];
[subview3 css_setFlexGrow:1];
[container addSubview:subview3];
[container css_applyLayout];
for (UIView *view in container.subviews) {
XCTAssertTrue(CGSizeEqualToSize(CGSizeMake(100, 50), subview1.bounds.size), @"Actual size is %@", NSStringFromCGSize(view.bounds.size));
}
[subview3 css_setIncludeInLayout:NO];
[container css_applyLayout];
XCTAssertTrue(CGSizeEqualToSize(CGSizeMake(150, 50), subview1.bounds.size), @"Actual size is %@", NSStringFromCGSize(subview1.bounds.size));
XCTAssertTrue(CGSizeEqualToSize(CGSizeMake(150, 50), subview2.bounds.size), @"Actual size is %@", NSStringFromCGSize(subview2.bounds.size));
// We don't set the frame to zero, so, it should be set to what it was previously at.
XCTAssertTrue(CGSizeEqualToSize(CGSizeMake(100, 50), subview3.bounds.size), @"Actual size is %@", NSStringFromCGSize(subview3.bounds.size));
}
- (void)testThatViewNotIncludedInFirstLayoutPassAreIncludedInSecond
{
UIView *container = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 300, 50)];
[container css_setUsesFlexbox:YES];
[container css_setFlexDirection:CSSFlexDirectionRow];
UIView *subview1 = [[UIView alloc] initWithFrame:CGRectZero];
[subview1 css_setUsesFlexbox:YES];
[subview1 css_setFlexGrow:1];
[container addSubview:subview1];
UIView *subview2 = [[UIView alloc] initWithFrame:CGRectZero];
[subview2 css_setUsesFlexbox:YES];
[subview2 css_setFlexGrow:1];
[container addSubview:subview2];
UIView *subview3 = [[UIView alloc] initWithFrame:CGRectZero];
[subview3 css_setUsesFlexbox:YES];
[subview3 css_setFlexGrow:1];
[subview3 css_setIncludeInLayout:NO];
[container addSubview:subview3];
[container css_applyLayout];
XCTAssertTrue(CGSizeEqualToSize(CGSizeMake(150, 50), subview1.bounds.size), @"Actual size is %@", NSStringFromCGSize(subview1.bounds.size));
XCTAssertTrue(CGSizeEqualToSize(CGSizeMake(150, 50), subview2.bounds.size), @"Actual size is %@", NSStringFromCGSize(subview2.bounds.size));
XCTAssertTrue(CGSizeEqualToSize(CGSizeZero, subview3.bounds.size), @"Actual size %@", NSStringFromCGSize(subview3.bounds.size));
[subview3 css_setIncludeInLayout:YES];
[container css_applyLayout];
for (UIView *view in container.subviews) {
XCTAssertTrue(CGSizeEqualToSize(CGSizeMake(100, 50), subview1.bounds.size), @"Actual size is %@", NSStringFromCGSize(view.bounds.size));
}
}
@end

5
CSSLayoutKit/UIView+CSSLayout.h
View File

@@ -12,6 +12,11 @@
@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.
*/

33
CSSLayoutKit/UIView+CSSLayout.m
View File

@@ -39,8 +39,23 @@
return [usesFlexbox boolValue];
}
- (BOOL)css_includeInLayout
{
NSNumber *includeInLayout = objc_getAssociatedObject(self, @selector(css_includeInLayout));
return (includeInLayout != nil) ? [includeInLayout boolValue] : YES;
}
#pragma mark - Setters
- (void)css_setIncludeInLayout:(BOOL)includeInLayout
{
objc_setAssociatedObject(
self,
@selector(css_includeInLayout),
@(includeInLayout),
OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
- (void)css_setUsesFlexbox:(BOOL)enabled
{
objc_setAssociatedObject(
@@ -261,17 +276,24 @@ static void CSSAttachNodesFromViewHierachy(UIView *view) {
} else {
CSSNodeSetMeasureFunc(node, NULL);
NSUInteger numSubviewsInLayout = 0;
// Add any children which were added since the last call to css_applyLayout
for (NSUInteger i = 0; i < view.subviews.count; i++) {
CSSNodeRef childNode = [view.subviews[i] cssNode];
UIView *const subview = view.subviews[i];
if (![subview css_includeInLayout]) {
continue;
}
numSubviewsInLayout++;
CSSNodeRef childNode = [subview cssNode];
if (CSSNodeChildCount(node) < i + 1 || CSSNodeGetChild(node, i) != childNode) {
CSSNodeInsertChild(node, childNode, i);
}
CSSAttachNodesFromViewHierachy(view.subviews[i]);
CSSAttachNodesFromViewHierachy(subview);
}
// Remove any children which were removed since the last call to css_applyLayout
while (view.subviews.count < CSSNodeChildCount(node)) {
while (numSubviewsInLayout < CSSNodeChildCount(node)) {
CSSNodeRemoveChild(node, CSSNodeGetChild(node, CSSNodeChildCount(node) - 1));
}
}
@@ -290,8 +312,11 @@ static CGFloat CSSRoundPixelValue(CGFloat value)
static void CSSApplyLayoutToViewHierarchy(UIView *view) {
NSCAssert([NSThread isMainThread], @"Framesetting should only be done on the main thread.");
CSSNodeRef node = [view cssNode];
if (![view css_includeInLayout]) {
return;
}
CSSNodeRef node = [view cssNode];
const CGPoint topLeft = {
CSSNodeLayoutGetLeft(node),
CSSNodeLayoutGetTop(node),