que es bobina
Abra github, luego busque la bobina, puede ver la siguiente introducción
Coil es una biblioteca de carga de imágenes de Android que carga imágenes a través de rutinas de Kotlin.
Desplácese hacia abajo en el LÉAME, puede ver ese párrafo
- Tengo que decir que la bobina es realmente fragante.
¿Cómo se componen las imágenes de visualización?
Antes de cargar las imágenes de la red, aún debe sentar las bases y ver cómo se muestran las imágenes ordinarias.
formato de imagen
Mirando hacia atrás en los puntos de conocimiento, los formatos de imágenes generalmente se dividen en mapas de bits y gráficos vectoriales.
-
Mapa de bits: en Android nativo, use Mapa de bits para cargar un mapa de bits. El mapa de bits está compuesto de píxeles y se distorsionará cuando se amplíe.
-
Gráficos vectoriales: los gráficos vectoriales se dibujan de acuerdo con las características geométricas y no se distorsionarán después de la ampliación. En Android nativo, generalmente se carga con VectorDrawable o una biblioteca de terceros (Glide/coil).
componer cargas imágenes locales (Imagen)
En Android nativo, ImageView generalmente se usa para mostrar imágenes. En Composer, Image se usa para mostrar una imagen, de la siguiente manera:
@Composable
fun ShowLauncher() {
Image(painter = painterResource(id = R.drawable.jin), contentDescription = "")
}
复制代码- Retorcida la pregunta, Jhin es tan guapo
Explicación de parámetros de imagen
Parámetro requerido
-
pintor : use el recurso de pintor para crear un objeto de pintor, que puede ser ImageBitmap (clase de composición de mapa de bits) / ImageVector (clase de composición vectorial), el tipo específico está determinado por el formato de la imagen en sí.
-
contentDescription : para el modo de accesibilidad
parámetros no esenciales
- alineación: define cómo se presenta la imagen en el diseño principal
- contentScale: define reglas de escala
- alfa: transparencia
- colorFilter: se utiliza para modificar el color de la imagen
Tamaño de la imagen
En el desarrollo nativo de Android, el tamaño general se puede configurar de tres maneras, que son valores específicos/envoltura/coincidencia, en composición, los correspondientes son los siguientes:
- Valor específico --> xxx.dip
- envolver --> por defecto es envolver
- coincidir -> tamaño máximo de relleno / altura máxima de relleno / ancho máximo de relleno
Intentémoslo, amplía la imagen a toda la pantalla
@Composable
fun ShowLauncher() {
Image(
painter = painterResource(id = R.drawable.jin),
contentDescription = "",
modifier = Modifier.fillMaxWidth()
)
}
复制代码- emmm..., hay cambios, pero no parece estar a la altura de nuestras altas expectativas. En este punto, si la regla de contentScale se cambia a FillHeight, el problema está resuelto:
@Composable
fun ShowLauncher() {
Image(
painter = painterResource(id = R.drawable.jin),
contentDescription = "",
modifier = Modifier.fillMaxHeight(),
contentScale = ContentScale.FillHeight
)
}
复制代码- Por favor, disfruta del primer plano de Jhin aquí.
Cargar imágenes web
Como se mencionó anteriormente, Coil ya admite la carga de imágenes de Compose, y el soporte de Coil es tan simple como siempre, de la siguiente manera:
importación de dependencia
implementation("io.coil-kt:coil-compose:2.0.0")
复制代码- Tenga en cuenta aquí que es inconsistente con los paquetes que deben importarse de forma nativa
usar
@Composable
fun ShowLauncher() {
AsyncImage(
model = "https://pic.iyingdi.com/post/content/2022/05/14/16325/ed50f6b7-8654-44ff-8762-7596c40928a7.png?imageMogr2/format/jpg|imageMogr2/quality/70",
contentDescription = "")
}
复制代码- modelo: dirección de la imagen
- contentDescription: uso del modo de accesibilidad
En este punto, la imagen de red se carga correctamente en la composición