画像の表示 の変更点
Top/画像の表示
- 追加された行はこの色です。
- 削除された行はこの色です。
- 画像の表示 へ行く。
- 画像の表示 の差分を削除
#author("2024-06-06T15:00:29+09:00","","") * 画像の準備 [#s7c20aaf] #author("2024-06-06T16:01:06+09:00","","") ** 画像の準備 [#s7c20aaf] テキストだけでなく，画像を表示することもできます．~ まず，適当な画像を用意してください．すぐに使えそうな画像がない場合は下の画像を保存して使ってください．保存場所はデスクトップやマイピクチャフォルダでかまいません． #BR #ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/sample.jpg,400x300) #BR 保存したら，画像ファイルをコピーし，起動中のAndroidStudioの以下の場所にペーストします． #BR app -> res -> drawable #BR 図１だと，左側の，中央より少し上あたりです． #BR #ref(http://www.wakayama-u.ac.jp/~itou/SISeminar/img/4-1.png) CENTER:図１ #BR コピーをCtrl-Cでした場合は，↑のフォルダをクリックしたあとにCtrl-V，マウスの右クリックでコピーした場合は，フォルダを右クリックしてペーストしてください．~ マウスでドラッグ＆ドロップした場合は，図２のように「移動」となって，元のフォルダから画像が消え（移動し）ます．~ #BR #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] ** 画像の表示 [#u2e56538] 次に，textViewのときと同様に，これを画面内に配置します．~ 左側の「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,600x641) CENTER:図５ #BR 下の方に，先ほど登録した画像 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 tools:ignore="ContentDescription" #BR