2024 Socio Informatics Seminar Wiki Site
プログラムの編集
をテンプレートにして作成
開始行:
* プログラムの編集 [#y92cd6f5]
** レイアウトエディタでの編集 [#o5119c6f]
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図1
#BR
図1の真ん中のように,端末の絵と,その中に「Hello World!...
#BR
まず,この画面の中を編集していきます.~
「Component Tree」と書かれている個所に,現在は「&color(da...
「&color(darkred){Ab TextView- ''Hello World!''};」という...
#BR
ConstraintLayoutは,この画面内にパーツを配置したときに,...
LinearLayoutは縦一列や横一列に複数のパーツを順番に配置す...
RelativeLayoutは,言葉通り「相対的に」パーツの位置を指定...
ConstraintLayoutはそれをもう少し柔軟に,簡単に設定可能な...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図2
#BR
中央の「Hello World!」を選択すると,図3のように上下左右...
このままだと文字が見えにくいので,少し編集します.~
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図3
#BR
図3画面右端の &color(darkred){Common Attributes};の欄に...
そのほかにも,文字の大きさやフォント,色なども,この場所...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図4
#BR
すぐ上のLayout中に「&color(darkred){layout_width};」と「&...
これは,「コンテンツをくるむ大きさで」と指定されており,...
13dpなどの定数を指定することもできますが,文字の大きさよ...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図5
#BR
レイアウトの効果は複数のパーツがないとわかりづらいので,...
左側の&color(darkred){Palette};に画面に追加できるパーツの...
文字を追加したい場合は,Paletteの中から「Ab TextView」を...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図6
#BR
配置後,テキスト部分をクリックして(または,Component Tre...
編集後,Component Tree内に「Ab TextView」という項目が新し...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図7
#BR
!マークをクリックするとエラー内容が表示されます.今回は...
後から追加した方のTextViewをクリックすると上下に白い〇が...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図8
#BR
しゅっと下にくっついたでしょうか?~
次は上側の〇を画面の上部にくっつけてください(図9).する...
左右にも白い○が残っている場合は,同様に画面の左右の端にく...
これで「Ab TextView」の横の赤い丸!マークが消えます.
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図9
#BR
この方法でテキストの内容を変更すると,黄色い△の!マークが...
#BR
以下のファイルを開いて下さい(図10).
app -> res -> values -> strings.xml
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図10
#BR
このファイルを開くと,数行程度のプログラムが書かれていま...
#BR
<resources>
<string name="app_name">My Application</string>
</resources>
#BR
ここに,先ほど追加したテキストを下記のように書き加えてく...
テキストの中身は人によって違うと思いますので,注意してく...
#BR
<resources>
<string name="app_name">My Application</string>
<string name="text_hello">こんにちは!!</string>
<string name="text_evening">こんばんは★ミ</string>
</resources>
#BR
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図11
#BR
図11が追記した様子です.~
変更した後に,先ほどまで見ていた activity_main.xmlのDesig...
画面右端の &color(darkred){Common Attributes};欄の textの...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図12
#BR
これでテキストの内容が変更され,Component Tree内に表示さ...
*** Textタブでの変更 [#o44bd1c5]
テキスト内容の変更について,上で説明したのと同じ処理を,...
レイアウトエディタの下部にある Designタブを Codeタブに切...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図13
#BR
この中に
#BR
<TextView
#BR
から始まる塊が2つあります.~
1つ目が,最初から表示されていた文字「Hello World!」(今で...
2つ目が,後から上部に追加した文字を表示するための記述です...
2つ目の <TextView 内の
#BR
android:text=
#BR
から始まる行を探してください.今は「こんばんは。」になっ...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図14
#BR
#BR
<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/textVie...
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
#BR
このように書き換えると,まだ残っていた黄色の△マークが無事...
*** Textタブ内のざっくりとした読み方 [#i81571ed]
Textタブ内には以下のような記述がありました.
#BR
<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" />
#BR
この記述では,このテキストパーツに「@+id/textView」という...
実際のテキストの中身は「@string/text_hello」に記述されて...
#BR
こんな風にして,テキストの編集でレイアウトや表示の様子を...
#BR
ここまで編集してみたら,[[プログラムの実行方法]]で説明し...
~
[[一週目の作業]]に戻る
終了行:
* プログラムの編集 [#y92cd6f5]
** レイアウトエディタでの編集 [#o5119c6f]
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図1
#BR
図1の真ん中のように,端末の絵と,その中に「Hello World!...
#BR
まず,この画面の中を編集していきます.~
「Component Tree」と書かれている個所に,現在は「&color(da...
「&color(darkred){Ab TextView- ''Hello World!''};」という...
#BR
ConstraintLayoutは,この画面内にパーツを配置したときに,...
LinearLayoutは縦一列や横一列に複数のパーツを順番に配置す...
RelativeLayoutは,言葉通り「相対的に」パーツの位置を指定...
ConstraintLayoutはそれをもう少し柔軟に,簡単に設定可能な...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図2
#BR
中央の「Hello World!」を選択すると,図3のように上下左右...
このままだと文字が見えにくいので,少し編集します.~
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図3
#BR
図3画面右端の &color(darkred){Common Attributes};の欄に...
そのほかにも,文字の大きさやフォント,色なども,この場所...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図4
#BR
すぐ上のLayout中に「&color(darkred){layout_width};」と「&...
これは,「コンテンツをくるむ大きさで」と指定されており,...
13dpなどの定数を指定することもできますが,文字の大きさよ...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図5
#BR
レイアウトの効果は複数のパーツがないとわかりづらいので,...
左側の&color(darkred){Palette};に画面に追加できるパーツの...
文字を追加したい場合は,Paletteの中から「Ab TextView」を...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図6
#BR
配置後,テキスト部分をクリックして(または,Component Tre...
編集後,Component Tree内に「Ab TextView」という項目が新し...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図7
#BR
!マークをクリックするとエラー内容が表示されます.今回は...
後から追加した方のTextViewをクリックすると上下に白い〇が...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図8
#BR
しゅっと下にくっついたでしょうか?~
次は上側の〇を画面の上部にくっつけてください(図9).する...
左右にも白い○が残っている場合は,同様に画面の左右の端にく...
これで「Ab TextView」の横の赤い丸!マークが消えます.
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図9
#BR
この方法でテキストの内容を変更すると,黄色い△の!マークが...
#BR
以下のファイルを開いて下さい(図10).
app -> res -> values -> strings.xml
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図10
#BR
このファイルを開くと,数行程度のプログラムが書かれていま...
#BR
<resources>
<string name="app_name">My Application</string>
</resources>
#BR
ここに,先ほど追加したテキストを下記のように書き加えてく...
テキストの中身は人によって違うと思いますので,注意してく...
#BR
<resources>
<string name="app_name">My Application</string>
<string name="text_hello">こんにちは!!</string>
<string name="text_evening">こんばんは★ミ</string>
</resources>
#BR
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図11
#BR
図11が追記した様子です.~
変更した後に,先ほどまで見ていた activity_main.xmlのDesig...
画面右端の &color(darkred){Common Attributes};欄の textの...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図12
#BR
これでテキストの内容が変更され,Component Tree内に表示さ...
*** Textタブでの変更 [#o44bd1c5]
テキスト内容の変更について,上で説明したのと同じ処理を,...
レイアウトエディタの下部にある Designタブを Codeタブに切...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図13
#BR
この中に
#BR
<TextView
#BR
から始まる塊が2つあります.~
1つ目が,最初から表示されていた文字「Hello World!」(今で...
2つ目が,後から上部に追加した文字を表示するための記述です...
2つ目の <TextView 内の
#BR
android:text=
#BR
から始まる行を探してください.今は「こんばんは。」になっ...
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/setu...
CENTER:図14
#BR
#BR
<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/textVie...
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
#BR
このように書き換えると,まだ残っていた黄色の△マークが無事...
*** Textタブ内のざっくりとした読み方 [#i81571ed]
Textタブ内には以下のような記述がありました.
#BR
<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" />
#BR
この記述では,このテキストパーツに「@+id/textView」という...
実際のテキストの中身は「@string/text_hello」に記述されて...
#BR
こんな風にして,テキストの編集でレイアウトや表示の様子を...
#BR
ここまで編集してみたら,[[プログラムの実行方法]]で説明し...
~
[[一週目の作業]]に戻る
ページ名: