- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2024-06-05T22:25:04+09:00","","")
''このページは，古いバージョンのAndroidStudioに沿った説明になっています．
新しいバージョンで動作するか未確認，かつ，未更新の部分もあるので，参考にする場合はそれを踏まえておいてください．''
#author("2024-06-06T16:01:06+09:00","","")
** 画像の準備 [#s7c20aaf]
テキストだけでなく，画像を表示することもできます．~
まず，適当な画像を用意してください．すぐに使えそうな画像がない場合は下の画像を保存して使ってください．保存場所はデスクトップやマイピクチャフォルダでかまいません．
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/julia.jpg, ,70%)
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/sample.jpg,400x300)
#BR
保存したら，画像ファイルをコピーし，AndroidStudioの以下の場所にペーストします．
保存したら，画像ファイルをコピーし，起動中のAndroidStudioの以下の場所にペーストします．
#BR
app -> res -> drawable
#BR
図１だと，左側の，中央より少し上あたりです．
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-1.png, ,60%)
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-1.png)
CENTER:図１
#BR
コピーをCtrl-Cでした場合は，↑のフォルダをクリックしたあとにCtrl-V，マウスの右クリックでコピーした場合は，フォルダを右クリックしてペーストしてください．~
コピーすると，図２のような画面が出てきます．このままOKを押してください．
マウスでドラッグ＆ドロップした場合は，図２のように「移動」となって，元のフォルダから画像が消え（移動し）ます．~
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-2.png, ,60%)
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-1-1.png)
CENTER:図２
#BR
コピーすると，図３のような画面が出てきます．このままOKを押してください．
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-2.png)
CENTER:図３
#BR
これで，画像がプログラム内で使用できる形で登録されます．
** 画像の表示 [#u2e56538]
次に，textViewのときと同様に，これを画面内に配置します．~
左側の「Images & Media」から「ImageView」を探し，横のAndroidの画面内にドラッグ＆ドロップして配置して下さい．ドロップしたあと，図３のような画面が表示されます．
左側の「Common」か「Widgets」から「ImageView」を探し，横のAndroidの画面内にドラッグ＆ドロップして配置して下さい（図４）．ドロップしたあと，図５のような画面が表示されます．
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-3-1.png,600x400)
CENTER:図４
#BR
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-3.png, ,60%)
CENTER:図３
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-3.png,600x641)
CENTER:図５
#BR
上の方に，先ほど登録した画像 julia.jpgがありますので，これを選択します．すると，画面内に画像が表示されます．~
画像の表示の大きさや描画位置を指定したいときは，Propertiesの scaleTypeで設定します(図４)．色々選んで，表示がどうなるか確かめてみてください．
下の方に，先ほど登録した画像 sample.jpgがありますので，これを選択します．すると，画面内に画像が表示されます．~
画像の角をドラッグすると画像の大きさが変えられます．~
配置についても，テキストのときと同様に，周りに〇をくっつけて固定してください（図６）．~
興味があれば，右側のAttributesの中身を色々変えて，表示がどうなるか確かめてみてください．~
~
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-4.png,600x400)
CENTER:図６
#BR
追加したImageViewの横に△！マークがついている場合は，アイコンの箇所にマウスのカーソルを合わせてください．なぜWarningがでているのか，ヒントが出てきます．~
今回は「Image without 'ContentDescription'と出てきているかもしれません．~
基本的に警告は無視して大丈夫ですが，気になる場合は，Codeの中のImageViewの中に，以下の一行を追加してください．~
#BR
#ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-4.png, ,60%)
CENTER:図４
tools:ignore="ContentDescription"
#BR
