URLで公開されている画像をAndroidから効率的に扱うライブラリとしてはPicassoとGlideが有名です。
今回はPicassoの導入について書きます。
Picassoとは
画像のダウンロード、変形、メモリキャッシュといった処理をよしなにやってくれるライブラリです。
やること
この操作をやった結果は以下のリポジトリに上げてあります。
github.com
Gradleに追記
Module: Appのbuild.gradleにライブラリを追記してSyncします。
執筆時点では2.71828が最新でしたが、GitHubのリリースから確認してください。
//for picasso implementation 'com.squareup.picasso:picasso:2.71828'
追記後全文。
apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply plugin: 'kotlin-android-extensions' android { compileSdkVersion 28 defaultConfig { applicationId "com.wrongwrong.picassosample" minSdkVersion 15 targetSdkVersion 28 versionCode 1 versionName "1.0" testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { //for picasso implementation 'com.squareup.picasso:picasso:2.71828' implementation fileTree(dir: 'libs', include: ['*.jar']) implementation"org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" implementation 'com.android.support:appcompat-v7:28.0.0-rc02' implementation 'com.android.support.constraint:constraint-layout:1.1.3' testImplementation 'junit:junit:4.12' androidTestImplementation 'com.android.support.test:runner:1.0.2' androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2' }
Manifestに追記
ネットワークを使うのでパーミッションを書きます。
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
追記後全文。
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.wrongwrong.picassosample"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme"> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
レイアウト準備
今回はImageViewに画像を読み込む形とします。
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <ImageView android:id="@+id/imageView" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </android.support.constraint.ConstraintLayout>
コードに追記
やっている内容はコード内のコメントの通りで、指定したURLから取ってきた画像に変形処理を加え、ImageViewに表示しています。
package com.wrongwrong.picassosample import android.support.v7.app.AppCompatActivity import android.os.Bundle import com.squareup.picasso.Picasso import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) Picasso.get() //いらすとやの画像URL .load("https://1.bp.blogspot.com/-kwMHBpDRC98/WMfCOCDhmCI/AAAAAAABClk/0YhKPlx69H8akEluJniMmVV-RoJCRtPvACLcB/s800/onsei_ninshiki_smartphone.png") .resize(300, 300) //表示サイズ指定 .centerCrop() //resizeで指定した範囲になるよう中央から切り出し .into(imageView) //imageViewに流し込み } }
結果
以下のように表示できます。