Convert XM sample to be like the iOS one
This commit is contained in:
@@ -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;
|
||||||
|
Reference in New Issue
Block a user