AS3でオブジェクトをステージ上に相対配置する「RelativeLayout」クラス

download web ActionScript3.0

RelativeLayout
RelativeLayout
ActionScript3.0でオブジェクトをステージ上に相対配置する﹁RelativeLayout﹂クラスを作成しました。
ウィンドウ／ステージリサイズ時にクラスを呼び出すことで、オブジェクトを﹁中央﹂や﹁下付き﹂、﹁右付き﹂等に変更できます。オブジェクトの座標やサイズの変更も可能です。
ご使用の際は、ステージの伸縮を﹁拡大・縮小なし﹂、ステージの位置を﹁左上﹂に設定し、ステージリサイズ時のイベントリスナーを登録する必要があります。
下記のボタンより、サンプルの閲覧およびソースのダウンロードができます。
Sample　Download
︻使用例︼


center_mc(MovieClip)をステージの中央に配置
 



RelativeLayout.setPos(stage, center_mc);



righttop_mc(MovieClip)をステージの右上に配置
 



RelativeLayout.setPos(stage, righttop_mc, "rt");



rightbottom_mc(MovieClip)をステージの右下へ、画面端(下)から24ピクセルの間隔を持って配置
 



RelativeLayout.setPos(stage, rightbottom_mc, "rb", 0, 24);



leftbottom_mc(MovieClip)をステージの左下へ、オブジェクトの横幅・縦幅を24ピクセルに強制指定して配置
 



RelativeLayout.setPos(stage, leftbottom_mc, "lb", 0, 0, 24, 24);



resize_mc(MovieClip)の横幅をステージの横幅に合わせる
 



RelativeLayout.resize(resize_mc, stage.stageWidth);



resize_mc(MovieClip)の横幅・縦幅をステージの横幅・縦幅に合わせる
 



RelativeLayout.resize(resize_mc, stage.stageWidth, stage.stageWidth);



point_mc(MovieClip)を、左から50ピクセル、上から100ピクセルの場所へ配置する
 



RelativeLayout.point(point_mc, 50, 100);



rect_mc(MovieClip)を、左から50ピクセル、上から100ピクセルの場所へ配置し、サイズを 240*400ピクセルに変更する
 



RelativeLayout.rect(rect_mc, 50, 100, 240, 400);


︻オブジェクト配置場所︼
 





中央 : "center"or"cm"

上　 : "top"or"ct"

右　 : "right"or"rm"

下　 : "bottom"or"cb"

左　 : "left"or"lm"

右上 : "righttop"or"rt"

右下 : "rightbottom"or"rb"

左下 : "leftbottom"or"lb"

左上 : "lefttop"or"lt"




︻パラメータ説明: setPos()︼


stage
 



ステージへの参照 (stageWidth, stageHeightを取得するため)

[Stage][省略不可]



$scope
 



配置場所を変更したいオブジェクト

[DisplayObject][省略不可]



position
 



オブジェクトの配置場所

[String][規定値:"center"][省略可]



marginX
 



配置場所からの横マージン

[int][規定値:0][省略可]



marginY
 



配置場所からの縦マージン

[int][規定値:0][省略可]



w
 



オブジェクトの横幅

[uint][規定値:0][省略可]



h
 



オブジェクトの縦幅

[uint][規定値:0][省略可]


︻パラメータ説明: resize()︼


$scope
 



リサイズするオブジェクト

[DisplayObject][省略不可]



w
 



リサイズ時の横幅

[uint][規定値:0][省略可]



h
 



リサイズ時の縦幅

[uint][規定値:0][省略可]


︻パラメータ説明: point()︼


$scope
 



座標を変更するオブジェクト

[DisplayObject][省略不可]



posX
 



オブジェクトのx座標

[int][省略不可]



posY
 



オブジェクトのy座標

[int][省略不可]


︻パラメータ説明: rect()︼


$scope
 



座標・サイズを変更するオブジェクト

[DisplayObject][省略不可]



posX
 



オブジェクトのx座標

[int][省略不可]



posY
 



オブジェクトのy座標

[int][省略不可]



w
 



オブジェクトの横幅

[uint][規定値:0][省略可]



h
 



オブジェクトの縦幅

[uint][規定値:0][省略可]


︻ソースコード︼


import jp.atziluth.gui.RelativeLayout;
 



package jp.atziluth.gui{

  import flash.display.DisplayObject;

  import flash.display.Stage;

  import flash.geom.Point;

  import flash.geom.Rectangle;

  public class RelativeLayout extends DisplayObject {

    private static var aimX:int;

    private static var aimY:int;

    private static var _x:int;

    private static var _y:int;

    private static var _width:uint;

    private static var _height:uint;

    private static var rectangle:Rectangle;

    public static function setPos(

      stage:Stage, 

      $scope:DisplayObject, 

      position:String="center", 

      marginX:int=0, 

      marginY:int=0, 

      w:uint=0, 

      h:uint=0

    ):void {

      if ($scope == null) {

        return;

      }

      RelativeLayout.setSize($scope,w,h);

      switch (position) {

        case "center" :

        case "cm" :

          RelativeLayout.aimX = Math.floor(stage.stageWidth / 2 - RelativeLayout._width / 2) + marginX;

          RelativeLayout.aimY = Math.floor(stage.stageHeight / 2 - RelativeLayout._height / 2) + marginY;

          break;

        case "top" :

        case "ct" :

          RelativeLayout.aimX = Math.floor(stage.stageWidth / 2 - RelativeLayout._width / 2) + marginX;

          RelativeLayout.aimY = marginY;

          break;

        case "right" :

        case "rm" :

          RelativeLayout.aimX = Math.floor(stage.stageWidth - RelativeLayout._width) - marginX;

          RelativeLayout.aimY = Math.floor(stage.stageHeight / 2 - RelativeLayout._height / 2) + marginY;

          break;

        case "bottom" :

        case "cb" :

          RelativeLayout.aimX = Math.floor(stage.stageWidth / 2 - RelativeLayout._width / 2) + marginX;

          RelativeLayout.aimY = Math.floor(stage.stageHeight - RelativeLayout._height) - marginY;

          break;

        case "left" :

        case "lm" :

          RelativeLayout.aimX = marginX;

          RelativeLayout.aimY = Math.floor(stage.stageHeight / 2 - RelativeLayout._height / 2) + marginY;

          break;

        case "righttop" :

        case "rt" :

          RelativeLayout.aimX = Math.floor(stage.stageWidth - RelativeLayout._width) - marginX;

          RelativeLayout.aimY = marginY;

          break;

        case "rightbottom" :

        case "rb" :

          RelativeLayout.aimX = Math.floor(stage.stageWidth - RelativeLayout._width) - marginX;

          RelativeLayout.aimY = Math.floor(stage.stageHeight - RelativeLayout._height) - marginY;

          break;

        case "leftbottom" :

        case "lb" :

          RelativeLayout.aimX = marginX;

          RelativeLayout.aimY = Math.floor(stage.stageHeight - RelativeLayout._height) - marginY;

          break;

        case "lefttop" :

        case "lt" :

        default :

          RelativeLayout.aimX = marginX;

          RelativeLayout.aimY = marginY;

          break;

      }

      RelativeLayout.point(

        $scope, 

        RelativeLayout.aimX, 

        RelativeLayout.aimY

      );

    }

    public static function resize(

      $scope:DisplayObject,

      w:uint=0,

      h:uint=0

    ):void {

      if ($scope == null) {

        return;

      }

      RelativeLayout.setSize($scope,w,h);

      $scope.width = RelativeLayout._width;

      $scope.height = RelativeLayout._height;

    }

    public static function point(

      $scope:DisplayObject,

      posX:int,

      posY:int

    ):void {

      if ($scope == null) {

        return;

      }

      RelativeLayout.setPoint(posX, posY);

      $scope.x = RelativeLayout._x;

      $scope.y = RelativeLayout._y;

    }

    public static function rect(

      $scope:DisplayObject,

      posX:int,

      posY:int,

      w:uint=0,

      h:uint=0

    ):void {

      if ($scope == null) {

        return;

      }

      RelativeLayout.setPoint(posX, posY);

      RelativeLayout.setSize($scope,w,h);

      RelativeLayout.rectangle = new Rectangle(

        RelativeLayout._x,

        RelativeLayout._y,

        RelativeLayout._width,

        RelativeLayout._height

      );

      $scope.x = RelativeLayout.rectangle.x;

      $scope.y = RelativeLayout.rectangle.y;

      $scope.width = RelativeLayout.rectangle.width;

      $scope.height = RelativeLayout.rectangle.height;

    }

    private static function setSize($scope:DisplayObject,w:uint,h:uint):void {

      w ? RelativeLayout._width = w:RelativeLayout._width = $scope.width;

      h ? RelativeLayout._height = h:RelativeLayout._height = $scope.height;

    }

    private static function setPoint(posX:int,posY:int):void {

      RelativeLayout._x = posX;

      RelativeLayout._y = posY;

    }

  }

}


︻サンプルソースコード︼


Sample.as
 



package {

  import flash.display.Sprite;

  import flash.display.StageAlign;

  import flash.display.StageScaleMode;

  import flash.events.Event;

  import jp.atziluth.gui.RelativeLayout;

  public class Sample extends Sprite {

    private var title:Sprite=new Title();

    private var center:Sprite=new Center();

    private var top:Sprite=new Top();

    private var right:Sprite=new Right();

    private var bottom:Sprite=new Bottom();

    private var left:Sprite=new Left();

    private var righttop:Sprite=new Righttop();

    private var rightbottom:Sprite=new Rightbottom();

    private var leftbottom:Sprite=new Leftbottom();

    private var lefttop:Sprite=new Lefttop();

    private const TITLE_HEIGHT:uint = Math.round(title.height);

    public function Sample():void {

      setStageProperty();

      setStageEvents();

      addContainer();

      layoutSample();//最初に1度レイアウトを実行する必要があります

    }

    internal function setStageProperty():void {

      //ステージの伸縮を「拡大・縮小なし」に設定(必須)

      stage.scaleMode = StageScaleMode.NO_SCALE;

      //ステージの位置を「左上」に設定(必須)

      stage.align = StageAlign.TOP_LEFT;

    }

    private function setStageEvents():void {

      //ステージリサイズ時のイベントリスナー登録

      stage.addEventListener(Event.RESIZE,layoutSample);

    }

    private function addContainer():void {

      this.addChildAt(title, this.numChildren);

      this.addChildAt(center, this.numChildren);

      this.addChildAt(top, this.numChildren);

      this.addChildAt(right, this.numChildren);

      this.addChildAt(bottom, this.numChildren);

      this.addChildAt(left, this.numChildren);

      this.addChildAt(righttop, this.numChildren);

      this.addChildAt(rightbottom, this.numChildren);

      this.addChildAt(leftbottom, this.numChildren);

      this.addChildAt(lefttop, this.numChildren);

    }

    private function layoutSample(event:Event=null):void {

      //「左下」へオブジェクトの縦幅を強制指定して配置

      RelativeLayout.setPos(stage, title, "lb", 0, 0, 0, TITLE_HEIGHT);

      //title.bg の横幅をステージ幅に合わせる

      RelativeLayout.resize(title.getChildByName("bg"), stage.stageWidth);

      //「中央」へ下からのマージンを指定して配置

      RelativeLayout.setPos(stage, center, "center", 0, -1*Math.round(TITLE_HEIGHT/2));

      //「上」に配置

      RelativeLayout.setPos(stage, top, "top");

      //「右」へ下からのマージンを指定して配置

      RelativeLayout.setPos(stage, right, "right", 0, -1*Math.round(TITLE_HEIGHT/2));

      //「下」へ下からのマージンを指定して配置

      RelativeLayout.setPos(stage, bottom, "bottom", 0, TITLE_HEIGHT);

      //「左」に配置

      RelativeLayout.setPos(stage, left, "left", 0, -1*Math.round(TITLE_HEIGHT/2));

      //「右上」に配置

      RelativeLayout.setPos(stage, righttop, "rt");

      //「右下」へ下からのマージンを指定して配置

      RelativeLayout.setPos(stage, rightbottom, "rb", 0, TITLE_HEIGHT);

      //「左下」へ下からのマージンを指定して配置

      RelativeLayout.setPos(stage, leftbottom, "lb", 0, TITLE_HEIGHT);

      //「左上」に配置

      RelativeLayout.setPos(stage, lefttop, "lt");

    }

  }

}


︻更新履歴︼


2010/01/14

座標を変更するクラスメンバー、pointを追加しました
 座標とサイズを変更するクラスメンバー、rectを追加しました
  

Download