Android应用开发(8)图像视图(ImageView)

本文介绍了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派生而来,用于显示图像资源,例如BitmapDrawable资源。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***目录,设置图像视图的显示图片有两种方式:

  1. 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>
  1. Java:调用setImageResource方法设置图片资源,参数“R.drawable.图片名”


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

二、ImageView缩放模式

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

相关的 XML 属性:

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>

模拟器运行

源码

百度网盘链接:百度网盘 请输入提取码 提取码:test

github下载地址:

GitHub - liuzhengliang1102/AndroidStudio-LearnAppDevelopment

ImageViewTest目录

点此查看Android应用开发学习笔记的完整目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

liuzl_2010

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值