Xamarin Visual StudioでPicassoを使って画像を表示してみました。

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のコードは以下です。

<?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>

<?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のコードを下のように書き換えました。

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);
                }
            };



        }
    }
}

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のコードを下のように書き換えます。

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);

                }
            };

        }
    }
}

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を実際の値に書き換えると使用できます。

Xamarin関連書籍の検索結果はこちらです。

楽天で「Xamarin」を検索した結果

アマゾンで検索した結果