Las imágenes, los gráficos y los vectores atraen a tantos usuarios ya que cuentan mucha información de una manera muy informativa. ImageView en Android se utiliza para mostrar diferentes tipos de imágenes dibujables o en forma de mapas de bits. En este artículo, veremos la implementación de un ImageView en Android usando Jetpack Compose .
Atributos del widget ImageView
|
Atributos |
Descripción |
|---|---|
| imagenVector | para agregar una imagen del recurso Drawable dentro de nuestra vista de imagen |
| mapa de bits | para agregar un mapa de bits para su imagen dentro de imageview. |
| modificador | para agregar relleno a la vista de imagen |
| contentScale | para agregar escala a nuestra imagen para que se ajuste a nuestra imagen dentro de imageview |
| alfa | para agregar alfa a nuestra vista de imagen. |
| filtro de color | para agregar colores a nuestra vista de imagen. |
| modo de mezcla | para agregar efectos de color a nuestra vista de imagen. |
Implementación paso a paso
Paso 1: Crear un nuevo proyecto
Para crear un nuevo proyecto en la versión Canary de Android Studio, consulte Cómo crear un nuevo proyecto en la versión Canary de Android Studio con Jetpack Compose.
Paso 2: agregue una imagen a la carpeta dibujable
Después de crear un nuevo proyecto, debemos agregar una imagen dentro de nuestra carpeta dibujable para mostrar esa imagen dentro de nuestro ImageView. Copie su imagen desde la ubicación de su carpeta e ingrese a nuestro proyecto. Dentro de nuestro proyecto Navegue a la aplicación > res > dibujable > Haga clic con el botón derecho en la carpeta dibujable y pegue su imagen allí .
Paso 3: trabajar con el archivo MainActivity.kt
Después de agregar esta imagen, navegue a la aplicación> java> MainActivity.kt y agregue el siguiente código. Los comentarios se agregan dentro del código para una explicación detallada.
Kotlin
package com.example.edittext
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
import com.example.edittext.ui.EditTextTheme
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
EditTextTheme {
// A surface container using the
// 'background' color from the theme
Surface(
// to add background color for our screen.
color = MaterialTheme.colors.background,
) {
// at below line we are calling
// our function for image view.
Img();
}
}
}
}
}
@Composable
fun Img() {
Column(
// we are using column to align our
// imageview to center of the screen.
modifier = Modifier.fillMaxWidth().fillMaxHeight(),
// below line is used for specifying
// vertical arrangement.
verticalArrangement = Arrangement.Center,
// below line is used for specifying
// horizontal arrangement.
horizontalAlignment = Alignment.CenterHorizontally,
) {
// below line is used for creating a variable
// for our image resource file.
val img = imageResource(id = R.drawable.gfgimage)
// below line is used for creating a modifier for our image
// which includes image width and image height
val modifier = Modifier.preferredHeight(height = Dp(200F)).preferredWidth(width = Dp(200F))
// below is the widget for image.
Image(
// first parameter of our Image widget
// is our image path which we have created
// above and name it as img.
img,
// below line is used to give
// alignment to our image view.
alignment = Alignment.Center,
// below line is used to scale our image
// we are using center crop for it.
contentScale = ContentScale.Crop,
// below line is used to add modifier
// to our image. we are adding modifier
// which we have created above and name
// it as modifier.
modifier = modifier
)
}
}
// @Preview function is use to see preview
// for our composable function in preview section.
@Preview
@Composable
fun DefaultPreview() {
MaterialTheme {
// we are passing our composable
// function to display its preview.
Img()
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA