Thư viện Picasso – Load ảnh trong Android từ URL

Bài viết đã được cập nhật vào: 30/09/2020

Khi phát triển ứng dụng có nhiều ảnh hoặc phải load và hiển thị ảnh từ server thì có rất nhiều bạn băn khoăn là làm sao cho app không bị đơ UI, khi chờ phải load ảnh Trước đây thì mình thường viết AsyncTask cho chạy trong MainThead, những load ảnh sẽ chạy bất đồng bộ để app hiển thị hết xong thì ảnh load về dần dần. Chứ nếu để load ảnh tuần tự thì chắc để chờ đợi xong load ảnh mà chưa kịp load xong đã chuyển màn hình thì chắc là đơ luôn app Nhưng từ khi chuyển sang dùng Picasso thì không cần phải lo vấn đề này nữa bởi Picasso đã làm hết những phần này rùi. Chính vì thế trong bài viết này mình giới thiệu thư viện chuyên về download ảnh từ server cho app android rất tuyệt vời.

Trang chủ: http://square.github.io/picasso/

1. Các ưu điểm của Picasso

Picasso có những ưu điểm sau: 1. Đơn giản hóa code, chính là ưu điểm hàng dầu của Picasso, thay vì viết nhiều dòng bạn chỉ cần viết có 1 dòng là có thể load được ảnh 2. Tối ưu hóa bộ nhớ sử dụng của ứng dụng 3. Tự động sử dụng RAM cache và Disk cache để tối ưu hóa lưu lượng mạng và tăng tốc độ hiển thị ảnh 4. Tự động transforms bitmap và cancel download ngữ cảnh. Bạn sẽ không cần phải chú ý đến transforms bitmap và download bị cancel hay không. Công việc này thư viện làm hết => Đó chính là ưu điểm chính của Piccaso, mình chỉ khoái là nó chỉ cần có vài dòng làm được hết không phải sử dụng nhiều code

2. Cách sử dụng Picasso

Việc sử dụng picasso được đơn giản hóa như là cách code của nó vậy

2.1. Thêm thư viện vào build.gradle

Bạn chỉ cần copy đoạn mã sau vào trong file build.gradle

 dependencies {
    compile 'com.squareup.picasso:picasso:2.5.2'
}

* Thêm các quyền sau vào AndroidManifest.xml file .

2.2. Load ảnh từ internet vào view

Picasso.with(context).load("http://i.imgur.com/DvpvklR.png").into(imageView);

Thật đơn giản, chỉ với 1 dòng code là ta đã có thể hiển thị ảnh lên view, nếu không sử dụng thư viện thì cần phải code nhiều. Sử dụng thư viện giúp tránh được bug phát sinh.

3. Các options của Picasso

3.1. Placeholder

Cho phép hiển thị mặc định ảnh nào đó trong quá trình chờ load image vào View, cái này giống như lúc thiết kế view hiển thị mình cho luôn ảnh mặc định sẽ hiển vào ImageView

Picasso.with(context)
	.load("http://i.imgur.com/DvpvklR.png")
	.placeholder(R.mipmap.ic_launcher)
	.into(imageView);

3.2. Error

Sẽ hiển thị bức ảnh khi việc load ảnh từ server không thể hoàn thành hoặc có lỗi xảy ra trong quá trình tải ảnh

Picasso.with(context)
	.load("http://i.imgur.com/DvpvklR.png")
	.placeholder(R.mipmap.ic_launcher)
	.error(R.drawable.error)
	.into(imageView);

3.3. RESOURCE LOADING

• Load resource từ drawable

Picasso.with(context).load(R.drawable.landing_screen).into(imageView1);

• Load resouce từ asset

Picasso.with(context).load("file:///android_asset/DvpvklR.png").into(imageView2);

• Load resource từ file

Picasso.with(context).load(new File(...)).into(imageView3);

3.4 TRANSFORMATIONS

Bạn có thể chuyển đổi kích thước của ảnh để phù hợp với view hiển thị và bộ nhớ

Picasso.with(context)
  .load(url)
  .resize(50, 50)
  .centerCrop()
  .into(imageView)

Ví dụ:
* Code for MainActivity.java file.

package com.android_examples.picassolibrary_android_examplescom;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import com.squareup.picasso.Picasso;
 
public class MainActivity extends AppCompatActivity {
 
    ImageView imageview;
    Button button ;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        button = (Button)findViewById(R.id.button);
        imageview = (ImageView)findViewById(R.id.imageView);
 
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
 
                ShowImageUsingPicasso();
 
            }
        });
    }
 
    public void ShowImageUsingPicasso(){
 
        Picasso.with(MainActivity.this)
                .load("https://www.android-examples.com/wp-content/uploads/2016/03/demo_image.jpg")
                .placeholder(R.mipmap.ic_launcher)
                .error(R.mipmap.ic_launcher)
                .resize(300,300)
                .into(imageview);
 
    }
}

* Code for activity_main.xml layout file.

<!--?xml version="1.0" encoding="utf-8"?-->
 
 
 
 
    <button>
</button>

* Code for AndroidManifest.xml file.

<!--?xml version="1.0" encoding="utf-8"?-->

* Screenshot:

Chúc các bạn thành công!

Xem thêm tại trang chủ: http://square.github.io/picasso/

Biên tập nội dung: Kynangso.net