Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)
Trong hướng dẫn nhanh này, chúng ta tìm hiểu sơ lược về thư viện nổi tiếng về tải và xử lý hình ảnh trên Android, Picaso. Nó là một thư viện đơn giản và thực dụng được tạo ra và duy trì bời Square. Nó làm việc rất tốt với hình ảnh trong các dự án Android của bạn.
1. Giới thiệu
Picaso là một thư viện tải và xử lý hình ảnh cho Android. Nó được tạo ra và duy trì bởi Square, và cung cấp việc tải và xử lý hình ảnh. Nó đơn giản hoá quá trình hiển thị hình ảnh từ một nguồn bên ngoài. Trong nhiều trường hợp, chỉ một ít code là đủ để cài đặt thư việc đơn giản này.
Picaso làm việc rất tốt trong việc hiển thị hình ảnh từ xa. Thư viện xử lý mọi giai đoạn của quá trình, từ khởi tạo các yêu cầu HTTP đến lưu hình ảnh vào bộ nhớ đệm. Điều này có thể hơi dài dòng khi tự mình viết code để thực hiện những hành động này. Trong hướng dẫn nhanh này, chúng ta sẽ tìm hiểu một số trường hợp sử dụng thông dụng.
2. Cài đặt
Bắt đầu bằng cách tải về tập tin JAR từ trang web của Picasso. Cài đặt được thực hiên như thông thường. Nếu bạn cần trợ giúp ở bước này, thì hãy đọc qua hướng dẫn này bởi Shane Condor và Lauren Darcey.
Nếu bạn đang sử dụng Android Studio, thì bạn có thể thêm compile 'com.squareup.picasso:picasso:2.3.3' vào tập tin build.gradle trong phần dependency.
3. Thực hiện
Bước 1: Tạo một dự án mới
Tạo một dự án mới trong IDE của bạn. Đảm bảo chọn một Activity rỗng nếu bạn đang sử dụng Android Studio.
Bước 2: Thêm phần tử hình ảnh
Mở tập tin layout cho Activity chính. Chúng ta cần thêm một ImageView vào layout. Không cần phải quá bóng bẩy. Đoạn code sau đây cho bạn thấy những gì tôi muốn nói.
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
Bước 3: Thêm Picasso
Chuyển đến tập tin Activity chính. Thêm đoạn code sau đây vào phương thức onCreate.
ImageView imageView = (ImageView) findViewById(R.id.imageView);
Picasso.with(this)
.load("https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg")
.into(imageView);
Trong dòng đầu tiên, chúng ta lấy một tham chiếu đến đối tượng ImageView ở trong tập tin layout. Sau đó chúng ta nạp hình ảnh vào trong ImageView sử dụng thư việc Picasso. Đầu tiên chúng ta chỉ định Context bằng cách gọi with và truyền Context vào. Sau đó chúng ta gọi phương thức load và cung cấp cho nó vị trí của hình ảnh, đó là một URL trong trường hợp này. Cuối cùng, chúng ta nói với Picasso nơi nó sẽ hiển thị hình ảnh khi nó đã lấy xong bằng cách gọi into và truyền vào đối tượng imageView.
IDE của bạn sẽ yêu cầu bạn nhập thư viện Picasso. Tuy nhiên, để làm điều này bằng tay hãy thêm lệnh import sau đây vào phía trên của lớp Activity.
import com.squareup.picasso.Picasso;
Bước 4: Yêu cầu quyền
Để Picasso làm công việc của nó, đảm bảo thêm <uses-permission android:name="android.permission.INTERNET" /> vào tập tin manifest của dự án.
Bước 5: Build và Chạy
Chúng ta đã gần như xong. Nếu bạn build và chạy ứng dụng, bạn sẽ thấy hình ảnh được nạp trên màn hình.
4. Thêm các ví dụ
Picassso có rất nhiều công dụng. Trong ví dụ sau đây, chúng ta sử dụng Picasso để lấy một hình ảnh từ xa và thay đổi kích thước nó trước khi hiển thị nó trong một ImageView.
Picasso.with(this) .load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg) .resize(100, 100) .into(imageView)
Picasso cũng hỗ trợ biến đổi hình ảnh, chẳng hạn như xoay. Trong đoạn code tiếp theo, chúng ta lấy một hình ảnh từ xa và xoay nó 180 độ trước khi hiển thị nó trong một ImageView.
Picasso.with(this)
.load("https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg")
.rotate(180)
.into(imageView);
Nếu ứng dụng của bạn dựa vào tài nguyên từ xa, thì điều quan trọng là thêm một dự phòng dưới hình thức của một hình ảnh thay thế. Hình ảnh thay thế được hiển thị ngay lập tức và được thay thế bởi hình ảnh được xoay khi Picasso đã hoàn tất việc lấy nó.
Picasso.with(this)
.load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg)
.placeholder(R.drawable.image_name)
.into(imageView);
Picasso hỗ trợ hai kiểu hình ảnh thay thế. Chúng ta đã thấy cách phương thức placeholder làm việc, nhưng cũng có một phương thức error chấp nhận một hình ảnh thay thế. Picasso sẽ cố gắng tải về hình ảnh từ xa ba lần và hiển thị hình ảnh thay thế nếu nó không thể lấy được hình ảnh từ xa.
Picasso.with(this)
.load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg)
.error(R.drawable.image_name)
.into(imageView);
Lưu ý rằng bạn có thể kết hợp các phương thức placeholder và error như chỉ ra trong đoạn code sau.
Picasso.with(this)
.load(https://cms-assets.tutsplus.com/uploads/users/21/posts/19431/featured_image/CodeFeature.jpg)
.placeholder(R.drawable.image_name_default)
.error(R.drawable.image_name_error)
.into(imageView);
Tổng kết
Với sự đơn giản của Picasso, chắn chắc chỉ mất của bạn ba mươi phút. Nếu bạn tạo một ứng dụng thường xuyên nạp hình ảnh, thì Picasso có thể làm cho công việc của bạn trở nên đơn giản hơn.
