Picassoを使えば、画像ダウンロードやキャッシュを効率的に行ってくれるという情報があったので、Xamarin Visual Studioでサンプルアプリを作ってみました。
スポンサーリンク
「PiccasoTest」という名前にしました。(Picassoのスペル間違えました。。。)
まず、プロジェクト「PiccasoTest」を作成
Picassoのライブラリを追加
PicassoのライブラリはNugetで追加します。
ツール>Nugetパッケージマネージャー>パッケージマネージャーコンソール
「Install-Package Square.Picasso」と入力しEnterキーを押すと、
インストールされます。
いろいろインストールされていますね。
参照に「Square.OkHttp」、「Square. OkIO」、「Square. Picasso」が追加されました。
Main.axmlに、Plain Text、Button、ImageViewを追加しました。
Plain Textには、画像のURLを入力しておいて、Buttonをクリックしたら、ImageViewに画像が表示される予定です。
Main.axmlのコードは以下です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:minWidth="25px" android:minHeight="25px"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/editText1" android:text="https://became-free.com/wp-content/uploads/2017/04/sample_0.jpg" /> <Button android:text="画像表示" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/button1" /> <ImageView android:src="@android:drawable/ic_menu_gallery" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/imageView1" /> </LinearLayout> |
MainActivity.csのコードを下のように書き換えました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
using Android.App; using Android.Widget; using Android.OS; using System; using Square.Picasso; namespace PicassoTest { [Activity(Label = "PicassoTest", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity { protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); // Set our view from the "main" layout resource SetContentView (Resource.Layout.Main); EditText txtURL = FindViewById<EditText>(Resource.Id.editText1); Button btnDispImage = FindViewById<Button>(Resource.Id.button1); ImageView ivImage = FindViewById<ImageView>(Resource.Id.imageView1); btnDispImage.Click += (object sender, EventArgs e) => { if (String.IsNullOrWhiteSpace(txtURL.Text)) { } else { Picasso.With(this).Load(txtURL.Text).Into(ivImage); } }; } } } |
起動してみました。
画像表示ボタンをクリックします。
成功しました。
エミュレータだとなぜか動作しますが、実機で起動する場合、
AndroidマニフェストでINTERNETのパーミッションを設定しておく必要があります。
PicassoでBasic認証
画像ファイルがBasic認証の設定されているサーバーにある場合は、
JakeWharton.Picasso2OkHttp3Downloaderというライブラリを利用します。
ツール>Nugetパッケージマネージャー>パッケージマネージャーコンソールで、
「 Install-Package JakeWharton.Picasso2OkHttp3Downloader 」と入力しEnterキーを押すと、
インストールされます。
そして、MainActivity.csのコードを下のように書き換えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
using Android.App; using Android.Widget; using Android.OS; using System; using Square.Picasso; using JakeWharton.Picasso; using Square.OkHttp3; namespace PicassoTest { [Activity(Label = "PicassoTest", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity { protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); // Set our view from the "main" layout resource SetContentView (Resource.Layout.Main); EditText txtURL = FindViewById<EditText>(Resource.Id.editText1); Button btnDispImage = FindViewById<Button>(Resource.Id.button1); ImageView ivImage = FindViewById<ImageView>(Resource.Id.imageView1); //Basic認証のuserとpasswordを書き換えて使用してください。 string credential = Credentials.Basic("user", "password"); var client = new OkHttpClient.Builder() .AddInterceptor(chain => { var newRequest = chain.Request() .NewBuilder() .AddHeader("Authorization", credential) .Build(); return chain.Proceed(newRequest); }) .Build(); // create the picasso handle var picasso = new Picasso.Builder(this) .Downloader(new OkHttp3Downloader(client)) .Build(); Picasso.SetSingletonInstance(picasso); btnDispImage.Click += (object sender, EventArgs e) => { if (String.IsNullOrWhiteSpace(txtURL.Text)) { } else { Picasso.With(this).Load(txtURL.Text).Into(ivImage); } }; } } } |
「Basic認証のuserとpasswordを書き換えて使用してください。」と書いてあるところの下の、userとpasswordを実際の値に書き換えると使用できます。