レイアウト
複数のビューを収容する ”容器としてのビュー” があり、これを「レイアウト」と呼びます。
リニアレイアウト
レイアウトには種類がありますが、そのうちの「リニアレイアウト」は、その内部に縦または横に複数のビューを並べる際の入れ物 として使われるものです。
あくまで「並べていく」というものなので、子となるビューの位置を絶対的に指定することはできませんが、その代わりどのような画面サイズであっても それなりに ビューを配置できる（=細かいことを考えなくて済む）のが特徴です。
レイアウトの中にレイアウトを収容 することもできます。
レイアウトは他にもありますが、本バージョンでは 「リニアレイアウト」 のみをサポートします
■レイアウトを生成
まず「リニアレイアウトを生成」を実行してＩＤを取得し、そのＩＤに対してビューを配置したり描画を指示したりします。
文法
リニアレイアウトを生成 → ＜ＩＤ＞ (IDは32bit整数)
記述例
レイアウト１は ＩＤ
リニアレイアウトを生成し レイアウト１に 入れ
上のソースでは、生成したレイアウトのＩＤを格納する変数宣言に「レイアウト１は ＩＤ」と書いています。
整数値の格納なので「レイアウト１は 変数」としてももちろん良いのですが、ＩＤを格納する変数であることが分かるように「ＩＤ」という変数型を使っています。（「ＩＤ」は「変数」を等価定義したものに過ぎず、同じものです）
■子の追加方向を設定
レイアウトの中に含めるビュー（または下位レイアウト）の並べる方向を設定します。
本機能を実行しない場合のデフォルトは「水平」です。
文法
＜方向を示す定数＞を ＜レイアウトＩＤ＞に 子の追加方向を設定 → ・
方向を示す定数として以下のシンボルが利用できます（整数値です）。
水平
垂直
■ビューを追加／レイアウトを追加
ビューやレイアウトを上位レイアウトに追加して見えるようにします。
文法
＜ビューＩＤ＞を ＜レイアウトＩＤ＞に ビューを追加 → ・
＜子レイアウト＞を ＜親レイアウト＞に レイアウトを追加 → ・
記：実際には両者は等価な単語です
■レイアウトをアクティビティに追加
最上位のレイアウトを表示するときはこの単語を使います。
文法
＜レイアウトＩＤ＞を レイアウトをアクティビティに追加 → ・
■プログラム例
以上の処理単語を全部使う、まとまったプログラムは以下のようになります。
記述例
※ファイル名 Layout/SpL3views.src
メインとは （・ → ・）
＿レイアウトは ＩＤ
＿ガイドは ＩＤ
＿ボタン１は ＩＤ
＿ボタン２は ＩＤ
（レイアウト）
リニアレイアウトを生成し ＿レイアウトに 入れ
垂直を ＿レイアウトに 子の追加方向を設定し
＿レイアウトを レイアウトをアクティビティに追加し
（ガイド）
テキストビューを生成し ＿ガイドに 入れ
１８を ＿ガイドに 文字のサイズを設定し
黒色を ＿ガイドに 文字の色を設定し
緑色を ＿ガイドに 背景色を設定し
「これはレイアウトのサンプルです」を
＿ガイドに 文字を設定し
＿ガイドを ＿レイアウトに ビューを追加し
（ボタン１）
ボタンビューを生成し ＿ボタン１に 入れ
２０を ＿ボタン１に 文字のサイズを設定し
「ボタン１」を ＿ボタン１に 文字を設定し
＿ボタン１を ＿レイアウトに ビューを追加し
（ボタン２）
ボタンビューを生成し ＿ボタン２に 入れ
２０を ＿ボタン２に 文字のサイズを設定し
「ボタン２」を ＿ボタン２に 文字を設定し
＿ボタン２を ＿レイアウトに ビューを追加し。
■レイアウトの背景色
レイアウトには背景色を設定できます。
文法
＜色コード＞を ＜レイアウトＩＤ＞に 背景色設定 → ・
＜色コード＞を指定する場合は以下のように16進数で記述すると分かりやすいです。
0xRRGGBB (例: 0xaaeecc) RGBを2桁ずつ指定
0xAARRGGBB (例: 0xffaaeecc) 透明度＋RGBを指定
あるいは以下のシンボルも使えます。
黒色 (ブラックも等価)
青色 (ブルーも等価)
水色 (シアンも等価)
濃い灰色 (ダークグレーも等価)
灰色 (グレーも等価)
緑色 (グリーンも等価)
薄い灰色 (ライトグレーも等価)
赤紫色 (マゼンタも等価)
赤色 (レッドも等価)
透明色 (トランスペアレントも等価)
白色 (ホワイトも等価)
黄色 (イエローも等価)
レイアウトの背景は黒色がデフォルトになっています。その色で良いのなら
特に指定する必要はありません。
記述例
メインとは （・ → ・）
〜略〜
（レイアウト）
リニアレイアウトを生成し ＿レイアウトに 入れ
垂直を ＿レイアウトに 子の追加方向を設定し
0xffee7788を ＿レイアウトに 背景色設定し
＿レイアウトを レイアウトをアクティビティに追加し
（ガイド）
〜略〜
（ボタン１）
〜略〜
（ボタン２）
〜略〜
レイアウトの背景色はデフォルトで黒であるため、レイアウトがどこにあるか分かりにくいのですが、開発時はわざとレイアウトに背景色を付けてみると理解の助けになります。以下がその例です。
上を見れば、画面全域に「 ＿レイアウト 」が広がっていることが分かります。
ちなみにMindでのレイアウトのサイズのデフォルトは 横=「拡張」、高さ=「拡張」ですが、これはAndroid OSのデフォルトと異なります。
■レイアウトの配置
レイアウト中に収容するビュー（または下位レイアウト）の位置を指定するものです。
文法
＜位置情報＞を ＜レイアウトＩＤ＞に 中身の配置を設定 → ・
＜位置情報＞として以下のシンボル(実際には配列要素)を利用してください。
無配置
左側
右側
上辺
下辺
中央
水平中央
垂直中央
(「水平中央と 垂直中央を ＯＲし ‥に 中身の配置を設定」 という記述も可)
■レイアウトのサイズ
文法
＜幅＞と ＜高さ＞を ＜ＩＤ＞に レイアウトのサイズを設定 → ・
○幅と高さの単位はピクセルです。
○数値でなく、シンボル「拡張」「非拡張」という特殊な値も指定できます。
幅に「拡張」を指定すると、幅一杯に引き伸ばした大きさになります。
高さに「拡張」を指定すると、高さ一杯に引き伸ばした大きさになります。
○本機能による指定が無い場合、
拡張と 拡張を ＜ＩＤ＞に レイアウトのサイズを設定 → ・
が指定されているのと同じです。（ビューのサイズのデフォルトとは違います）
記述例
※ファイル名 Layout/SpLcomplex.src
メインとは （・ → ・）
＿大レイアウトは ＩＤ
＿上段レイアウトは ＩＤ
＿下段レイアウトは ＩＤ
＿挨拶文は ＩＤ
＿第二文は ＩＤ
＿ボタン１は ＩＤ
＿ボタン２は ＩＤ
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（大レイアウト）
リニアレイアウトを生成し ＿大レイアウトに 入れ
垂直を ＿大レイアウトに 子の追加方向を設定し
＿大レイアウトを レイアウトをアクティビティに追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（上段レイアウト）
リニアレイアウトを生成し ＿上段レイアウトに 入れ
水平を ＿上段レイアウトに 子の追加方向を設定し
右側を ＿上段レイアウトに 中身の配置を設定し
非拡張と 非拡張を ＿上段レイアウトに レイアウトのサイズを設定し
0xff445566を ＿上段レイアウトに 背景色設定し
＿上段レイアウトを ＿大レイアウトに レイアウトを追加し
（挨拶文）
テキストビューを生成し ＿挨拶文に 入れ
１８を ＿挨拶文に 文字のサイズを設定し
黒色を ＿挨拶文に 文字の色を設定し
緑色を ＿挨拶文に 背景色を設定し
水平中央と 下辺を ＯＲし
＿挨拶文に 中身の配置を設定し
「こんにちは１」を ＿挨拶文に 文字を設定し
１６０と ８０を ＿挨拶文に ビューのサイズを設定し
＿挨拶文を ＿上段レイアウトに ビューを追加し
（第二文）
テキストビューを生成し ＿第二文に 入れ
１８を ＿第二文に 文字のサイズを設定し
黒色を ＿第二文に 文字の色を設定し
赤色を ＿第二文に 背景色を設定し
水平中央を ＿第二文に 中身の配置を設定し
「こんにちは２」を ＿第二文に 文字を設定し
非拡張と 非拡張を ＿第二文に ビューのサイズを設定し
＿第二文を ＿上段レイアウトに ビューを追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（下段レイアウト）
リニアレイアウトを生成し ＿下段レイアウトに 入れ
水平を ＿下段レイアウトに 子の追加方向を設定し
左側を ＿下段レイアウトに 中身の配置を設定し
２４０と １２０を ＿下段レイアウトに レイアウトのサイズを設定し
0xff446655を ＿下段レイアウトに 背景色設定し
＿下段レイアウトを ＿大レイアウトに レイアウトを追加し
（ボタン１）
ボタンビューを生成し ＿ボタン１に 入れ
２０を ＿ボタン１に 文字のサイズを設定し
水平中央を ＿ボタン１に 中身の配置を設定し
「ボタン１」を ＿ボタン１に 文字を設定し
非拡張と 非拡張を ＿ボタン１に ビューのサイズを設定し
＿ボタン１を ＿下段レイアウトに ビューを追加し
（ボタン２）
ボタンビューを生成し ＿ボタン２に 入れ
２０を ＿ボタン２に 文字のサイズを設定し
水平中央を ＿ボタン２に 中身の配置を設定し
「ボタン２」を ＿ボタン２に 文字を設定し
非拡張と 非拡張を ＿ボタン２に ビューのサイズを設定し
＿ボタン２を ＿下段レイアウトに ビューを追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
。
上では、「大レイアウト」という全体のレイアウトの下位として「上段レイアウト」「下段レイアウト」の二つを定義しています。
上段と下段レイアウトは背景色をつけているのでその領域が分かります。
上段レイアウトは幅・高さ共に「非拡張」をそのサイズとして指定しているので、中に収容するビューの合計がそのままレイアウトサイズになっいます（幅・高さ共に余りがありません）
下段レイアウトについては幅と高さのサイズを明示していますが、ボタン２つを収容するのに幅が足りなくなり、「ボタン２」の文字が折りたたまれているのが分かります。（これはわざとです）
■レイアウトのパディング
レイアウトの内部に余裕を作ります。
文法
＜左＞、＜上＞、＜右＞、＜下＞を ＜ＩＤ＞に レイアウトのパディングを設定 → ・
＜左＞、＜上＞、＜右＞、＜下＞の単位はピクセルです。
記述例
※ファイル名 Layout/SpLpadding.src
メインとは （・ → ・）
＿大レイアウトは ＩＤ
＿上段レイアウトは ＩＤ
＿下段レイアウトは ＩＤ
＿挨拶文は ＩＤ
＿第二文は ＩＤ
＿ボタン１は ＩＤ
＿ボタン２は ＩＤ
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（大レイアウト）
リニアレイアウトを生成し ＿大レイアウトに 入れ
垂直を ＿大レイアウトに 子の追加方向を設定し
＿大レイアウトを レイアウトをアクティビティに追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（上段レイアウト）
リニアレイアウトを生成し ＿上段レイアウトに 入れ
水平を ＿上段レイアウトに 子の追加方向を設定し
右側を ＿上段レイアウトに 中身の配置を設定し
非拡張と 非拡張を ＿上段レイアウトに レイアウトのサイズを設定し
0xff445566を ＿上段レイアウトに 背景色設定し
２０、２０、２０、２０を ＿上段レイアウトに レイアウトのパディングを設定し
＿上段レイアウトを ＿大レイアウトに レイアウトを追加し
（挨拶文）
テキストビューを生成し ＿挨拶文に 入れ
１８を ＿挨拶文に 文字のサイズを設定し
黒色を ＿挨拶文に 文字の色を設定し
緑色を ＿挨拶文に 背景色を設定し
水平中央と 下辺を ＯＲし
＿挨拶文に 中身の配置を設定し
「こんにちは１」を ＿挨拶文に 文字を設定し
１６０と ８０を ＿挨拶文に ビューのサイズを設定し
＿挨拶文を ＿上段レイアウトに ビューを追加し
（第二文）
テキストビューを生成し ＿第二文に 入れ
１８を ＿第二文に 文字のサイズを設定し
黒色を ＿第二文に 文字の色を設定し
赤色を ＿第二文に 背景色を設定し
水平中央を ＿第二文に 中身の配置を設定し
「こんにちは２」を ＿第二文に 文字を設定し
非拡張と 非拡張を ＿第二文に ビューのサイズを設定し
＿第二文を ＿上段レイアウトに ビューを追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（下段レイアウト）
リニアレイアウトを生成し ＿下段レイアウトに 入れ
水平を ＿下段レイアウトに 子の追加方向を設定し
左側を ＿下段レイアウトに 中身の配置を設定し
２４０と １２０を ＿下段レイアウトに レイアウトのサイズを設定し
0xff446655を ＿下段レイアウトに 背景色設定し
２０、２０、２０、２０を ＿下段レイアウトに レイアウトのパディングを設定し
＿下段レイアウトを ＿大レイアウトに レイアウトを追加し
（ボタン１）
ボタンビューを生成し ＿ボタン１に 入れ
２０を ＿ボタン１に 文字のサイズを設定し
水平中央を ＿ボタン１に 中身の配置を設定し
「ボタン１」を ＿ボタン１に 文字を設定し
非拡張と 非拡張を ＿ボタン１に ビューのサイズを設定し
＿ボタン１を ＿下段レイアウトに ビューを追加し
（ボタン２）
ボタンビューを生成し ＿ボタン２に 入れ
２０を ＿ボタン２に 文字のサイズを設定し
水平中央を ＿ボタン２に 中身の配置を設定し
「ボタン２」を ＿ボタン２に 文字を設定し
非拡張と 非拡張を ＿ボタン２に ビューのサイズを設定し
＿ボタン２を ＿下段レイアウトに ビューを追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
。
上のように、上段レイアウト、下段レイアウト共に、すぐ内側に20ピクセルの余裕が作られています。
■レイアウトのマージン
レイアウトの外部に余裕を作ります。
文法
＜左＞、＜上＞、＜右＞、＜下＞を ＜ＩＤ＞に レイアウトのマージンを設定 → ・
＜左＞、＜上＞、＜右＞、＜下＞の単位はピクセルです。
記述例
※ファイル名 Layout/SpLmargin.src
メインとは （・ → ・）
＿大レイアウトは ＩＤ
＿上段レイアウトは ＩＤ
＿下段レイアウトは ＩＤ
＿挨拶文は ＩＤ
＿第二文は ＩＤ
＿ボタン１は ＩＤ
＿ボタン２は ＩＤ
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（大レイアウト）
リニアレイアウトを生成し ＿大レイアウトに 入れ
垂直を ＿大レイアウトに 子の追加方向を設定し
＿大レイアウトを レイアウトをアクティビティに追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（上段レイアウト）
リニアレイアウトを生成し ＿上段レイアウトに 入れ
水平を ＿上段レイアウトに 子の追加方向を設定し
右側を ＿上段レイアウトに 中身の配置を設定し
非拡張と 非拡張を ＿上段レイアウトに レイアウトのサイズを設定し
0xff445566を ＿上段レイアウトに 背景色設定し
２０、２０、２０、２０を ＿上段レイアウトに レイアウトのマージンを設定し
＿上段レイアウトを ＿大レイアウトに レイアウトを追加し
（挨拶文）
テキストビューを生成し ＿挨拶文に 入れ
１８を ＿挨拶文に 文字のサイズを設定し
黒色を ＿挨拶文に 文字の色を設定し
緑色を ＿挨拶文に 背景色を設定し
水平中央と 下辺を ＯＲし
＿挨拶文に 中身の配置を設定し
「こんにちは１」を ＿挨拶文に 文字を設定し
１６０と ８０を ＿挨拶文に ビューのサイズを設定し
＿挨拶文を ＿上段レイアウトに ビューを追加し
（第二文）
テキストビューを生成し ＿第二文に 入れ
１８を ＿第二文に 文字のサイズを設定し
黒色を ＿第二文に 文字の色を設定し
赤色を ＿第二文に 背景色を設定し
水平中央を ＿第二文に 中身の配置を設定し
「こんにちは２」を ＿第二文に 文字を設定し
非拡張と 非拡張を ＿第二文に ビューのサイズを設定し
＿第二文を ＿上段レイアウトに ビューを追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
（下段レイアウト）
リニアレイアウトを生成し ＿下段レイアウトに 入れ
水平を ＿下段レイアウトに 子の追加方向を設定し
左側を ＿下段レイアウトに 中身の配置を設定し
２４０と １２０を ＿下段レイアウトに レイアウトのサイズを設定し
0xff446655を ＿下段レイアウトに 背景色設定し
２０、２０、２０、２０を ＿下段レイアウトに レイアウトのマージンを設定し
＿下段レイアウトを ＿大レイアウトに レイアウトを追加し
（ボタン１）
ボタンビューを生成し ＿ボタン１に 入れ
２０を ＿ボタン１に 文字のサイズを設定し
水平中央を ＿ボタン１に 中身の配置を設定し
「ボタン１」を ＿ボタン１に 文字を設定し
非拡張と 非拡張を ＿ボタン１に ビューのサイズを設定し
＿ボタン１を ＿下段レイアウトに ビューを追加し
（ボタン２）
ボタンビューを生成し ＿ボタン２に 入れ
２０を ＿ボタン２に 文字のサイズを設定し
水平中央を ＿ボタン２に 中身の配置を設定し
「ボタン２」を ＿ボタン２に 文字を設定し
非拡張と 非拡張を ＿ボタン２に ビューのサイズを設定し
＿ボタン２を ＿下段レイアウトに ビューを追加し
（−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−）
。
■レイアウトのウェイト
複数のレイアウトを並べる際、指定した比率の大きさで、かつ、親サイズ一杯に配置します。
幅や高さ全体を二等分・三等分したレイアウトを配置するのに使います。
合計した幅または高さはいっぱいになるため、パラメータ「拡張」を使ってレイアウトサイズを指定する必要はありません。
文法
＜比率＞を ＜ＩＤ＞に レイアウトのウェイトを設定 → ・
概念は「ビューのウェイトを設定」と同じであるため、記述例と画面サンプルについてはそちらを参照してください。
■一つのレイアウトの削除
レイアウトの削除には生成時のＩＤを指定します。
見え方としては「削除して詰め」になります。
文法
＜子ＩＤ＞を ＜親ＩＤ＞から レイアウトを削除 → ・
記述例
＿下段レイアウトを ＿大レイアウトから レイアウトを削除し
■すべてのレイアウトの削除
指定した親レイアウトに所属するすべてのレイアウトを削除します。
見え方としては「削除して詰め」になります。
文法
＜親ＩＤ＞から すべてのレイアウトを削除 → ・
記述例
＿大レイアウトから すべてのレイアウトを削除し
■レイアウトを削除するプログラム例
記述例
※ファイル名 Layout/SpLdelete.src
〜略〜
（ソースファイルを直接ご参照ください）
〜略〜
章タイトルは「ボタン」と言っていますが、ボタンビューを例にとっているだけであり、他のビューすべてに適用できます
■一次元の多数のボタン
上記のようなボタン配置はよく使われるものです。これを実現するために、一つ一つのボタンの生成や配置をそれぞれにコード記述するのは能率がよくありません。このようなボタン群は繰り返し処理で記述することを勧めます。そうすれば後からボタンが増えたような場合でも修正は最小限で済みます。
上の図のソースコードは以下のようなものです。
記述例
※ファイル名 Layout/SpButtons.src
メインとは
＿ボタン名は 文字列定数配列 ←この要素を増やすだけでボタンを増やせる
「処理１」
「処理２」
「処理３」
「終了」
＿ボタン数は 数値 ＿ボタン名の 要素数
＿レイアウトは ＩＤ
＿ボタンＩＤは ＿ボタン数の ＩＤ
本体とは
（レイアウト）
リニアレイアウトを生成し ＿レイアウトに 入れ
垂直を ＿レイアウトに 子の追加方向を設定し
＿レイアウトを レイアウトをアクティビティに追加し
（ボタン群）
＿ボタン数を
回数指定し
ボタンビューを生成し ＿ボタンＩＤ（回数）に 入れ
２０を ＿ボタンＩＤ（回数）に 文字のサイズを設定し
拡張と 非拡張を ＿ボタンＩＤ（回数）に ビューのサイズを設定し
＿ボタン名（回数）を ＿ボタンＩＤ（回数）に 文字を設定し
＿ボタンＩＤ（回数）を ＿レイアウトに ビューを追加し
＿ボタンＩＤ（回数）を クリックリスナーを登録し
繰り返し。
上記のような記述にしておけば、たとえば後になって「処理４」というボタンが増えた時でも、 「＿ボタン名は 文字列定数配列」 の配列要素を一つ増やすだけで済みます。（初期描画については‥ですが）
■二次元の多数のボタン
上記のように二次元状に配置されたボタンを描画する例です。
これは 「大きなサンプルアプリ − 逆ポーランド電卓」 というサンプルのソースコードから、ボタン描画部分だけを抜粋したものです。
ソースコードのサイズが大きいので本マニュアルには掲載しません。ソースファイル（ Layout/SpBcalc.src ）を直接参照してください。
記述例
※ファイル名 Layout/SpBcalc.src
〜略〜
（ソースファイルを直接ご参照ください）
〜略〜
ソースコードが少し複雑になっていますが、ポイントは以下の通りです。
スクリーンショットを見ると分かりますが、左側のボタングループと右側のグループに分け、それぞれをレイアウトにしています。
たとえば左側のボタングループ内では、１行に３個のボタンを１つの小レイアウトに収容し、そのレイアウトを縦に４行分収容しています。
Copyright(C) 2000 Scripts Lab. Inc.