エディタ
エディタにはレイアウトビューとテキストビューがあり、ビューは切り替えることができます。
レイアウトビューはUIエディタのキャンバスモード、テキストビューはUIエディタのテーブルモードです。
それぞれのビューについて説明します。
レイアウトビュー
エディタを使ってUIのレイアウトを作成します。UIを開くとキャンバス領域が表示されます。
レイアウトはコンポーネントと呼ばれるテキストフィールドなどのWeb部品をマウスを使ってキャンバスに配置していきます。
コンポーネントの見た目や動きについては、コンポーネントのプロパティを設定します。
配置
左パネルにあるコンポーネントをマウスでキャンバスに対してドラッグします。任意の場所にドロップできます。
選択
コンポーネントをクリックすると選択になります。
移動
選択したコンポーネントはドラッグにより移動できます。カーソルキーを使うと 1px
ずつ移動します。
リサイズ
コンポーネントは選択した後、マウスでリサイズできます。プロパティから Width/Height を設定することも可能です。
複製
コンテキストメニューまたはショートカットからコンポーネントをコピーできます。
削除
コンテキストメニューまたは Deleteキーでコンポーネントを削除できます。
重なり位置
コンポーネントはキャンバス上に自由に配置可能であるため、コンポーネント同士が重なることがあります。コンポーネント同士の重なり位置はコンテキストメニューから変更することができます。
前面へ移動
対象のコンポーネントをひとつ前面に移動します。
最前面へ移動
対象のコンポーネントを最前面へ移動します。
背面へ移動
対象のコンポーネントをひとつ背面に移動します。
最背面へ移動
対象のコンポーネントを最背面へ移動します。
テキストビュー
テキストビューは、UIエディタのテーブルモードです。
UIエディタに配置したコンポーネントを一覧形式で参照し、プロパティを編集と、コンポーネントの削除ができます。
一覧形式では、下記の項目を表示します。
項目 | 説明 |
---|---|
ID | コンポーネントのIDを表示します。 |
ラベル | コンポーネントのラベルを表示します。 |
幅 | コンポーネントの幅を表示します。 |
高さ | コンポーネントの高さを表示します。 |
X | コンポーネントの配置位置X座標を表示します。 |
Y | コンポーネントの配置位置Y座標を表示します。 |
編集メニュー | コンポーネントのプロパティを編集することができます。 |
削除メニュー | コンポーネントを削除することができます。 |
Tips