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