แก้ปัญหาโหลดรูปด้วย Universal Image Loader
วันนี้ขอนำเสนอบทความเกี่ยวกับ 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 ก็จะแสดงรูปภาพได้ ดังรูป
รูปเล็กจริงๆ มันก็ไม่ค่อยมีปัญหาอะไร ฉะนั้นลองเปลี่ยน 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 นั้นมีรายละเอียดเยอะครับ อ่านเพิ่มเติมได้จาก ที่นี่เลยครับ
- Source Code : **Gist: https://gist.github.com/Phonbopit/b7d34920c72a88e42e53 **
- Cover Image : https://github.com/nostra13/Android-Universal-Image-Loader*
- Authors
- Name
- Chai Phonbopit
- Website
- @Phonbopit