それではいよいよアプリを編集する段階に入っていきます。
アプリに表示するテキストや画像を配置するのに使うのが「レイアウトエディタ」です。
今回はレイアウトエディタの画面構成と操作方法、そして画面に表示されるテキストの配置と変更方法を確認していきます。
準備
ツールウインドウをAndroidに
アプリを編集するための準備として、左側のツールウインドウにはAndroidビューを表示しておきます。「Project」をクリックするとプルダウンメニューが開くので、「Android」を選択。
するとアプリ編集時、実際に使用する可能性が高いファイルのみが表示されます。通常使用にはこのAndroidビューがおすすめ。
activity_main.xmlを開く
次にエディタウインドウ上部のタブで、「activity_main.xml」を選択しましょう。
もしこの名前のタブが無い場合は、ツールウインドウの「app」>「res」>「layout」の中にあるファイルをダブルクリックすれば開くことができます。
このファイルがメイン画面を構成するためのファイルです。
レイアウトエディタの画面構成
ファイルを開くとこんな画面になります。これがレイアウトエディタ。アプリにテキストや画像などを配置する画面です。
レイアウトエディタは大きく分けて、
- Palette (テキストや画像などの部品 [ビュー] を選択して、配置する)
- Component Tree (配置されたビューを選択する)
- Design Editor(ビューの位置を決定する)
- Attributes (ビューのパラメータを変更する)
の4つのエリアで構成されています。
Blueprintを非表示にする
中央のDesign Editorにはデフォルトで2画面表示されています。左側がDesign、右側がBlueprintと呼ばれます。
今はDesignだけでかまわないので、Blueprintの表示は消去しておきます。Design Editorのツールバー左上の青いアイコンをクリックすると、どの画面を表示するか選択できるので、環境に合わせて選択してください。
コードを表示する
activity_main.xmlを開くとデフォルトでDesign Editorが開きますが、これをコード表示に切り替えることも可能です。
Attributesエリアの上、「Code」の部分をクリックすると、
XMLファイルがそのまま表示されます。
なお「Split」をクリックすると、Code EditorとDesign Editor両方開くこともできます。
現在のところは「Design」をクリックしてDesign Editorに戻しておきましょう。
ビューを配置する
テキストビューを配置する
それではこのDesign Editorにビューを配置していきます。最初に画面中央に表示されている「Hello, World」を消去しておいてください。
Design Editorエリアで文字列を選択して、Deleteを押せば消えます。
次にDesign Editorのツールバーで磁石のようなアイコンがあります。これを斜線の入っていない状態(ON)にしてください。
ここまでの準備がOKなら、新たなビューを配置しましょう。Paletteから「TextView」を選択して、そのままDesign Editorの画面上にドロップします。
画面中央辺りに来るとガイドラインが表示されるので、そこに配置してみましょう。
これでテキストビューが配置できました。
ビューのテキストを直接編集する
続いてこのテキストを変更してみたいと思います。
画面右側、Attributesエリアの「Declared Attributes」を展開してみましょう。その中のtext欄には、「textView」と表示されています。これが現在のテキストです。
これを変更すれば表示されるテキストが変わります。試しにこの部分を「初めてのAndroid」に変更すると、
Design Editorの表示も更新されました。
しかしビューに直接テキストを入力するこの方法は、Android開発ではあまり利用されません。Component Treeにも警告が表示されます。
この「@string」とは何なのか？ 続いて見ていきましょう。
Pick a Resourceでテキストを編集する
最初のテキストはそのまま、もう1つテキストビューを追加しておきます。同じようにPaletteから「TextView」をドラッグ&ドロップして、適当な場所に配置。
新しいテキストを選択して、今度はtext欄の右側、細長い穴のような場所をクリックします。
Pick a Resource画面
Pick a Resource画面が開きます。ここの左上、「+」ボタンをクリックして、プルダウンメニューから「String Value」を選択。
新たなウインドウ「New String Value」が開きます。ここでは2ヶ所に記入しましょう。
「Resource name」は自由ですが後で分かりやすい名前、「Resource value」には表示させたいテキストを入力してください。これで「OK」をクリック。
画面がPick a Resourceに戻るので、そのままOKを押して戻ります。もう一度Attributesを確認してみましょう。
text欄が「@string/testText」となっています。これは「@stringに配置された、testTextという名前のテキストを参照している」という意味です。
テキストの実体を見る
参照しているからには実体がどこかに存在します。ではこのstring、実際に開いてみましょう。
ツールウインドウの「app」>「res」>「values」を開くと、中にいくつかのxmlファイルが入っています。このうちstrings.xmlが文字列を格納しているファイルです。
これをダブルクリックで開きます。すると、
先ほど作成したテキストがここに含まれているのが分かります。しかし最初に書いた「初めてのAndroid」という文字列は、一体どこに行ったんでしょう？
もう一度activity_main.xmlを開いて、コード表示に切り替えると、
ここにありました。「初めてのAndroid」は、テキストビューの要素全てをactivity_mainに直接記入しているのに対し、Pick a Resourceで作成した「テキストのテスト」という文字列は別ファイルを参照しているという違いがあることに注意してください。
次にすること
次にこのアプリを実行していきますが、アプリを実行するとき、一体裏で何が行われているのでしょうか？
Androidの最も基本的なソースファイルを開いて、アクティビティとそのライフサイクルについて見ていきましょう。