プログラムの編集 の履歴(No.1)
- 履歴一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- プログラムの編集 へ行く。
- 1 (2024-05-30 (木) 18:47:10)
- 2 (2024-05-30 (木) 18:47:10)
プログラムの編集†
レイアウトエディタでの編集†
図1の真ん中のように,端末の絵と,その中に「Hello World!」という文字が表示されている状態のとき,この端末の絵のことを「レイアウトエディタ」と呼びます.
まず,この画面の中を編集していきます.
「Component Tree」と書かれている個所に,現在は「ConstraintLayout」と
「Ab TextView- Hello World!」という,二つの要素が並んでいます.
ConstraintLayoutは,この画面内にパーツを配置したときに,どんな規則で並べていくかを決めるものです.これを右クリックして出てくるメニューの中から「Convert view...」を選択してください.すると,この開発環境で使用できる規則の一覧が表示されます(図2).
LinearLayoutは縦一列や横一列に複数のパーツを順番に配置する際に使用することが多いです.
RelativeLayoutは,言葉通り「相対的に」パーツの位置を指定するレイアウトです.ある基準となるパーツに対して,どこの場所にどのぐらい離れて配置するかを記述します.
ConstraintLayoutはそれをもう少し柔軟に,簡単に設定可能なレイアウト方法になります.
中央の「Hello World!」を選択すると,図3のように上下左右にバネのような模様が表示されます.また,画面右側の「Attributes」の欄に色々な情報が表示されます.
このままだと文字が見えにくいので,少し編集します.
図3画面右端の Common Attributesの欄に,TextViewという項目が表示されていますので,text欄に表示したい文字列を記入してください.図4では「こんにちは!!」に変えています.
そのほかにも,文字の大きさやフォント,色なども,この場所で変更できます.図4では,textSizeを30spに,textColorを赤にしてみました.
すぐ上のLayout中に「layout_width」と「layout_height」の箇所があります.layout_widthやlayout_heightに「wrap_content」という文字が入っているはずです.
これは,「コンテンツをくるむ大きさで」と指定されており,文字の長さに応じて自動的に増減します.
13dpなどの定数を指定することもできますが,文字の大きさよりも小さい数字を指定すると,文字が隠れて見えなくなることがあります.
レイアウトの効果は複数のパーツがないとわかりづらいので,新しくパーツを画面に追加します.
左側のPaletteに画面に追加できるパーツの一覧があります.
文字を追加したい場合は,Paletteの中から「Ab TextView」をクリックして端末画面内までドラッグし,配置したい場所でリリースして決定します(図6).
配置後,テキスト部分をクリックして(または,Component Tree内で新しく追加した Ab TextViewを選択して),文字を編集します.
編集後,Component Tree内に「Ab TextView」という項目が新しく追加されていますが,その横に赤い丸の!マークがついています(図7).
!マークをクリックするとエラー内容が表示されます.今回は,上下方向のConstraints(制約)が設定されていないことが原因です.
後から追加した方のTextViewをクリックすると上下に白い〇が表示されます.このうち,下の〇をクリックして下に伸ばすと,矢印が出てきます.この矢印を下の「こんにちは!!」のテキストの上部にある〇にくっつけてください.
しゅっと下にくっついたでしょうか?
次は上側の〇を画面の上部にくっつけてください(図9).するとちょうど上下の中間あたりに自動的にテキストが移動します.
これで「Ab TextView」の横の赤い丸!マークが消えます.
この方法でテキストの内容を変更すると,黄色い△の!マークがついていると思います.これは「この方法でも表示テキストの内容を変更することは可能ですが,できるなら他の方法で変更した方がよい」というお知らせです.推奨されている方法は以下の通りです.
以下のファイルを開いて下さい(図10).
app -> res -> values -> strings.xml
このファイルを開くと,数行程度のプログラムが書かれています.たとえば下記のような文字が書かれています(まったく同じでなくても構いません).
<resources> <string name="app_name">My Application</string> </resources>
ここに,先ほど追加したテキストを下記のように書き加えてください.
テキストの中身は人によって違うと思いますので,注意してください!
<resources> <string name="app_name">My Application</string> <string name="text_hello">こんにちは!!</string> <string name="text_evening">こんばんは★ミ</string> </resources>
図11が追記した様子です.
変更した後に,先ほどまで見ていた activity_main.xmlのDesignタブに戻ります.
画面右端の Common Attributes欄の textのところに,先ほど記述した「text_hello」を入力してみてください.@string/text_helloと表示されますので,text_helloの前に「@string/」という文字も一緒にいれてください(図12).
これでテキストの内容が変更され,Component Tree内に表示されていた黄色の△マークが1つ消えているのがわかります.
Textタブでの変更†
テキスト内容の変更について,上で説明したのと同じ処理を,画面イメージ上ではなくテキストで行うことも可能です.
レイアウトエディタの下部にある Designタブを Textタブに切り替えてください.図13のような画面になるはずです.
この中に
<TextView
から始まる塊が2つあります.
1つ目が,最初から表示されていた文字「Hello World!」(今では「こんにちは!!」)を表示するための記述です.
2つ目が,後から上部に追加した文字を表示するための記述です.
2つ目の <TextView 内の
android:text=
から始まる行を探してください.今は「こんばんは★ミ」になっていますが,ここを「@string/」から始めて,図11で書いた「text_evening」をくっつけたもの(@string/text_evening)に書き換えてください.図14のようになります.
<TextView android:id="@+id/textView2" (省略)
<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:text="@string/text_evening" android:textColor="#2196F3" android:textSize="24sp" app:layout_constraintBottom_toTopOf="@+id/textView3" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" />
このように書き換えると,まだ残っていた黄色の△マークが無事消えます.
Textタブ内のざっくりとした読み方†
Textタブ内には以下のような記述がありました.
<TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/text_hello" android:textColor="#E91E63" android:textSize="30sp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
この記述では,このテキストパーツに「@+id/textView」という名前をつけて識別できるようにし,文字の長さやサイズに応じて自動的に表示面積が変更されるよう,縦横のサイズが「wrap_content」に指定されています.
実際のテキストの中身は「@string/text_hello」に記述されており,色やサイズも指定されています.下4行ではテキストパーツを画面上のどこに配置するかを指定しています.
こんな風にして,テキストの編集でレイアウトや表示の様子を変更することも可能です.
次は,プログラムの実行方法です.