To get the same result as seen in the screenshot, just replace the code in the “initWithWidth…” section of the AppScaffold project with the following:

 // Make a light gray background
 self.color = SP_COLOR(130, 130, 130);
 
 // Create a red large box ... 
 SPSprite *parentBox = [SPSprite sprite];
 [self addChild:parentBox];
 SPImage *image = [SPImage imageWithContentsOfFile:@"parent-box.png"];
 [parentBox addChild:image];
 // ... and add it to the background
 [self addChild:parentBox];
 
 // Align this red box to ...
 [parentBox vAlign:1 offsetPx:-10]; // ...bottom -10px
 [parentBox hAlign:1 offsetPx:-10]; // ...and right -10px
 
 // Create a group sprite and add 3 yellow child boxes
 SPSprite *childBoxesGroup = [SPSprite sprite];
 [parentBox addChild:childBoxesGroup];
 
 // Box 1
 SPImage *childImage;
 childImage = [SPImage imageWithContentsOfFile:@"child-box.png"];
 [childBoxesGroup addChild:childImage];
 // Box 2        
 childImage = [SPImage imageWithContentsOfFile:@"child-box.png"];
 [childBoxesGroup addChild:childImage];
 // Box 3 
 childImage = [SPImage imageWithContentsOfFile:@"child-box.png"];
 [childBoxesGroup addChild:childImage];
 
 // Align all child boxes vertical from top to bottom with a gap of 10px
 [childBoxesGroup vAlignChildren:0 offsetPx:-10 gap:10]; 
 // The above line is a shortcut for this:
 // [childBoxesGroup vArrangeChildrenWithGap:10];
 // [childBoxesGroup vAlign:0 offsetPx:-10];
 
 [childBoxesGroup hAlign:0 offsetPx:-10]; // align left -10px

Make sure to import “SPDisplayObject+Alignable.h” and “SPDisplayObject+Alignable.h” to your project.

These are the original PNGs: parentbox.png childbox.png

• 2011/06/07 23:35: First public version
• 2011/06/09 21:00: pivotX/Y now recognized in alignment; selectors for aligning pivotX and pivotY; changed code style

No comments so far. Feel free to edit this part of the page.