Convert XM sample to be like the iOS one

This commit is contained in:
Chris Hamons
2016-12-16 14:12:11 -06:00
parent 59e950f41b
commit 9dbb032d5b

View File

@@ -1,4 +1,5 @@
using System; //#define DEBUG_LAYOUT
using System;
using AppKit; using AppKit;
using Foundation; using Foundation;
@@ -8,14 +9,34 @@ namespace Facebook.Yoga.Mac.Test
{ {
public static class NSViewYogaExtensions public static class NSViewYogaExtensions
{ {
public static void ApplyYogaLayout(this NSView view, YogaNode n) public static void ApplyYogaLayout (this NSView view, YogaNode n, bool root = true)
{ {
view.Frame = new CGRect(n.LayoutX, n.LayoutY, n.LayoutWidth, n.LayoutHeight); #if DEBUG_LAYOUT
Console.WriteLine ($"ApplyYogaLayout {view.ToolTip}, {n.LayoutX}, {n.LayoutY}, {n.LayoutWidth}, {n.LayoutHeight}");
#endif
// A bit of gross special casing
// This really should mostly go away if/when the UIView+Yoga.m magic gets ported to AppKit
if (root)
view.Frame = new CGRect (n.LayoutX, n.LayoutY, n.LayoutWidth, n.LayoutHeight);
#if DEBUG_LAYOUT
Console.WriteLine ($"Setting {view.ToolTip} frame to {view.Frame}");
#endif
// This assumes your YogaNode and NSView children were inserted in same order // This assumes your YogaNode and NSView children were inserted in same order
for (int i = 0; i < n.Count; ++i) { for (int i = 0; i < n.Count; ++i) {
YogaNode childNode = n[i]; YogaNode childNode = n[i];
// Cocoa coord space is from bottom left not top left // Cocoa coord space is from bottom left not top left
view.Subviews[i].Frame = new CGRect (childNode.LayoutX, n.LayoutHeight - childNode.LayoutY - childNode.LayoutHeight, childNode.LayoutWidth, childNode.LayoutHeight); view.Subviews[i].Frame = new CGRect (childNode.LayoutX, n.LayoutHeight - childNode.LayoutY - childNode.LayoutHeight, childNode.LayoutWidth, childNode.LayoutHeight);
#if DEBUG_LAYOUT
Console.WriteLine ($"Setting {view.Subviews[i].ToolTip} frame to {view.Subviews[i].Frame}");
#endif
if (childNode.Count > 0){
#if DEBUG_LAYOUT
Console.WriteLine ($"Calling ApplyYogaLayout recursively on {view.Subviews[i].ToolTip}");
#endif
ApplyYogaLayout (view.Subviews[i], childNode, false);
}
} }
} }
} }
@@ -33,8 +54,7 @@ namespace Facebook.Yoga.Mac.Test
NSImage image = NSImage.ImageNamed (NSImageName.TrashFull); NSImage image = NSImage.ImageNamed (NSImageName.TrashFull);
NSView root = CreateViewHierarchy (image); NSView root = CreateViewHierarchy (image);
var rootNode = CalculateLayout (View.Frame, image.Size);
var rootNode = CalculateLayout (image.Size);
root.ApplyYogaLayout (rootNode); root.ApplyYogaLayout (rootNode);
@@ -43,41 +63,64 @@ namespace Facebook.Yoga.Mac.Test
static NSView CreateViewHierarchy (NSImage image) static NSView CreateViewHierarchy (NSImage image)
{ {
var root = new NSView (); var root = new NSView () {
NSImageView imageView = new NSImageView () { WantsLayer = true,
Image = image ToolTip = "Root"
}; };
root.AddSubview (imageView); root.Layer.BackgroundColor = NSColor.Red.CGColor;
NSTextView text = new NSTextView () { NSView child1 = new NSView () {
Value = "Hello World", WantsLayer = true,
ToolTip = "Child 1"
}; };
root.AddSubview (text); child1.Layer.BackgroundColor = NSColor.Blue.CGColor;
NSView child2 = new NSView () {
WantsLayer = true,
ToolTip = "Child 2"
};
child2.Layer.BackgroundColor = NSColor.Green.CGColor;
NSView child3 = new NSView () {
WantsLayer = true,
ToolTip = "Child 3"
};
child3.Layer.BackgroundColor = NSColor.Yellow.CGColor;
root.AddSubview (child1);
root.AddSubview (child2);
child2.AddSubview (child3);
return root; return root;
} }
static YogaNode CalculateLayout (CGSize imageSize) static YogaNode CalculateLayout (CGRect rootFrame, CGSize imageSize)
{ {
var rootNode = new YogaNode () { var rootNode = new YogaNode () {
Width = 400, Width = (float)rootFrame.Width,
Height = 120, Height = (float)rootFrame.Height,
FlexDirection = YogaFlexDirection.Row AlignItems = YogaAlign.Center,
JustifyContent = YogaJustify.Center
}; };
rootNode.SetPadding (YogaEdge.All, 20);
var imageNode = new YogaNode () { var child1Node = new YogaNode () {
Width = (float)imageSize.Width, Width = 100,
Height = (float)imageSize.Height, Height = 100
}; };
imageNode.SetMargin (YogaEdge.End, 20);
var textNode = new YogaNode () { var child2Node = new YogaNode () {
AlignSelf = YogaAlign.Center, Width = 200,
FlexGrow = 1, Height = 100
Height = 60,
}; };
rootNode.Insert (0, imageNode);
rootNode.Insert (1, textNode); var child3Node = new YogaNode () {
Width = 100,
Height = 100
};
rootNode.Insert (0, child1Node);
rootNode.Insert (1, child2Node);
child2Node.Insert (0, child3Node);
rootNode.CalculateLayout (); rootNode.CalculateLayout ();
return rootNode; return rootNode;