Vista de imagen de componente simple de widget (ImageView)

ImageView

ImageView hereda del componente View y se utiliza principalmente para mostrar recursos de imágenes (como imágenes, etc.) ImageView también puede definir el tamaño mostrado. Además, ImageView también deriva ImageButton, ZoomButton y otros componentes. Los atributos y métodos XML admitidos por Image View se muestran en la siguiente tabla.

Atributos y métodos XML de ImageView

Atributos XML	Método correspondiente	Función descriptiva
android: ajustar ViewBounds	setAdjust ViewBounds (booleano)	Ya sea para mantener la relación de aspecto. Debe usarse junto con maxWidth y MaxHeight, el uso solo no tiene ningún efecto
android: cropToPadding	setCropToPadding (booleano)	Ya sea para interceptar el área especificada y usar un espacio en blanco en su lugar. La configuración por sí sola no tiene ningún efecto, debe usarse junto con scrollY
Android: maxHeight	setMaxHeight (int)	Establezca la altura máxima de la Vista. No es válido usarla sola. Debe usarse junto con el método setAdjustViewBounds (). Si desea establecer un tamaño fijo de la imagen y desea mantener la relación de aspecto de la imagen, debe establecer las siguientes configuraciones: establecer setAdjust ViewBounds en verdadero; establecer las propiedades Max Width y MaxHeight; establecer tanto layout_width como layout_height en resumir contenido
android: ancho máximo	setMax Width (int)	Establezca el ancho máximo de la Vista. El uso es el mismo que en Android: maxHeight
android: src	setImageResource (int)	Establecer el objeto dibujable mostrado por la vista de imagen
android: scaleType	setScaleType (Vista de imagen.ScaleType)	Establecer cómo hacer zoom o mover la imagen mostrada para que se ajuste al tamaño de la Vista de imagen

El atributo android: scaleType de ImageView puede especificar los siguientes valores de atributo

• matriz: use una matriz para dibujar.
• fitXY: Estire la imagen (no a escala) para llenar el ancho y alto de la Vista.
• fitStart: Estire la imagen proporcionalmente. La altura estirada de la imagen es la altura de la Vista, y se muestra en el lado izquierdo de la Vista.
• fitCenter: Estire la imagen proporcionalmente, la altura estirada de la imagen es la altura de la Vista y se muestra en el medio de la Vista.
• fitEnd: Estire la imagen proporcionalmente, la altura estirada de la imagen es la altura de la Vista y se muestra en el lado derecho de la Vista.
• centro: muestra la imagen de acuerdo con el tamaño original.Cuando el ancho y el alto de la imagen son mayores que el ancho y el alto de la vista, se mostrará la parte central de la captura de pantalla.
• centerCrop: Agranda la imagen original proporcionalmente hasta que sea igual al ancho y alto de un lado de la Vista.
• centerInside: cuando el ancho y alto de la imagen original es igual al ancho y alto de la Vista, se muestra en el centro de acuerdo con el tamaño de la imagen original; de lo contrario, la imagen original se amplía al ancho y alto de la Vista y se muestra en el centro.

Además. Para controlar la imagen mostrada por ImageView, el componente proporciona los siguientes métodos

• sctlmageBitmap (mapa de bits): utilice mapa de bits de mapa de bits para establecer la imagen que muestra ImageView.
• setImageDrawable (Drawable): use el objeto Drawable para establecer la imagen mostrada por ImageView.
• setImageResource (int): use el ID del recurso de imagen para configurar la imagen que muestra ImageView.
• setImagURI (Uri): use el URI de la imagen para configurar la imagen mostrada por ImageView.

Demostración de código

El siguiente es un ejemplo simple para demostrar el uso de ImageView. Al hacer clic en el botón "página siguiente / página anterior", la imagen se puede cambiar

El código de archivo de diseño correspondiente es el siguiente

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical"
    >
    <!-- 图片及文字 1 -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/photoImageView"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:background="@android:color/white"
            android:scaleType="fitCenter"
            android:src="@drawable/one" />
        <TextView
            android:id="@+id/photoTxt"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="佐佐木希" />
    </LinearLayout>
    <!-- 分页 2 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:orientation="horizontal">
        <ImageButton
            android:id="@+id/backImageBtn"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="140dp"
            android:layout_gravity="fill_vertical"
            android:src="@drawable/back"/>
        <ImageButton
            android:id="@+id/forwardImageBtn"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="fill_vertical"
            android:src="@drawable/forward" />
    </LinearLayout>
</LinearLayout>

El código se explica de la siguiente manera: Un componente ImageView se define en la etiqueta 1 para mostrar la imagen. Al establecer el atributo android; scaleType = "fitCenter", la altura de la imagen estirada se usa como la altura de la Vista, y es que se muestra en el medio de la Vista. Define un componente TextView para mostrar el nombre de la imagen, la etiqueta 2 define dos componentes ImageButton, que se utilizan para mostrar las imágenes de la "página anterior" y la "página siguiente".

A continuación se muestra el efecto de la paginación de imágenes en Actividad: Cuando el usuario hace clic en el botón "Anterior / Siguiente", las imágenes correspondientes se mostrarán en la pantalla.

La implementación del código de actividad correspondiente es la siguiente

package com.qst.demo2;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

public class ImageViewDemoActivity extends AppCompatActivity {
    
    
    //定义变量 1
    //图片对应的ImageView
    ImageView flagImageView;
    TextView flagTxt;
    ImageButton backImgeBtn;   //上一页
    ImageButton forwardImageBtn; //下一页
    //图片数组   2
    int [] flag = {
    
    R.drawable.one, R.drawable.two, R.drawable.three};
    String[] flagNames = {
    
    "佐佐木希", "胡歌", "霉霉"};
    //当前页 默认第一页
    int currentPage = 0;
    @Override //重写方法
    public void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState); //调用父类onCreate创建Activity
        setContentView(R.layout.imageview_demo); //设置布局
        //初始化组件 3
        flagImageView = (ImageView) findViewById(R.id.photoImageView);
        flagTxt = (TextView) findViewById(R.id.photoTxt);
        //上一页，下一页
        backImgeBtn = (ImageButton) findViewById(R.id.backImageBtn);
        forwardImageBtn = (ImageButton) findViewById(R.id.forwardImageBtn);
        //注册监听器
        backImgeBtn.setOnClickListener(onClickListener);
        forwardImageBtn.setOnClickListener(onClickListener);
    }
    //定义单击事件监听器 4
    private View.OnClickListener onClickListener = new View.OnClickListener() {
    
     //创建对象
        @Override   //重写接口方法
        public void onClick(View v) {
    
    
            switch (v.getId()) {
    
    
                case R.id.backImageBtn:
                    if (currentPage == 0) {
    
    
                        Toast.makeText(ImageViewDemoActivity.this,
                                "第一页，前面没有了", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    //上翻一页
                    currentPage--;
                    //设置图片
                    flagImageView.setImageResource(flag[currentPage]);
                    //设置图片名字
                    flagTxt.setText(flagNames[currentPage]);
                    break;
                case R.id.forwardImageBtn:
                    if (currentPage == (flag.length-1)) {
    
    
                        Toast.makeText(ImageViewDemoActivity.this,
                                "最后一页，后面没有了", Toast.LENGTH_SHORT).show();
                        return;
                    }
                    currentPage++;   //下翻一页
                    flagImageView.setImageResource(flag[currentPage]);  //设置图片
                    flagTxt.setText(flagNames[currentPage]);  //设置图片名字
                    break;
                default:
                    break;
            }
        }
    };
}

El código se explica de la siguiente manera: la etiqueta 1 declara las variables de atributo del tipo ImageView y el tipo ImageButton respectivamente; la etiqueta 2 define dos matrices y las inicializa, representando respectivamente el recurso de imagen y el nombre de la imagen; la etiqueta 3 se usa para inicializar el declarado en etiqueta 1 Atributo variables, y establece oyentes para los objetos backImageBtn y forwardImageBtn para escuchar sus respectivos eventos de clic; la etiqueta 4 define un oyente de tipo OnClickListener para manejar eventos de clic de botón, cuando se hace clic en el botón de acuerdo con el clic Los botones son diferentes para mostrar diferentes imágenes y nombres de imágenes.

Declarar actividad en el archivo de manifiesto AndroidMainfest.xml

Después de ejecutar el código de actividad, el efecto es el siguiente