Просмотр изображения простого компонента виджета (ImageView)

ImageView

ImageView наследуется от компонента View и в основном используется для отображения ресурсов изображений (например, изображений и т. Д.). ImageView также может определять отображаемый размер. Кроме того, ImageView также наследует ImageButton, ZoomButton и другие компоненты. Атрибуты и методы XML, поддерживаемые Image View, показаны в следующей таблице.

XML-атрибуты и методы ImageView

XML-атрибуты Соответствующий метод Описание функции
android: отрегулируйте ViewBounds setAdjust ViewBounds (логическое) Следует ли поддерживать соотношение сторон. Необходимо использовать вместе с maxWidth и MaxHeight, одно использование не имеет никакого эффекта
android: cropToPadding setCropToPadding (логический) Следует ли перехватывать указанную область и использовать вместо нее пустое поле. Сама по себе настройка не имеет никакого эффекта, ее нужно использовать вместе с scrollY
android: maxHeight setMaxHeight (число) Установите максимальную высоту View. Недопустимо использовать его отдельно. Его необходимо использовать вместе с методом setAdjustViewBounds (). Если вы хотите установить фиксированный размер изображения и хотите сохранить соотношение сторон изображения, вам необходимо установить следующие параметры: установить для setAdjust ViewBounds значение true; установить свойства max Width и MaxHeight; установить для layout_width и layout_height значение обернуть содержимое
android: максимальная ширина setMax Ширина (целое) Установите максимальную ширину просмотра. Использование такое же, как у android: maxHeight
android: src setImageResource (число) Установите объект Drawable, отображаемый в представлении изображения
android: scaleType setScaleType (Просмотр изображения.ScaleType) Установите, как масштабировать или перемещать отображаемое изображение, чтобы оно соответствовало размеру окна просмотра изображений.

Атрибут ImageView android: scaleType может указывать следующие значения атрибутов

  • матрица: используйте матрицу для рисования.
  • fitXY: растянуть изображение (не в масштабе), чтобы заполнить ширину и высоту просмотра.
  • fitStart: растяните изображение пропорционально.Растянутая высота изображения - это высота представления, и она отображается в левой части представления.
  • fitCenter: растяните изображение пропорционально, растянутая высота изображения равна высоте представления, и оно отображается в середине представления.
  • fitEnd: растяните изображение пропорционально, растянутая высота изображения равна высоте представления, и оно отображается в правой части представления.
  • center: отображение изображения в соответствии с исходным размером.Когда ширина и высота изображения больше, чем ширина и высота представления, будет отображаться средняя часть снимка экрана.
  • centerCrop: Увеличивает исходное изображение пропорционально, пока оно не станет равным ширине и высоте одной стороны обзора.
  • centerInside: когда ширина и высота исходного изображения равны ширине и высоте представления, оно отображается в центре в соответствии с размером исходного изображения; в противном случае исходное изображение масштабируется до ширины и высоты представления. и отображается в центре.

Кроме того, для управления изображением, отображаемым ImageView, компонент предоставляет следующие методы.

  • sctlmageBitmap (Bitmap): используйте Bitmap bitmap для установки изображения, отображаемого ImageView.
  • setImageDrawable (Drawable): используйте объект Drawable, чтобы установить изображение, отображаемое ImageView.
  • setImageResource (int): используйте идентификатор ресурса изображения, чтобы установить изображение, отображаемое ImageView.
  • setImagURI (Uri): используйте URI изображения, чтобы установить изображение, отображаемое ImageView.

Демо кода

Ниже приводится простой пример, демонстрирующий использование ImageView. Нажав кнопку «следующая страница / предыдущая страница», изображение можно переключить

Вставьте описание изображения сюда

Вставьте описание изображения сюда

Соответствующий код файла макета выглядит следующим образом

<?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>

Код объясняется следующим образом: Компонент ImageView определен на метке 1 для отображения изображения. При установке атрибута android; scaleType = "fitCenter" высота растянутого изображения используется как высота представления, и это отображается в середине представления. Определяет компонент TextView для отображения имени изображения; метка 2 определяет два компонента ImageButton, которые используются для отображения изображений «предыдущая страница» и «следующая страница».

Ниже показан эффект разбивки изображения на страницы в Activity: когда пользователь нажимает кнопку «Предыдущий / Следующий», соответствующие изображения будут отображаться на экране.

Вставьте описание изображения сюда

Вставьте описание изображения сюда
Соответствующая реализация кода действия выглядит следующим образом

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;
            }
        }
    };
}

Код объясняется следующим образом: метка 1 объявляет атрибутные переменные типа ImageView и типа ImageButton соответственно; метка 2 определяет два массива и инициализирует их, соответственно представляя ресурс изображения и имя изображения; метка 3 используется для инициализации объявленного в метка 1 Переменные атрибутов и установите прослушиватели для объектов backImageBtn и forwardImageBtn для прослушивания соответствующих событий щелчка; метка 4 определяет прослушиватель типа OnClickListener для обработки событий нажатия кнопки, когда кнопка нажата в соответствии с щелчком. картинки и названия картинок.

Объявление Activity в файле манифеста AndroidMainfest.xml
Вставьте описание изображения сюдаВставьте описание изображения сюда

После запуска кода активности эффект будет следующим.
Вставьте описание изображения сюда
Вставьте описание изображения сюда

рекомендация

отblog.csdn.net/weixin_42768634/article/details/115286176