Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
extensions:alignable-objects [2011/07/15 15:52] – [Data entry] jugiburextensions:alignable-objects [2015/09/14 11:15] (current) – external edit 127.0.0.1
Line 1: Line 1:
 +~~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.//
  extensions/alignable-objects.txt · Last modified: 2015/09/14 11:15 by 127.0.0.1
 
Powered by DokuWiki