แก้ปัญหาโหลดรูปด้วย Universal Image Loader

Published on
Android
2014/05/getting-started-with-usiversal-image-loader
Discord

วันนี้ขอนำเสนอบทความเกี่ยวกับ Library ครับ คือการใช้ Universal Image Loader มาช่วยแก้ปัญหาในการแสดงผลรูปภาพ ImageView กันครับ

คุณเคยไหมที่เวลาใช้ ImageView บางครั้งโปรแกรมปิดตัว เกิดอาการ OutofMemory ต้องทำการปรับ scale หรือลดขนาดรูปภาพตามความเหมาะสม หรืออีกกรณีเวลาโหลดรูปภาพจากเว็บไซต์ อยากให้มัน cache ลงเครื่องด้วย โดยปกติเราจำเป็นต้องตั้งค่าและเขียนเองทั้งหมด เพื่อให้รองรับปัญหาต่างๆ แต่มาวันนี้ไม่ต้องทำอะไรเองแล้ว เพราะมี Universal Image Loader ตัวนี้แก้ปัญหาเกี่ยวกับรูปภาพของเราได้เป็นอย่างดี และสามารถปรับแต่งให้ใช้งานได้หลากหลายอีก มาดูวิธีการใช้งานกันเลยครับ

Download

เริ่มแรก ก็ทำการดาวน์โหลดตัว Library มาก่อนครับ ปัจจุบันเวอร์ชัน 1.9.2 ครับ ดาวน์โหลดได้จาก Github ของโปรเจ็คได้เลย หรือโดยตรง จากลิงค์นี้

Setup

ขั้นตอนการ Setup ให้ใช้ Universal Image Loader ได้ ก็คือเริ่มแรก ทำการ Add Library ก่อน

Eclipse

เซฟ universal-image-loader-1.9.2.jar ไปไว้ที่โฟลเดอร์ libs ของโปรเจ็ค จากนั้นคลิกขวาเลือก Build Path -> Add to Build Path โปรแกรม Eclipse จะทำการสร้าง Referenced Library ให้เรา

Android Studio

เปิดไฟล์ build.gradle ในโฟลเดอร์ module ของโปรเจ็คเรา คนละตัวกับที่อยู่ที่ root folder นะครับ แล้วเพิ่ม maven dependencies แบบนี้

apply plugin: 'android'

android {
    ...
}

dependencies {
    compile 'com.nostra13.universalimageloader:universal-image-loader:1.9.2'
    ...
}

จากนั้นทดสอบ import com.nostra13.universalimageloader.core.ImageLoader ถ้าได้แสดงว่า ไม่มีปัญหาในการ Add Library :D

Config

มาถึงวิธีการตั้งค่าและใช้งานครับ สมมติว่าทุกท่านมีโปรเจ็คอยู่แล้ว หรือใครไม่มีก็สร้างโปรเจ็คใหม่ได้เลย (ตัวอย่างนี้ผมทำการสร้างโปรเจ็คใหม่ด้วย Eclipse จะได้ fragment มาด้วย)

เริ่มแรกทำการสร้างคลาสขึ้นมา 1 คลาส ตั้งชื่อว่า MyApplication.java จากนั้นทำการ extends android.app.Application และ override เมธอด onCreate() แบบนี้

public class MyApplication extends Application {

	@Override
	public void onCreate() {
		super.onCreate();
	}
}

ไฟล์นี้เราจะเอาไว้ตั้งค่าต่างๆกันครับ วิธีการตั้งค่าและออปชันต่างๆ เอาไว้ก่อนครับ ต่อไป ก็แก้ไขไฟล์ AndroidManifest.xml โดยการเพิ่มแท็ก android:name เป็นคลาส Application ที่เราสร้างเมื่อกี้

<application
    android:name="MyApplication"
    ... >
    <activity>
        ...
    </activity>
</application>

จากนั้นขอ permission internet ก่อนเลยครับ เนื่องจากเป้าหมายส่วนมากคือโหลดรูปภาพจาก internet ทำการแก้ไขไฟล์ AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET" />

และหากต้องการ cache รูปภาพลง SD Card ก็ต้องขอสิทธิ์ในการเขียนไฟล์ด้วย

 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

สุดท้ายไฟล์ AndroidManifest.xml จะได้แบบนี้

AndroidManifest.xml

ทีนี้กลับมาที่ MyApplication ที่ได้สร้างไว้ ต่อมาเพิ่ม ImageLoaderConfiguration แบบนี้

MainAPplication.java

จริงๆ Option และ Config ต่างๆ อ่านแบบละเอียดเพิ่มเติมใน Docs ของมันเลยดีกว่าครับ

ImageLoader

ต่อมา ถึงเวลาแสดงรูปภาพแล้วครับ สมมติว่าทุกคนทำการเชื่อม View กับไฟล์เลเอาท์แล้วละกันนะ

ImageLoader.java

ImageView ก็จะแสดงรูปภาพได้ ดังรูป

Demo

รูปเล็กจริงๆ มันก็ไม่ค่อยมีปัญหาอะไร ฉะนั้นลองเปลี่ยน URL แล้วโหลดรูปใหญ่ๆดูครับเช่น

String imageUri = "https://s3.amazonaws.com/ooomf-com-files/hBd6EPoQT2C8VQYv65ys_White%20Sands.jpg";

รูปภาพจาก unsplash.com

หรืออยากให้เห็นผลชัดเจน ก็ลองใช้กับ GridView หรือ ListView ดูครับ

ทีนี้มาดูที่ URI ของรูปภาพ ไม่ได้โหลดเฉพาะ http อย่างเดียว สามารถโหลดรูปจากเครื่องก็ได้

String imageUri = "http://site.com/image.png"; // โหลดจากเว็บ
String imageUri = "file:///mnt/sdcard/image.png"; // โหลดจาก SD card
String imageUri = "content://media/external/audio/albumart/13"; // โหลดผ่าน content provider
String imageUri = "assets://image.png"; // โหลดจาก assets
String imageUri = "drawable://" + R.drawable.image; // โหลดจาก drawable (เฉพาะ image)

ImageLoadingListener

คลาส ImageLoader สามารถรับ Listener ได้ด้วยเช่นกันครับ โดยรูปแบบ คือใช้ displayImage() โดยเพิ่ม parameter ที่ 3 เป็น Listener ประมาณนี้

ImageLoaderListener

ตัวอย่างด้านบน ก็คือ เมื่อดาวน์โหลดรูปไม่ได้ ก็ให้โชว์รูป image_fail.png แทน แล้วเมื่อโหลดรูปเสร็จ ก็ให้มันโชว์ Animation fade-in ระยะเวลา 1 วินาที ครับ

สรุป

สรุป บทความนี้ก็เป็นการแนะนำ Universal Image Loader แบบคร่าวๆนะครับ เป็นแค่ส่วนหนึ่งเท่านั้น จริงๆแล้วมันยังสามารถปรับแต่ง ตั้งค่า และใช้งานได้หลากหลายครับ หากใครที่ทำแอพเกี่ยวกับการโหลดรูปภาพแนะนำตัวนี้เลยครับ และก็ Documents นั้นมีรายละเอียดเยอะครับ อ่านเพิ่มเติมได้จาก ที่นี่เลยครับ

Buy Me A Coffee
Authors
Discord