「二章：レイアウトの使用」の編集履歴（バックアップ）一覧はこちら
「二章：レイアウトの使用」(2013/08/06 (火) 12:21:24) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
アプリケーションの起動を確認できたら、また新しいプロジェクトを作る。
今度こそプログラミングか！…と思った人には申し訳ないが、今回もプログラムをいじらない。
じゃあ何をするのか…、タイトル通りレイアウトファイルを用いてみる。
レイアウトファイルとは何ぞや、ということだが&bold(){&u(){「プログラムを用いずに」}}あらかじめ用意されたパーツを用いて
アプリケーション画面を構成することが出来るという大変便利なものである。
&color(gray){（とはいえ凝ったものを作るには不向きではあるが）}
***・レイアウトファイルの概要
#region(クリックして開く)
そんなわけで、レイアウトファイルを開く。
まあ、おそらくプロジェクトが生成された時点で真っ先に表示されているであろう「（アクティビティ名）.xml」が
そのレイアウトファイルそのものであるから大抵は開く必要すらないだろう。
一応、プロジェクトのどこにあるか位は覚えておこう。
(下画像)プロジェクトの赤線で囲った"layout"の中にレイアウトファイルが入っている。
#image(Layout01s.png,,http://www57.atwiki.jp/androtomato?cmd=upload&act=open&pageid=28&file=Layout01.png,blank)
このレイアウトファイル、初めに開かれた時になにやら画面らしきものに"Hello world"と表示されたものが
あったと思うが、これは"Graphical Layout"といって「画面に"Hello world"と表示しろ」という
レイアウトファイルの命令が実際にどのように見えるかを教えてくれるものだ。
このGraphical Layoutに横の"Palette"からドラッグアンドドロップでいろいろ付け足すことが出来る。
…が、まずはエディター下部の"Graphical Layout"タブから横の"（アクティビティ名）.xml"タブに切り替える。
すると、上の画像のような画面に切り替わったはずだ。
ここがレイアウトファイルの設定を実際に行う部分である。
そして、画像で赤線で囲まれた部分、TextViewの中にある&bold(){android:text="@string/hello_world"}が最初の起動で見た
"Hello world"の表示設定である。と、言う事はここの設定を変えれば表示される文字が変更されるはず。
では、試してみよう。
#endregion
***・レイアウトの変更その１
#region(クリックして開く)
まず注意しなければならないのは、android:text="@string/hello_world"は&color(blue){「表示するテキストとして"string"から}
&color(blue){"hello_world"を呼び出しますよー」}という命令だということ。
つまり、レイアウトファイルは別のファイルから"Hello world" の文字列を呼び出したわけだ。
下画像のパッケージ・エクスプローラーで赤線で囲ってある"values"内の"strings.xml"がそれだ。
#image(Layout02s.png,,http://www57.atwiki.jp/androtomato?cmd=upload&act=open&pageid=28&file=Layout02.png,blank)
そして、&bold(){<string name="hello_world">Hello world!</string>}こそがレイアウトファイルから呼び出される
文字列となっている。strings.xmlの"hello_world"を呼び出すことで、strings.xml内で設定されたHello world!
を呼び出すことが出来るのだ。
試しに、&bold(){<string name="tests">テスト</string>}をstring.xmlに追加し、
(アクティビティ名).xmlのandroid:text="@string/hello_world"を&bold(){android:text="@string/tests"}に変更してみよう。
実行すると画面に表示される文字が"テスト"に変わっていたら成功だ。
#endregion
***・レイアウトの変更その２
#region(クリックして開く)
確認できたら"Graphical Layout"タブに移動し、今度は実際にドラッグアンドドロップでパーツを配置してみる。
"Palette"の"Form Widgets"を選択し、その中の"Button"をドラッグアンドドロップで画面まで持っていく。（下画像）
#image(Layout03s.png,,http://www57.atwiki.jp/androtomato?cmd=upload&act=open&pageid=28&file=Layout03.png,blank)
すると、ボタンが配置され位置やサイズをいじることが出来るようになった。
このまま実行してみるとボタンが押せるのが確認できる。（何も起こらないが）
これで確認完了…と言いたい所だが、ちょっと待ってほしい。
"Graphical Layout"に配置したボタンの右下に黄色い△の警告が出ているはずだ。
そこで、xmlタブに移動すると&bold(){<Button(中略)/>}が追加されていて、その中の&bold(){android:text="Button"}
という一文に&u(){黄色い波線が引かれている}と思う。
そこにマウスカーソルを持っていくと、&bold(){"Hardcoded string "Button", should use @string resource"}
みたいなことを書かれているはずだ。
これは「@string使えよー」という意味で、つまり"Hello world"と同じように記述すればいい。
strings.xmlを開き、&bold(){<string name="button">ボタン</string>}の一文を追加、そしてレイアウトのxmlの
android:text="Button"を&bold(){android:text="@string/button"}に変更し、実行する。
警告が消え、画面内のボタンの文字が変更されたのが確認できたと思う。
これで今度こそ確認完了だ。
#endregion
***・章末のちょっと大事な話
#region(クリックして開く)
ここまで長々とレイアウトファイルを使った画面レイアウトについて語ってきたが、
実際の所、これからプログラミングしていく上で、&big(){&bold(){&color(red){"Graphical Layout"の方は基本的に使わない}}}
なぜなら、（これはあくまで自分の見解ではあるが）自力で手打ちしたほうがファイルの連携などの要素も含めて、
&u(){&bold(){習熟が早くなる}}からだ。
要は「面倒臭がっていると上達しないぞ☆」ってこと。
まー、がんばりましょう！
次章は自力でボタンの配置を行って、ついでにボタンを押すことで何らかの動作をさせるよ！
今度こそプログラミングだよ！ や っ た ね た え ち ゃ ｎ
#endregion
アプリケーションの起動を確認できたら、また新しいプロジェクトを作る。
今度こそプログラミングか！…と思った人には申し訳ないが、今回もプログラムをいじらない。
じゃあ何をするのか…、タイトル通りレイアウトファイルを用いてみる。
レイアウトファイルとは何ぞや、ということだが&bold(){&u(){「プログラムを用いずに」}}あらかじめ用意されたパーツを用いて
アプリケーション画面を構成することが出来るという大変便利なものである。
&color(gray){（とはいえ凝ったものを作るには不向きではあるが）}
***・レイアウトファイルの概要
#region(クリックして開く)
そんなわけで、レイアウトファイルを開く。
まあ、おそらくプロジェクトが生成された時点で真っ先に表示されているであろう「（アクティビティ名）.xml」が
そのレイアウトファイルそのものであるから大抵は開く必要すらないだろう。
一応、プロジェクトのどこにあるか位は覚えておこう。
(下画像)プロジェクトの赤線で囲った"layout"の中にレイアウトファイルが入っている。
#image(Layout01s.png,,http://www57.atwiki.jp/androtomato?cmd=upload&act=open&pageid=28&file=Layout01.png,blank)
このレイアウトファイル、初めに開かれた時になにやら画面らしきものに"Hello world"と表示されたものが
あったと思うが、これは"Graphical Layout"といって「画面に"Hello world"と表示しろ」という
レイアウトファイルの命令が実際にどのように見えるかを教えてくれるものだ。
このGraphical Layoutに横の"Palette"からドラッグアンドドロップでいろいろ付け足すことが出来る。
…が、まずはエディター下部の"Graphical Layout"タブから横の"（アクティビティ名）.xml"タブに切り替える。
すると、上の画像のような画面に切り替わったはずだ。
ここがレイアウトファイルの設定を実際に行う部分である。
そして、画像で赤線で囲まれた部分、TextViewの中にある&bold(){android:text="@string/hello_world"}が最初の起動で見た
"Hello world"の表示設定である。と、言う事はここの設定を変えれば表示される文字が変更されるはず。
では、試してみよう。
#endregion
***・レイアウトの変更その１
#region(クリックして開く)
まず注意しなければならないのは、android:text="@string/hello_world"は&color(blue){「表示するテキストとして"string"から}
&color(blue){"hello_world"を呼び出しますよー」}という命令だということ。
つまり、レイアウトファイルは別のファイルから"Hello world" の文字列を呼び出したわけだ。
下画像のパッケージ・エクスプローラーで赤線で囲ってある"values"内の"strings.xml"がそれだ。
#image(Layout02s.png,,http://www57.atwiki.jp/androtomato?cmd=upload&act=open&pageid=28&file=Layout02.png,blank)
そして、&bold(){<string name="hello_world">Hello world!</string>}こそがレイアウトファイルから呼び出される
文字列となっている。strings.xmlの"hello_world"を呼び出すことで、strings.xml内で設定されたHello world!
を呼び出すことが出来るのだ。
試しに、&bold(){<string name="tests">テスト</string>}をstring.xmlに追加し、
(アクティビティ名).xmlのandroid:text="@string/hello_world"を&bold(){android:text="@string/tests"}に変更してみよう。
実行すると画面に表示される文字が"テスト"に変わっていたら成功だ。
#endregion
***・レイアウトの変更その２
#region(クリックして開く)
確認できたら"Graphical Layout"タブに移動し、今度は実際にドラッグアンドドロップでパーツを配置してみる。
"Palette"の"Form Widgets"を選択し、その中の"Button"をドラッグアンドドロップで画面まで持っていく。（下画像）
#image(Layout03s.png,,http://www57.atwiki.jp/androtomato?cmd=upload&act=open&pageid=28&file=Layout03.png,blank)
すると、ボタンが配置され位置やサイズをいじることが出来るようになった。
このまま実行してみるとボタンが押せるのが確認できる。（何も起こらないが）
これで確認完了…と言いたい所だが、ちょっと待ってほしい。
"Graphical Layout"に配置したボタンの右下に黄色い△の警告が出ているはずだ。
そこで、xmlタブに移動すると&bold(){<Button(中略)/>}が追加されていて、その中の&bold(){android:text="Button"}
という一文に&u(){黄色い波線が引かれている}と思う。
そこにマウスカーソルを持っていくと、&bold(){"Hardcoded string "Button", should use @string resource"}
みたいなことを書かれているはずだ。
これは「@string使えよー」という意味で、つまり"Hello world"と同じように記述すればいい。
strings.xmlを開き、&bold(){<string name="button">ボタン</string>}の一文を追加、そしてレイアウトのxmlの
android:text="Button"を&bold(){android:text="@string/button"}に変更し、実行する。
警告が消え、画面内のボタンの文字が変更されたのが確認できたと思う。
これで今度こそ確認完了だ。
#endregion
***・章末のちょっと大事な話
#region(クリックして開く)
ここまで長々とレイアウトファイルを使った画面レイアウトについて語ってきたが、
実際の所、これからプログラミングしていく上で、&big(){&bold(){&color(red){"Graphical Layout"の方は基本的に使わない}}}
なぜなら、（これはあくまで自分の見解ではあるが）自力で手打ちしたほうがファイルの連携などの要素も含めて、
&u(){&bold(){習熟が早くなる}}からだ。
要は「面倒臭がっていると上達しないぞ☆」ってこと。
まー、がんばりましょう！
次章は自力でボタンの配置を行って、ついでにボタンを押すことで何らかの動作をさせるよ！
今度こそプログラミングだよ！ &big(){&bold(){&color(red){や っ た ね た え ち ゃ ｎ}}}
#endregion
