您当前的位置:首页 > Android教程

Android开发学习教程(10)- Android ImageView用法和属性

时间:2022-01-06 07:45:15 阅读数:20,112人阅读
版权声明:转载请注明出处,谢谢!
—— 你以为的极限弄不好是别人的起点。

上一篇我们讲了文本输入框EditText的基本用法,这里来学习图片控件ImageView的基本用法。

ImageView是什么

ImageView,图像视图,直接继承自View类,它的主要功能是用于显示图片,实际上它不仅仅可以用来显示图片,任何Drawable对象都可以使用ImageView来显示。ImageView可以适用于任何布局中,并且Android为其提供了缩放和着色的一些操作。

ImageView有什么用

用来显示图片。

ImageView怎么用

继续基于上一篇的项目,我们增加几张图片:

	<?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=".TestActivity">

		...
		...
		...

		<ImageView
			android:id="@+id/img1"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="20dp"
			android:layout_marginTop="20dp"
			android:background="@drawable/bg"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toBottomOf="@+id/et_password" />

		<TextView
			android:id="@+id/tv1"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginLeft="30dp"
			android:text="background"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toBottomOf="@+id/img1" />

		<ImageView
			android:id="@+id/img2"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="30dp"
			android:background="#CCCCCC"
			android:scaleType="fitStart"
			android:src="@drawable/bg"
			app:layout_constraintStart_toEndOf="@+id/img1"
			app:layout_constraintTop_toTopOf="@+id/img1" />

		<TextView
			android:id="@+id/tv2"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginLeft="20dp"
			android:text="src+fitStart"
			app:layout_constraintStart_toStartOf="@+id/img2"
			app:layout_constraintTop_toBottomOf="@+id/img2" />

		<ImageView
			android:id="@+id/img3"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="30dp"
			android:background="#CCCCCC"
			android:scaleType="fitCenter"
			android:src="@drawable/bg"
			app:layout_constraintStart_toEndOf="@+id/img2"
			app:layout_constraintTop_toTopOf="@+id/img2" />

		<TextView
			android:id="@+id/tv3"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="src+fitCenter(默认)"
			app:layout_constraintStart_toStartOf="@+id/img3"
			app:layout_constraintTop_toBottomOf="@+id/img3" />

		<ImageView
			android:id="@+id/img4"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="20dp"
			android:layout_marginTop="20dp"
			android:background="#cccccc"
			android:scaleType="fitEnd"
			android:src="@drawable/bg"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toBottomOf="@+id/tv1" />

		<TextView
			android:id="@+id/tv4"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginLeft="30dp"
			android:text="src+fitEnd"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toBottomOf="@+id/img4" />

		<ImageView
			android:id="@+id/img5"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="30dp"
			android:background="#cccccc"
			android:scaleType="fitXY"
			android:src="@drawable/bg"
			app:layout_constraintStart_toEndOf="@+id/img4"
			app:layout_constraintTop_toTopOf="@+id/img4" />

		<TextView
			android:id="@+id/tv5"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginLeft="20dp"
			android:text="src+fitXY"
			app:layout_constraintStart_toStartOf="@+id/img5"
			app:layout_constraintTop_toBottomOf="@+id/img5" />

		<ImageView
			android:id="@+id/img6"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="30dp"
			android:background="#CCCCCC"
			android:scaleType="centerCrop"
			android:src="@drawable/bg"
			app:layout_constraintStart_toEndOf="@+id/img5"
			app:layout_constraintTop_toTopOf="@+id/img5" />

		<TextView
			android:id="@+id/tv6"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="src+centerCrop"
			app:layout_constraintStart_toStartOf="@+id/img6"
			app:layout_constraintTop_toBottomOf="@+id/img6" />

		<ImageView
			android:id="@+id/img7"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="20dp"
			android:layout_marginTop="20dp"
			android:background="#cccccc"
			android:scaleType="center"
			android:src="@drawable/bg"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toBottomOf="@+id/tv4" />

		<TextView
			android:id="@+id/tv7"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:layout_marginLeft="30dp"
			android:text="src+center"
			app:layout_constraintStart_toStartOf="parent"
			app:layout_constraintTop_toBottomOf="@+id/img7" />

		<ImageView
			android:id="@+id/img8"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="30dp"
			android:background="#cccccc"
			android:scaleType="centerInside"
			android:src="@drawable/bg"
			app:layout_constraintStart_toEndOf="@+id/img7"
			app:layout_constraintTop_toTopOf="@+id/img7" />

		<TextView
			android:id="@+id/tv8"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="src+centerInside"
			app:layout_constraintStart_toStartOf="@+id/img8"
			app:layout_constraintTop_toBottomOf="@+id/img8" />

		<ImageView
			android:id="@+id/img9"
			android:layout_width="100dp"
			android:layout_height="100dp"
			android:layout_marginLeft="30dp"
			android:background="#cccccc"
			android:scaleType="matrix"
			android:src="@drawable/bg"
			app:layout_constraintStart_toEndOf="@+id/img8"
			app:layout_constraintTop_toTopOf="@+id/img8" />

		<TextView
			android:id="@+id/tv9"
			android:layout_width="wrap_content"
			android:layout_height="wrap_content"
			android:text="src+matrix"
			app:layout_constraintStart_toStartOf="@+id/img9"
			app:layout_constraintTop_toBottomOf="@+id/img9" />

	</androidx.constraintlayout.widget.ConstraintLayout>

上面显示了八张图片,我们分别来看看:

	android:background="@drawable/bg":表示将图片bg作为背景图片填充ImageView的长宽;
	android:src="@drawable/bg":表示将图片bg作为前景图片显示在ImageView上,这里需要注意的是当使用src显示图片时,图片显示的方式有8种模式,其实可以分为三个类型;
	android:layout_marginLeft:控件离左方的距离;

属性android:src的三种类型

	以FIT_开头的4种,它们的共同点是都会对图片进行缩放;
	以CENTER_开头的3种,它们的共同点是居中显示,图片的中心点会与ImageView的中心点重叠;
	ScaleType.MATRIX,保持原图大小、从左上角的点开始,以矩阵形式绘图;

其中 android:inputType="number" 是规定输入框内只能输入数字。

下面具体看看8中模式的区别:

	fitStart:图片等比缩放到控件大小,并放置在控件的上边或左边展示。此模式下会在ImageView的下半部分留白,如果图片高度大于宽,那么就会在ImageView的右半部份留白;
	
	fitCenter:该模式是ImageView的默认模式,如果没有设置ScaleType时,将采用这种模式展示图片。在该模式下,图片会被等比缩放到能够填充控件大小,并居中展示;
	
	fitEnd:图片等比缩放到控件大小,并放置在控件的下边或右边展示。此模式下会在ImageView的上半部分留白,如果图片高度大于宽,那么就会在ImageView的左半部分留白;
	
	fitXY:图片缩放到控件大小,完全填充控件大小展示。注意,此模式不是等比缩放。这个模式理解也是最简单的;
	
	centerCrop:图片会被等比缩放直到完全填充整个ImageView,并居中显示。该模式也是最常用的模式了,图片的高度是能完全展示出来的;
	
	center:不使用缩放,ImageView会展示图片的中心部分,即图片的中心点和ImageView的中心点重叠。如果图片的大小小于控件的宽高,那么图片会被居中显示;
	
	centerInside:使用此模式以完全展示图片的内容为目的。图片将被等比缩放到能够完整展示在ImageView中并居中,如果图片大小小于控件大小,那么就直接居中展示该图片;
	
	matrix:保持原图大小、从左上角的点开始,以矩阵形式绘图,这里暂不详细说,后面再单独看。

------转载请注明出处,感谢您对原创作者的支持------

有偿提供技术支持、Bug修复、项目外包、毕业设计、大小作业

Android学习小站

Q Q:1095817610

微信:jx-helu

邮箱:1095817610@qq.com

添加请备注"Android学习小站"