~~NOTOC~~

====== Alignable-objects ======

---- dataentry extension ----
type          : extension
author_mail   : juergen.hoefs@web.de Jürgen Höfs
description   : Categories to align every SPDisplayObject and arrange children in a SPDisplayObjectContainer
lastupdate_dt : 2011-07-15
compatible    : v1.2
depends       : 
tags          : alignable, arranging, aligning
homepage_url  : https://gist.github.com/224ef2d4ae597df2e94d
download_url  : https://gist.github.com/gists/224ef2d4ae597df2e94d/download
----

===== Usage =====

{{http://img819.imageshack.us/img819/4667/screenshotarv.png?200|}}

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:

<code objc> 
 // 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
</code>

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

These are the original PNGs:
{{http://img12.imageshack.us/img12/4930/parentbox.png?linkonly|}}
{{http://img585.imageshack.us/img585/5447/childbox.png?linkonly|}}
===== Changelog =====

  * //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
===== Source Code =====

%gist(224ef2d4ae597df2e94d)%

===== Discussion =====

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