謎とき会(Android画像ライブラリ調査会)@2018/02/21

コピペ、リンククリック用の補完資料
http://tshion.webcrow.jp/itlog/index.html?id=20180222125216

Transcript

1. 謎とき会 ～Android 画像ライブラリ調査会～ Shion(@shion_engineer) 2018/02/21( 水)
2. 謎とき会とは 疑問に思うけど、 なかなか調べられないもの（ 謎） を、 いろんな人を巻き込んで勉強してみる会 ※ 脱出ゲー ムとかではないので、 ご注意ください m(_ _)m 2
3. 今回のテー マ Android の画像ライブラリの種類や使い方の調査 動機 Android の画像ライブラリって何を使えば良いか 分からないから……。 Qiita とかの紹介記事を見るだけで終わってしまう から……。 3
4. 画像ライブラリの動向 DroidKaigi 2017 のサイバー エー ジェントさんのブー スでこんなアンケー トがありました。 ※DroidKaigi2017 に参加して感じた今後のAndroid 開 発 に掲載されている画像を引用 4
5. 画像ライブラリの動向 去年の話ではあるけれど、 Picasso Glide Fresco が主流みたい……。 5
6. 画像ライブラリ使用歴 Picasso → 使ったことある Glide → 何それ Fresco → 何それ 6
7. なので一緒に勉強できると幸いです m(_ _)m 7
8. 今日の流れ 最初に画像ライブラリPicasso のハンズオンを行いま す。 その後に各自で画像ライブラリの調査等をしてい く流れです。 時間 作業内容 19:00 ~ 20:30 Picasso を使ってみる 20:30 ~ 21:30 各自で画像ライブラリを調査する 21:30 ~ 22:00 成果発表 8
9. Picasso を使ってみる 9
10. Picasso とは Square 社製の画像ライブラリ。 手軽に画像を扱える ようになるので、 とても便利！！ 特にサー バー にある画像の表示がすごく楽になる 導入前 導入後 画像を通信で取得して、 Bitmap 等で加工して、UI に 反映…… URL を指定するだけ で、 あとは勝手にUI に反映 ※ 使わない時の実装は下記ブログのようになります。 【Android プログラミング入門 #007】 ネット上の画 像を取得しImageView に表示する 10
11. サンプルコー ド サー バー にある画像を取得して、Android のUI に反 映するコー ドは Picasso.with(context) .load("http://i.imgur.com/DvpvklR.png") .into(imageView); たったこれだけ 11
12. ということでハンズオン！ 12
13. ハンズオンの流れ サー バー 上の画像とロー カル画像を表示していきます。 1. Android のプロジェクトを新規作成する 2. レイアウトファイルをいじる 3. gradle をいじる 4. AndroidManifest をいじる 5. コー ドをいじる 6. 実行する！ 13
14. 1. Android のプロジェクトを新規作 成する 基本的にはぽちぽちするだけです。 Empty Acivity で作成してください。 14
15. 2. レイアウトファイルをいじる activity_main.xml を修正します。 下記をコピペして、 書き換えてください。 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </FrameLayout> 15
16. 3. gradle をいじる app/build.gradle にPicasso を導入するための記述を 追加します。 dependencies { implementation fileTree(dir: 'libs', include: ['*.jar']) implementation 'com.android.support:appcompat-v7:26.1.0' implementation 'com.android.support.constraint:constraint-la testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1 androidTestImplementation 'com.android.support.test.espresso // Picasso compile 'com.squareup.picasso:picasso:2.5.2' } 16
17. 4. AndroidManifest をいじる ネットワー ク設定を追加します。 AndroidManifest.xml に下記を追記してください。 <!-- パー ミッション設定 --> <uses-permission android:name="android.permission.INTERNET" /> 17
18. 5. コー ドをいじる( サー バー 画像編) MainActivity に画像を表示するためのコー ドを書い ていきます。 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 画像の表示場所の取得 ImageView imageView = findViewById(R.id.image); // 画像の読み込み Picasso.with(this) .load("http://i.imgur.com/DvpvklR.png") .into(imageView); } 18
19. 6. 実行する！ 19
20. 余談 画像の表示を確認できたら、 アプリを終了させ、 機内 モー ドにしてから、 再度アプリを起動してみてくださ い。 おそらくキャッシュされた画像が表示される…… は ず。 20
21. 5. コー ドをいじる( ロー カル画像編) mipmap-xxxhdpi/ic_launcher.png をdrawable フォル ダー にコピー します。 ※load() にmipmap を指定してうまくいかなかったの で……。 21
22. 5. コー ドをいじる( ロー カル画像編) MainActivity に画像を表示するためのコー ドを書い ていきます。 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 画像の表示場所の取得 ImageView imageView = findViewById(R.id.image); // 画像の読み込み Picasso.with(this) .load(R.drawable.ic_launcher) .into(imageView); } 22
23. 6. 実行する！ 23
24. Tips 1 画像の読み込み中、 画像が読み込めなかった時の画像 を設定することができます。 コー ドは下記のような感じです。 Picasso.with(context) .load(url) .placeholder(R.drawable.user_placeholder) .error(R.drawable.user_placeholder_error) .into(imageView); 24
25. Tips 2 画像パスの指定方法で落ちる場合があるので注意！ OK! String path = null; Picasso.with(context) .load(path) .into(imageView); NG! (IllegalArgumentException) String path = ""; Picasso.with(context) .load(path) .into(imageView); 25
26. Tips 3 t() は画像表示領域の大きさが決まっている必要があ るので気をつけて！ // 画像の表示場所の取得 ImageView imageView = findViewById(R.id.image); // 画像の読み込み Picasso.with(this) .load(R.drawable.ic_launcher) .fit() .into(imageView); 26
27. NG <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" /> OK <ImageView android:id="@+id/image" android:layout_width="match_parent" android:layout_height="match_parent" android:adjustViewBounds="true" /> 27
28. ハンズオンお疲れ様でしたm(_ _)m 28
29. 各自で調査 m(_ _)m 29
30. 成果発表 感想を頂戴できると嬉しいです(^ ^) 30
31. 参考文献 DroidKaigi2017 に参加して感じた今後のAndroid 開発 Picasso の公式ペー ジ Picasso のGitHub Glide のGitHub Fresco のGitHub 【Android プログラミング入門 #007】 ネット上の 画像を取得しImageView に表示する 31