プログラムの編集の履歴(No.2)

履歴一覧
差分を表示
現在との差分を表示
ソースを表示
プログラムの編集へ行く。
- 1 (2024-05-30 (木) 18:47:10)
- 2 (2024-05-30 (木) 18:47:10)

プログラムの編集†

レイアウトエディタでの編集†

図１

図１の真ん中のように，端末の絵と，その中に「Hello World!」という文字が表示されている状態のとき，この端末の絵のことを「レイアウトエディタ」と呼びます．

まず，この画面の中を編集していきます．
「Component Tree」と書かれている個所に，現在は「main (ConstraintLayout)」と「Ab TextView- Hello World!」という，二つの要素が並んでいます．

ConstraintLayoutは，この画面内にパーツを配置したときに，どんな規則で並べていくかを決めるものです．これを右クリックして出てくるメニューの中から「Convert view...」を選択してください．すると，この開発環境で使用できる規則の一覧が表示されます(図２)．
LinearLayoutは縦一列や横一列に複数のパーツを順番に配置する際に使用することが多いです．
RelativeLayoutは，言葉通り「相対的に」パーツの位置を指定するレイアウトです．ある基準となるパーツに対して，どこの場所にどのぐらい離れて配置するかを記述します．
ConstraintLayoutはそれをもう少し柔軟に，簡単に設定可能なレイアウト方法になります．

図２

中央の「Hello World!」を選択すると，図３のように上下左右にバネのような模様が表示されます．また，画面右側の「Attributes」の欄に色々な情報が表示されます．
このままだと文字が見えにくいので，少し編集します．

図３

図３画面右端の Common Attributesの欄に，TextViewという項目が表示されていますので，text欄に表示したい文字列を記入してください．図４では「こんにちは！！」に変えています．
そのほかにも，文字の大きさやフォント，色なども，この場所で変更できます．図４では，textSizeを30spに，textColorを赤にしてみました．

図４

すぐ上のLayout中に「layout_width」と「layout_height」の箇所があります．layout_widthやlayout_heightに「wrap_content」という文字が入っているはずです．
これは，「コンテンツをくるむ大きさで」と指定されており，文字の長さに応じて自動的に増減します．
13dpなどの定数を指定することもできますが，文字の大きさよりも小さい数字を指定すると，文字が隠れて見えなくなることがあります．

図５

レイアウトの効果は複数のパーツがないとわかりづらいので，新しくパーツを画面に追加します．
左側のPaletteに画面に追加できるパーツの一覧があります．
文字を追加したい場合は，Paletteの中から「Ab TextView」をクリックして端末画面内までドラッグし，配置したい場所でリリースして決定します(図６)．

図６

配置後，テキスト部分をクリックして（または，Component Tree内で新しく追加した Ab TextViewを選択して），文字を編集します．
編集後，Component Tree内に「Ab TextView」という項目が新しく追加されていますが，その横に赤い丸の！マークがついています(図７)．

図７

！マークをクリックするとエラー内容が表示されます．今回は，上下方向のConstraints（制約）が設定されていないことが原因です．
後から追加した方のTextViewをクリックすると上下に白い〇が表示されます．このうち，下の〇をクリックして下に伸ばすと，矢印が出てきます．この矢印を下の「こんにちは！！」のテキストの上部にある〇にくっつけてください．

図８

しゅっと下にくっついたでしょうか？
次は上側の〇を画面の上部にくっつけてください(図９)．するとちょうど上下の中間あたりに自動的にテキストが移動します．
左右にも白い○が残っている場合は，同様に画面の左右の端にくっつけてください．これで「Ab TextView」の横の赤い丸！マークが消えます．

図９

この方法でテキストの内容を変更すると，黄色い△の！マークがついていると思います．これは「この方法でも表示テキストの内容を変更することは可能ですが，できるなら他の方法で変更した方がよい」というお知らせです．推奨されている方法は以下の通りです．

以下のファイルを開いて下さい(図１０)．

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>

図１１

図１１が追記した様子です．
変更した後に，先ほどまで見ていた activity_main.xmlのDesignタブに戻ります．
画面右端の Common Attributes欄の textのところに，先ほど記述した「text_hello」を入力してみてください．@string/text_helloと表示されますので，text_helloの前に「@string/」という文字も一緒にいれてください(図１２)．

図１２

これでテキストの内容が変更され，Component Tree内に表示されていた黄色の△マークが１つ消えているのがわかります．

↑

Textタブでの変更†

テキスト内容の変更について，上で説明したのと同じ処理を，画面イメージ上ではなくテキストで行うことも可能です．
レイアウトエディタの下部にある Designタブを Codeタブに切り替えてください．図１３のような画面になるはずです．

図１３

この中に

<TextView

から始まる塊が2つあります．
1つ目が，最初から表示されていた文字「Hello World!」（今では「こんにちは！！」）を表示するための記述です．
2つ目が，後から上部に追加した文字を表示するための記述です．
2つ目の <TextView 内の

android:text=

から始まる行を探してください．今は「こんばんは。」になっていますが，ここを「@string/」から始めて，図１１で書いた「text_evening」をくっつけたもの（@string/text_evening）に書き換えてください．図１４のようになります．

図１４

  <TextView
       android:id="@+id/textView2"
       （省略）

  <TextView
       android:id="@+id/textView"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/text_evening"
       android:textColor="#2196F3"
       android:textSize="24sp"
       app:layout_constraintBottom_toTopOf="@+id/textView2"
       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」に記述されており，色やサイズも指定されています．下４行ではテキストパーツを画面上のどこに配置するかを指定しています．

こんな風にして，テキストの編集でレイアウトや表示の様子を変更することも可能です．

次は，プログラムの実行方法です．

プログラムの編集 の履歴(No.2)