Hiển thị GIF động

Ảnh động GIF nâng cao khả năng giao tiếp và thể hiện bản thân, thêm hiệu ứng động và yếu tố hấp dẫn vào các cuộc trò chuyện giúp người dùng truyền tải cảm xúc, thể hiện cảm xúc và hài hước hiệu quả hơn so với chỉ có hình ảnh tĩnh hoặc văn bản. Sự phổ biến của ảnh GIF trong nền văn hoá trực tuyến khiến việc tích hợp chúng trở nên cần thiết để duy trì tính phù hợp và hấp dẫn đối với những người dùng mong đợi các tính năng hiện đại và trải nghiệm đa phương tiện phong phú.

Hiển thị ảnh GIF động bằng thư viện tải hình ảnh

Thư viện tải hình ảnh thực hiện rất nhiều công việc khó khăn cho bạn, thường thêm hỗ trợ có khả năng tương thích ngược cho các tính năng như GIF động. Nội dung sau đây mã minh hoạ cách triển khai phát lại GIF động bằng cách sử dụng Thư viện tải hình ảnh cuộn:

Thêm phần phụ thuộc Coil cho GIF:

implementation("io.coil-kt:coil-gif:2.6.0")

Tạo trình tải hỗ trợ GIF bằng cả nền tảng ImageDecoder (đã thêm vào) trong Android 9 (API cấp 28), cũng như GifDecoder của Coil để có khả năng tương thích ngược:

val gifEnabledLoader = ImageLoader.Builder(this)
    .components {
        if ( SDK_INT >= 28 ) {
            add(ImageDecoderDecoder.Factory())
        } else {
            add(GifDecoder.Factory())
        }
    }.build()

Sử dụng gifEnabledLoader trong thành phần kết hợp Coil AsyncImage:

AsyncImage(
    imageLoader = gifEnabledLoader,
    ...
)

Hiển thị ảnh GIF động bằng tính năng hỗ trợ nền tảng Android

AsyncImage(
     model = request,
     imageLoader = videoEnabledLoader,
     contentDescription = null
 )

Android 9 trở lên (API cấp 28) tích hợp sẵn tính năng hỗ trợ các tệp GIF động. Với một chút trợ giúp từ thư viện Đồng hành, Jetpack Compose có thể phát các ảnh động này chỉ bằng vài dòng mã.

Thêm phần phụ thuộc thư viện Accompanist để hỗ trợ trình vẽ có thể vẽ:

implementation("com.google.accompanist:accompanist-drawablepainter:0.35.0-alpha")

Tạo một phương thức tải GIF động vào AnimatedImageDrawable sử dụng ImageDecoder:

private fun createAnimatedImageDrawableFromImageDecoder(context: Context, uri: Uri): AnimatedImageDrawable {
    val source = ImageDecoder.createSource(context.contentResolver, uri)
    val drawable = ImageDecoder.decodeDrawable(source)
    return drawable as AnimatedImageDrawable
}

Sử dụng overrideDrawablePainter với AnimatedImageDrawable:

Image(
    painter = rememberDrawablePainter(
        drawable = createAnimatedImageDrawableFromImageDecoder(applicationContext, mediaUri)),
     contentDescription = "animated gif"
)

Hỗ trợ tệp GIF từ bàn phím hình ảnh và nội dung đa dạng thức khác

Tệp GIF động là một tính năng phổ biến trong nhiều bàn phím Android, bao gồm cả Gboard của Google. Cách hiện tại được đề xuất để hỗ trợ mọi loại hình dán hoặc hoạt ảnh, cho dù đến từ phương thức nhập hay từ phương thức khác là sử dụng OnReceiveContentListener.

Xem Nhận nội dung đa dạng thức để tìm hiểu thêm về cách triển khai hỗ trợ cho nhận ảnh động GIF và nội dung đa phương tiện khác trong ứng dụng của mình.