Picasso: การโหลดรูปภาพและการทำงานในแอปพลิเคชัน Android

Picasso คืออะไร

Picasso คือไลบรารีสำหรับการโหลดรูปภาพแบบไม่อยู่กับเวลาใน Android ที่สร้างโดย Square ชื่อนี้ตั้งตามศิลปินปาบโล ปีกาซโซ สะท้อนปรัชญาของไลบรารี: เปลี่ยนงานที่ซับซ้อนให้กลายเป็น API ที่เรียบง่ายและสุภาพ มันเป็นไลบรารีที่ได้รับความนิยมมากที่สุดในการโหลดรูปภาพในชุมชน Android

สถาปัตยกรรมของ Picasso เป็นแบบ น้อยที่สุด: ไลบรารีใช้เธรดพูลสำหรับการโหลด, LruCache สำหรับแคชในหน่วยความจำ และ DiskLruCache สำหรับแคชบนดิสก์ ต่างจาก Glide, Picasso ไม่ต้องการกำหนดค่า AppGlideModule และพร้อมใช้งานทันทีหลังจากเพิ่มการพึ่งพา ทำให้มันเป็นตัวเลือกที่เหมาะสำหรับโปรโตรไทป์และโครงการขนาดเล็ก

Picasso 2.8 เป็นเวอร์ชันที่มั่นคงล่าสุด รองรับ Android API 21+ และ Java 8+ ไลบรารีไม่ต้องการ กำหนดค่า ปลั๊กอืน Gradle หรือคำอธิบาย ซึ่งทำให้การย้ายระหว่างเวอร์ชันง่ายขึ้นและลดความเป็นไปได้ของข้อผิดพลาดระหว่างการอัพเดต แม้จะมีประวัติศาสตร์ที่ยาวนาน, Picasso ยังคงเป็นที่ต้องการในโครงการนับพันโครงการทั่วโลก

งานหลักของ Picasso คือการโหลดรูปภาพตาม URL, ถอดรหัส, เปลี่ยนขนาดหากจำเป็น และแสดงใน ImageView ไลบรารีจัดการเธรดพื้นหลัง แคช และการใช้ ImageView ซ้ำในรายการโดยอัตโนมัติ

ตั้งแต่เปิดตัวในปี 2013, Picasso ได้กลายเป็นมาตรฐานสำหรับการโหลดรูปภาพในชุมชน Android ไลบรารีถูกใช้ในแอปพลิเคชันนับพันโดยอาศัยขอบเกณฑ์การเข้าใช้งานที่ต่ำที่สุด — ต้องใช้โค้ดเพียงหนึ่งบรรทัดสำหรับการใช้ครั้งแรก

ลำดับความสำคัญและการยกเลิกคำขอ

ลำดับความสำคัญ ใน Picasso ช่วยจัดการลำดับการโหลดรูปภาพ โดยปกติคำขอทั้งหมดมีลำดับความสำคัญปกติ แต่สำหรับรูปภาพที่สำคัญสามารถตั้งค่าลำดับความสำคัญสูงโดยวิธี priority หาก ImageView ถูกใช้ซ้ำ (เช่น ใน RecyclerView), Picasso จะยกเลิกคำขอก่อนหน้าโดยอัตโนมัติและเริ่มใหม่ป้องกันการกระพริบของรูปภาพขณะเลื่อนสครอล

คุณสมบัติหลักของ Picasso

Picasso มีชุดคุณสมบัติที่ครอบคลุมสถานการณ์หลักในการทำงานกับรูปภาพในแอปพลิเคชันมือถือโดยไม่ต้องมีความซับซ้อนโดยไม่จำเป็น

แคชหลายระดับ

แคช ของ Picasso ประกอบด้วยสองระดับ: RAM สำหรับการเข้าถึงที่เร็วและดิสก์สำหรับการจัดเก็บถาวร เมื่อขอรูปภาพ ไลบรารีจะตรวจสอบแคชในหน่วยความจำก่อน จากนั้นจึงตรวจสอบดิสก์ และจากนั้นจึงจะทำการร้องขอเครือข่าย ซึ่งช่วยเร่งการแสดงรูปภาพที่โหลดซ้ำได้อย่างมาก

การแปลงรูปภาพ

การแปลง ช่วยให้สามารถเปลี่ยนขนาด ตัด หรือหมุนรูปภาพโดยไม่ต้องถอดรหัสต้นฉบับทุกครั้ง Picasso มีการแปลงแบบในตัว CenterCrop และ CenterInside และยังสามารถสร้างการแปลงแบบกำหนดเองได้ผ่านอินเตอร์เฟส Transformation รูปภาพที่ผ่านการแปลงแล้วจะถูกแคชแยกต่างหาก

Placeholder และรูปภาพข้อผิดพลาด

Placeholder จะแสดงระหว่างโหลดรูปภาพจากเครือข่าย ให้คำติชมแก่ผู้ใช้ รูปภาพข้อผิดพลาดจะแสดงเมื่อการโหลดล้มเหลว Picasso ยังรองรับรูปภาพที่จะแสดงจนกว่าจะโหลดเวอร์ชันใหม่ได้ ซึ่งมีประโยชน์สำหรับอาวาตาร์ที่สามารถอัพเดตได้

การโหลดจากแหล่งที่มากมาย

Picasso รองรับการโหลดรูปภาพจาก URL, ทรัพยากร, ไฟล์, ตัวให้บริการเนื้อหา และ URI เมธอด load() ถูกโอเวอร์โหลดสำหรับทุกประเภทนี้ และไลบรารีจะกำหนดแหล่งที่มาโดยอัตโนมัติ สำหรับทรัพยากรและไฟล์ Picasso จะไม่ทำคำขอเครือข่ายแต่โหลดข้อมูลโดยตรง ซึ่งเร่งการแสดงกราฟิกที่ติดตั้งมา

Picasso ทำงานอย่างไร

Picasso ใช้สถาปัตยกรรมที่อิงตาม RequestCreator และ Dispatcher แต่ละคำขอถูกสร้างผ่าน Picasso.get().load() และดำเนินการในเธรดพูล Dispatcher จัดการคิวคำขอ ลำดับความสำคัญ และการยกเลิกเมื่อ ImageView ถูกใช้ซ้ำ

สถาปัตยกรรมของคำขอ

เมื่อเรียก into(view) Picasso จะสร้างออบเจกต์ Action ที่มี URL, การแปลง, เป้าหมาย และ callback Action จะถูกวางในคิว Dispatcher เเฮลเกินจะโหลดรูปภาผ่าน Downloader (OkHttp โดยปกติ) ถอดรหัส Bitmap ใช้การแปลง และส่งผลลัพธ์ไปยัง UI เธรด รูปภาพทั้งหมดจะถูกปรับให้เข้ากับขนาด ImageView โดยอัตโนมัติ

Picasso.get()
    .load("https://example.com/image.jpg")
    .placeholder(R.drawable.placeholder)
    .error(R.drawable.error)
    .resize(400, 300)
    .centerCrop()
    .into(imageView)

การติดตั้งและกำหนดค่า Picasso

การติดตั้ง Picasso ทำผ่าน Gradle ไลบรารีจัดจำหน่ายผ่าน Maven Central และไม่ต้องการการกำหนดค่าที่ซับซ้อน รุ่นต่ำสุดของ Android API คือ 21

การเพิ่มการพึ่งพา

ในไฟล์ build.gradle ระดับโมดูล ให้เพิ่ม implementation ‘com.squareup.picasso:picasso:2.8’ หลังจากการซิงโครนาย์ Gradle แล้ว Picasso ก็พร้อมใช้งาน สำหรับการทำงานกับเครือข่าย Picasso จะใช้ OkHttp โดยอัตโนมัติหากมีอยู่ในโครงการ หรือ HttpURLConnection ที่ติดตั้งมา

dependencies {
    implementation "com.squareup.picasso:picasso:2.8"
}

// Kafka สำหรับโหลดจาก OkHttp (ไม่บังคับ)
implementation "com.squareup.okhttp3:okhttp:4.12.0"

ตัวบ่งการแก้ไขข้อผิดพลาดและแคช

ตัวบ่ง การแก้ไขข้อผิดพลาดของ Picasso จะแสดงรูปสามเหลี่ยมสีในมุมของแต่ละรูปภาพ: สีแดงสำหรับการโหลดผ่านเครือข่าย, สีน้ำเงินสำหรับแคชบนดิสก์, สีเขียวสำหรับแคชในหน่วยความจำ เปิดใช้งานโดยการเรียก setIndicatorsEnabled(true) บนอินสแตนซ์ Picasso ขนาดแคชโดยปกติคือ 15% ของหน่วยความจำที่ใช้งานได้ของอุปกรณ์

สำหรับการกำหนดค่าอินสแตนซ์ แบบกำหนดเอง ของ Picasso ให้ใช้ Picasso.Builder ซึ่งสามารถตั้ง Executor สำหรับเธรดพื้นหลัง, Downloader สำหรับคำขอเครือข่าย, MemoryCache และ DiskCache อินสแตนซ์แบบกำหนดเองมีประโยชน์โดยเฉพาะในการทดสอบ โดยสามารถแทนที่ Downloader ด้วย stub ที่ส่งคืนรูปภาพโดยไม่ต้องใช้คำขอเครือข่าย

ตัวอย่างการใช้งาน Picasso

ตัวอย่าง ด้านล่างแสดงสถานการณ์ทั่วไปของการทำงานกับ Picasso: การโหลดรูปภาพง่ายๆ, การใช้การแปลง และการโหลดใน RecyclerView

การโหลดรูปภาพใน ImageView

การโหลด พื้นฐานใน ImageView ทำได้ด้วยการเรียกเดียว Picasso จะปรับรูปภาพให้เข้ากับขนาดของ view โดยคำนึงถึง scaleType Placeholder จะแสดงจนกว่าการโหลดจะสำเร็จ และรูปภาพข้อผิดพลาดจะแสดงเมื่อเกิดข้อผิดพลาดการเชื่อมต่อ

Picasso.get()
    .load("https://example.com/photo.jpg")
    .placeholder(R.drawable.loading)
    .error(R.drawable.broken_image)
    .fit()
    .centerCrop()
    .into(imageView)

การใช้การแปลงแบบกำหนดเอง

BlurTransformation ทำให้รูปภาพเบลอตามรัศมีที่กำหนด การแปลงแบบกำหนดเองจะใช้อินเตอร์เฟส Transformation กับเมธอด transform แคชจะเก็บผลลัพธ์ของการแปลงภายใต้คีย์ที่ไม่ซ้ำเพื่อไม่ต้องใช้ซ้ำ

public class BlurTransformation implements Transformation {
    @Override
    public Bitmap transform(Bitmap source) {
        Bitmap blurred = Bitmap.createBitmap(source);
        RenderScript rs = RenderScript.create(context);
        // การใช้เบลอ
        source.recycle();
        return blurred;
    }

    @Override
    public String key() {
        return "blur";
    }
}

การโหลดรูปภาพใน RecyclerView

ใน RecyclerView Picasso จะยกเลิกคำขอสำหรับ ImageView ที่เลื่อนออกนอกหน้าจอ และใช้รูปภาพที่โหลดแล้วซ้ำ ซึ่งป้องกันการรั่วไหลของหน่วยความจำและทำให้การเลื่อนไหลเรียบนิ่ม

public void onBindViewHolder(ViewHolder holder, int position) {
    String url = items.get(position).getImageUrl();
    Picasso.get()
        .load(url)
        .fit()
        .centerCrop()
        .into(holder.imageView);
}

Picasso vs Glide: เปรียบเทียบไลบรารี

การเปรียบเทียบ Picasso และ Glide เป็นคำถามที่พบบ่อยเมื่อเลือกไลบรารีโหลดรูปภาพสำหรับ Android ทั้งสองไลบรารีแก้ปัญหาเดียวกันแต่มีลำดับความสำคัญและลักษณะการใช้งานที่แตกต่างกัน

Picasso เหมาะกับโครงการที่ความง่ายและขนาด APK ที่เล็กที่สุดเป็นสิ่งสำคัญ Glide ถูกเลือกเมื่อต้องการรองรับ GIF, เฟรมวิดีโอ และการเพิ่มเพียมหน่วยความจำสูงสุด Glide จะปรับขนาดรูปภาพให้เหมาะกับขนาด ImageView แน่นอน ซึ่งลดการใช้หน่วยความจำได้ถึง 50% เมื่อเทียบกับ Picasso ในบางสถานการณ์

ในการทดสอบประสิทธิภาพ Glide แสดงผลลัพธ์ที่ดีกว่าเมื่อทำงานกับ RecyclerView เนื่องจากกลไกการโหลดล่วงหน้าและการยกเลิกคำขอโดยอัตโนมัติระหว่างการเลื่อนอย่างรวดเร็ว Picasso ใช้กลยุทธ์ที่ง่ายกว่า ซึ่งทำให้สามารถคาดเดาได้แต่มีประสิทธิภาพน้อยกว่าในปริมาณข้อมูลที่มาก

Picasso มุ่งเน้นที่ ความง่ายของ API และขนาดที่เล็กที่สุด Glide มีฟังก์ชันที่กว้างกว่า: รองรับ GIF, รูปภาพเคลื่อนไหว, เฟรมวิดีโอ และการรวมกับวงจรชีวิต Glide ยังจัดการหน่วยความจำได้อย่างมีประสิทธิภาพมากขึ้นเนื่องจากการปรับขนาดอัตโนมัติให้เหมาะกับขนาด ImageView

ตาม Android Developer Relations Google แนะนำ Glide เป็นไลบรารีที่ต้องการสำหรับการโหลดรูปภาพในโครงการใหม่ Picasso ยังเป็นตัวเลือกที่ยอดเยี่ยมสำหรับโครงการที่ไม่ต้องการ GIF และเฟรมวิดีโอ