Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
extensions:alignable-objects [2011/06/12 12:31]
jugibur [Usage]
extensions:alignable-objects [2015/09/14 11:15] (current)
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 (external edit)
 
Powered by DokuWiki