ImageView en Android con ejemplo

La clase ImageView se usa para mostrar cualquier tipo de recurso de imagen en la aplicación de Android, ya sea android.graphics.Bitmap o android.graphics.drawable.Drawable (es una abstracción general para cualquier cosa que se pueda dibujar en Android). La clase ImageView o android.widget.ImageView hereda la clase android.view.View, que es la subclase de la clase Kotlin.Any. La aplicación de ImageView también consiste en aplicar tintes a una imagen para reutilizar un recurso dibujable y crear superposiciones en las imágenes de fondo. Además, ImageView también se usa para controlar el tamaño y el movimiento de una imagen. 

Agregar un ImageView a una actividad

Cada vez que se agrega ImageView a una actividad, significa que existe un requisito para un recurso de imagen. Por lo tanto, se olvida proporcionar un archivo de imagen a esa clase ImageView. Se puede hacer agregando un archivo de imagen que está presente en el propio Android Studio o podemos agregar nuestro propio archivo de imagen. Android Studio posee una amplia gama de recursos dibujables que son muy comunes en el diseño de aplicaciones de Android. Los siguientes son los pasos para agregar un recurso dibujable a la clase ImageView.

Nota: Los pasos se realizan en Android Studio versión 4.0

Abra el archivo activity_main.xml en el que se agregará la imagen 

activity.xml file in which image is to be added

Cambie de la vista de código a la vista de diseño del archivo activity_main.xml. 

Design view of the activity.xml file

Para agregar una imagen de Android Studio Arrastre el widget ImageView al área de actividad de la aplicación, se abrirá un cuadro de diálogo emergente, elija entre la amplia gama de recursos dibujables y haga clic en «Aceptar». 

Adding a drawable resource to the activity

Para agregar un archivo de imagen que no sean recursos dibujables de Android Studio: 
haga clic en la pestaña «Administrador de recursos» en el panel más a la izquierda y seleccione la opción «Importar dibujables». 

Select Import Drawables option to add image file

Seleccione la ruta del archivo de imagen en su computadora y haga clic en «Aceptar». Después de eso, configure el «Tipo de calificador» y el «valor» del archivo de imagen según sus necesidades y haga clic en «Siguiente» y luego en «Importar». 
 

Providing value to Qualifier type for the image

Arrastre la clase ImageView en el área de actividad, aparecerá un cuadro de diálogo emergente que contiene su archivo de imagen importado. Elija su archivo de imagen y haga clic en «Aceptar», su imagen se agregará a la actividad. 

Adding image to the activity

Nota: Después de agregar una imagen, establezca su diseño de restricciones tanto vertical como horizontalmente; de ​​lo contrario, mostrará un error.

Atributos XML de ImageView 

Atributo XML

Descripción

Android: identificación Para identificar de forma exclusiva una vista de imagen
android:src/aplicación:srcCompat Para agregar la ruta del archivo de la imagen insertada
android:fondo Para proporcionar un color de fondo a la imagen insertada
Android: diseño_ancho Para establecer el ancho de la imagen
android:layout_height Para establecer la altura de la imagen
Android: relleno Para agregar relleno a la imagen desde la izquierda, derecha, arriba o abajo de la vista
android: tipo de escala Redimensionar la imagen o moverla para fijar su tamaño

Ejemplo

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio .

Paso 2: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <ImageView
        android:id="@+id/GfG_full_logo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.078"
        app:srcCompat="@drawable/full_logo" />
  
    <ImageView
        android:id="@+id/GfG_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/GfG_full_logo"
        app:srcCompat="@drawable/logo" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Nota : Todos los atributos de ImageView que comienzan con app:layout_constraint son las restricciones verticales y horizontales para fijar la posición de la imagen en la actividad. Esto es muy necesario para agregar la restricción a ImageView; de lo contrario, todas las imágenes tomarán la posición (0, 0) del diseño de la actividad.  

Paso 4: trabajar con el archivo MainActivity

Vaya al archivo MainActivity y consulte el siguiente código. A continuación se muestra el código para el archivo MainActivity . Se agregan comentarios dentro del código para comprender el código con más detalle. Dado que en la actividad, solo se agregaron 2 imágenes y no se hace nada más como tocar un botón, etc. Entonces, el archivo MainActivity simplemente se verá como el siguiente código. 

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
  
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

Kotlin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    }
}

Producción: 

Android activity after adding 2 images

Publicación traducida automáticamente

Artículo escrito por RISHU_MISHRA y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *