Android应用开发（8）图像视图（ImageView）

liuzl_2010

已于 2023-11-07 19:22:10 修改

阅读量2.8k

点赞数 1

分类专栏： Android应用开发学习笔记文章标签： android android studio

于 2023-03-09 23:16:25 首次发布

本文链接：https://blog.csdn.net/zsyf33078/article/details/129433494

版权

Android应用开发学习笔记专栏收录该内容

23 篇文章 20 订阅

订阅专栏

本文介绍了Android应用开发中的ImageView组件，包括如何在XML和Java代码中设置图片资源，以及讲解了ImageView的各种缩放模式，如FIT_CENTER、CENTER_CROP等，并提供了示例代码展示不同缩放模式的效果。

摘要由CSDN通过智能技术生成

Android应用开发学习笔记——目录索引

本章介绍图像视图（ImageView）控件的常见用法，结合上一章Android应用开发（7）按键（Button）介绍图像视图（ImageView）显示图片及图像的缩放等。

参考：https://developer.android.com/reference/android/widget/ImageView

一、ImageView介绍

图像视图（ImageView）由View派生而来，用于显示图像资源，例如Bitmap 或Drawable资源。ImageView 还常用于设置图像色调模式和处理图像缩放。

ImageView XML 属性

ImageView XML 属性
android:adjustViewBounds	如果您希望 ImageView 调整其边界以保持其可绘制对象的纵横比，请将此设置为 true。
android:baseline	此视图中基线的偏移量。
android:baselineAlignBottom	如果为真，则图像视图将基于其底部边缘进行基线对齐。
android:cropToPadding	如果为真，图像将被裁剪以适合其填充。
android:maxHeight	一个可选参数，用于为此视图提供最大高度。
android:maxWidth	一个可选参数，用于为此视图提供最大宽度。
android:scaleType	控制应如何调整图像大小或移动图像以匹配此 ImageView 的大小。
android:src	将可绘制对象设置为此 ImageView 的内容。
android:tint	图像的着色颜色。
android:tintMode	用于应用图像色调的混合模式。

图像视图（ImageView）继承View，所以继承了的 View的XML 属性。

ImageView展示的图片通常存于res/drawable***目录，设置图像视图的显示图片有两种方式：

XML：通过属性android:src设置图片资源，如“android:src="@drawable/***"。

以下 XML 片段是使用 ImageView 显示图像资源的常见示例：

 <LinearLayout
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <ImageView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:src="@drawable/my_image"
         android:contentDescription="@string/my_image_description"/>
 </LinearLayout>

Java：调用setImageResource方法设置图片资源，参数“R.drawable.图片名”


// 从布局文件中获id为imageView的图像视图
ImageView imageView = findViewById(R.id.imageView);
imageView.setImageResource(R.drawable.my_image);  // 设置图像视图的图片资源

二、ImageView缩放模式

ImageView默认会居中显示，并自动缩放图片使其刚好够着ImageView的边界。

相关的 XML 属性：

android:scaleType

scaleType

ImageView.ScaleType：所需的缩放模式。

Java code：


public void setScaleType (ImageView.ScaleType scaleType)

控制调整图像大小或移动图像以匹配 ImageView 的大小。

ImageView.ScaleType枚举值
CENTER	使图像在视图中居中，但不执行缩放。
CENTER_CROP	统一缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）等于或大于视图的相应尺寸（减去填充）。
CENTER_INSIDE	统一缩放图像（保持图像的纵横比），使图像的两个尺寸（宽度和高度）等于或小于视图的相应尺寸（减去填充）。
FIT_CENTER	使用缩放图像Matrix.ScaleToFit#CENTER。保持宽高比例，拉伸图片使其位于视图中间
FIT_END	使用缩放图像Matrix.ScaleToFit#END。保持宽高比例，拉伸图片使其位于视图下方或右侧
FIT_START	使用缩放图像Matrix.ScaleToFit#START。保持宽高比例，拉伸图片使其位于视图上方或左侧)
FIT_XY	使用缩放图像Matrix.ScaleToFit#FILL。拉伸图片使其正好填满视图（图片可能被拉伸变形)
MATRIX	绘图时使用图像矩阵进行缩放。

/res/drawable/android.webp文件：

使用上面图片，测试效果如下：

三、ImageView控件测试程序

java：

MainActivity.java


package com.example.imageviewtest;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.TextureView;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private final static String TAG = "lzl-test-ImageViewTest";

    private ImageView mImageViewScaleType;
    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView2 = (ImageView) findViewById(R.id.imageView2);
        imageView2.setImageResource(R.drawable.android);

        mImageViewScaleType = (ImageView) findViewById(R.id.imageViewScaleType);
        mImageViewScaleType.setImageResource(R.drawable.android); // 设置图像视图的图片资源
        ((Button) findViewById(R.id.button_fitXY)).setOnClickListener(this);
        ((Button) findViewById(R.id.button_fitStart)).setOnClickListener(this);
        ((Button) findViewById(R.id.button_fitCenter)).setOnClickListener(this);
        ((Button) findViewById(R.id.button_fitEnd)).setOnClickListener(this);
        ((Button) findViewById(R.id.button_center)).setOnClickListener(this);
        ((Button) findViewById(R.id.button_centerCrop)).setOnClickListener(this);
        ((Button) findViewById(R.id.button_centerInside)).setOnClickListener(this);

        mTextView = (TextView) findViewById(R.id.textView_btn_info);
    }

    @Override
    public void onClick(View v) {
        if (v.getId() == R.id.button_fitXY) {
            mImageViewScaleType.setScaleType(ImageView.ScaleType.FIT_XY);
            mTextView.setText("你点击了【FIT_XY】按键");
        } else if (v.getId() == R.id.button_fitStart) {
            mImageViewScaleType.setScaleType(ImageView.ScaleType.FIT_START);
            mTextView.setText("你点击了【FIT_START】按键");
        } else if (v.getId() == R.id.button_fitCenter) {
            mImageViewScaleType.setScaleType(ImageView.ScaleType.FIT_CENTER);
            mTextView.setText("你点击了【FIT_CENTER】按键");
        } else if (v.getId() == R.id.button_fitEnd) {
            mImageViewScaleType.setScaleType(ImageView.ScaleType.FIT_END);
            mTextView.setText("你点击了【FIT_END】按键");
        } else if (v.getId() == R.id.button_center) {
            mImageViewScaleType.setScaleType(ImageView.ScaleType.CENTER);
            mTextView.setText("你点击了【CENTER】按键");
        } else if (v.getId() == R.id.button_centerCrop) {
            mImageViewScaleType.setScaleType(ImageView.ScaleType.CENTER_CROP);
            mTextView.setText("你点击了【CENTER_CROP】按键");
        } else if (v.getId() == R.id.button_centerInside) {
            mImageViewScaleType.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
            mTextView.setText("你点击了【CENTER_INSIDE】按键");
        }
    }
}

xml：

activity_main.xml layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="horizontal"
    tools:context=".MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:layout_marginHorizontal="20dp"
                android:layout_marginTop="20dp"
                android:orientation="horizontal">

                <ImageView
                    android:id="@+id/imageView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:layout_weight="1"
                    android:src="@drawable/android" />

                <ImageView
                    android:id="@+id/imageView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="5dp"
                    android:layout_weight="1"
                    android:src="@drawable/ic_launcher_background" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="0"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/textView1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="在xml中指定显示android图片" />

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="在java中指定显示android图片" />
            </LinearLayout>

            <ImageView
                android:id="@+id/imageViewScaleType"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_marginTop="10dp"
                android:background="@color/black"
                app:srcCompat="@drawable/android" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="horizontal">
                <Button
                    android:id="@+id/button_center"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:layout_weight="1"
                    android:text="CENTER"
                    android:textSize="9sp" />
                <Button
                    android:id="@+id/button_fitXY"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:layout_weight="1"
                    android:text="FIT_XY"
                    android:textSize="9sp" />

                <Button
                    android:id="@+id/button_fitStart"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:layout_weight="1"
                    android:text="FIT_START"
                    android:textSize="9sp" />
                <Button
                    android:id="@+id/button_fitEnd"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:layout_weight="1"
                    android:text="FIT_END"
                    android:textSize="9sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="horizontal">
                <Button
                    android:id="@+id/button_fitCenter"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:layout_weight="1"
                    android:text="FIT_CENTER"
                    android:textSize="10sp" />
                <Button
                    android:id="@+id/button_centerCrop"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:layout_weight="1"
                    android:text="CENTER_CROP"
                    android:textSize="10sp" />

                <Button
                    android:id="@+id/button_centerInside"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_margin="2dp"
                    android:layout_weight="1"
                    android:text="CENTER_INSIDE"
                    android:textSize="10sp" />
            </LinearLayout>
            <TextView
                android:id="@+id/textView_btn_info"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center"
                android:text="你点击了【xx】按键" />
        </LinearLayout>
    </ScrollView>
</LinearLayout>