18. 【Android教程】图片控件 ImageView

简介: 18. 【Android教程】图片控件 ImageView

ImageView 和 TextView 一样是直接继承自 View 的基础控件,顾名思义,TextView 用来展示文本,那 ImageView 就是用来展示图片的了。因为 Android 碎片化严重,在 Android 中图片很容易使用但是却很难控制。不同的机型有不同的屏幕尺寸,导致对图片的适配要求很高。但是 Android 系统为我们提供了强大的图片控件,学好 ImageView 是做好 Android UI 适配的第一步。

1. ImageView 的属性

ImageView 的功能说起来很简单,就是在屏幕上展示一张图片,但是如何展示就很有学问了,先来看看相关的属性:


android:src:

设置 ImageView 的图片内容

android:background:

设置背景样式(同其他控件类似)

android:scaleType:

控制图片的缩放模式

android:maxHeight:

设置 ImageView 的最大高度

android:maxWidth:

设置ImageView的最大宽度

android:tint:

图片的色彩

前三个属性是重中之重,其中android:backgroud在之前的控件中已经多次出现,这再次拿出来并不是因为它和其他控件的background有所不同,只是因为很多人会把它和android:src搞混淆。对于 ImageView 而言,android:background的属性和其它控件含义一样表示背景样式,同样可以设置成图片文件或者背景资源;而android:src是 ImageView 特有的一个属性,用来设置 ImageView 要展示的图片;


剩下一个android:scaleType也是一个难点,它就是帮助我们做图片适配的,我们通过android:scaleType告诉系统,当图片尺寸和 ImageView 尺寸不同时,系统该如何帮助我们对图片进行缩放。

2. ImageView 的基本用法

首先看看最简单直接的用法:

<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="#59A004"
    android:src="@drawable/image" />

我们直接在根布局中添加一个 ImageView,设置android:src为图片文件,android:background设置为绿色。


这里可以对android:src和android:background有一个定性的认识:android:src表示ImageView的前景,而android:backgound设置的是ImageView的背景,对应的Java代码是:


setImageDrawable( );         // 设置ImageView的前景
setBackgroundDrawable( );    // 设置ImageView的背景

2.1 android:background 和 android:src 的区别

前面有提到,android:background也可以直接设置成图片,那么在设置成图片的场景下,它和android:src是否是一样的呢?我们来进一步考察一下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#CC1010"
        android:src="@drawable/image" />
 
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/image" />
 
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:background="#CC1010"
        android:src="@drawable/image" />
 
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom|right"
        android:background="@drawable/image" />
</FrameLayout>

在上面的代码中,我们在屏幕的 4 个角放置了 4 个 ImageView ,分别从尺寸大小、图片设置方式两个维度做了区分,为了方便对比,在使用android:src属性之后,通过android:background加了红色的背景。


我们首先看上排的两个图片效果:


  • 长宽均为wrap_content
  • 左边一个用的android:src右边一个用的是android:background
  • 可以看到两者效果完全一样,再来看下排的两个图片:
  • 长宽均为200dp
  • 左边一个用的android:src右边一个用的android:background
  • 可以清楚的看到,在将 ImageView 的大小固定之后,左边的图片内容仍然保持原始比例,并且露出 ImageView 的红色背景(说明 ImageView 大小和我们设置的一样),而右边的图片会拉伸图片大小直至占满整个 ImageView。
  • 这样一来就可以得出结论:


在 ImageView 的尺寸和图片尺寸比例一致的情况下,使用android:background设置图片和使用android:src效果一样

在 ImageView 的尺寸和图片尺寸比例不一致的情况下,使用android:src会保留图片原始比例并居中显示,而用android:background设置的会将图片拉伸直至铺满整个 ImageView。

这里有一个疑问,为什么尺寸不一致的时候,Android 系统是采取居中显示,而不是其他的样式呢?这就是我们接下来要说明的属性了。

特别注意以上说的都是尺寸比例,并非长和宽的值。

2.2 ImageView 的缩放裁剪模式

在实际开发过程中,大多数场景我们都是没办法保证每张图片的尺寸比例都一致的,所以需要有大量的缩放和裁剪,如何让缩放裁剪的适配更加得心应手,就需要用到 ImageView 的另一个关键属性:android:scaleType。

这里我之所以称之为缩放裁剪模式,就是要强调这个属性的两个维度:是否改变图片比例以及超出部分如何裁剪。其实scaleType这个属性要规范的就是这两个维度,下面就从这两个维度来学习:


  • matrix:
  • 按照矩阵方式缩放。好吧说人话就是不调整图片大小,从左上角开始往右下角绘制,如果超出的 ImageView 的范围则直接舍弃。不改比例、会裁剪。
  • fitXY:
  • 从横纵两个方向对图片进行缩放,以占满整个 ImageView,可以参考android:background的样式。改比例、不裁剪。
  • fitStart:
  • 将图片等比例缩放,直至能够完全显示,然后将图片至于 ImageView 的左上角。不改比例、不裁剪。
  • fitCenter:
  • 和 fitStart 类似,只不过会将图片居中放置。不改比例、不裁剪。
  • fitEnd:
  • 和 fitStart 类似,只不过会将图片放在 ImageView 的右下角。同样不改比例、不裁剪。
  • center:
  • 非常粗暴的直接将图片原封不动的放到 ImageView 中央,多余部分裁剪掉。不改比例、裁剪。
  • centerCrop:
  • 等比例缩放图片,直至图片能够完全占满 ImageView ,注意占满之后多余部分会被裁剪掉。不改比例、裁剪。
  • centerInside:
  • 保持原始比例的缩放图片,直至能够完整显示图片的内容。不改比例、不裁剪。

以上的样式都还比较好理解,下面我们来写段代码测试一下几种具有代表性的样式:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:background="#CC1010"
        android:scaleType="matrix"
        android:src="@drawable/image" />
 
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="right"
        android:background="#CC1010"
        android:scaleType="fitXY"
        android:src="@drawable/image" />
 
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_vertical"
        android:background="#CC1010"
        android:scaleType="fitStart"
        android:src="@drawable/image" />
 
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="center_vertical|right"
        android:background="#CC1010"
        android:scaleType="center"
        android:src="@drawable/image" />
 
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom"
        android:background="#CC1010"
        android:scaleType="centerCrop"
        android:src="@drawable/image" />
 
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_gravity="bottom|right"
        android:background="#CC1010"
        android:scaleType="centerInside"
        android:src="@drawable/image" />
</FrameLayout>

上面我们介绍了 8 种属性,其中fitStartfitCenter以及fitEnd三个属性只是摆放的位置不同,其余完全一样,所以只选择fitStart做样例。那么去掉fitCenterfitEnd之后,按照顺序我们对于 6 种属性按左右排列了 6 张图片

3. 小结

ImageView 和 TextView 都是基础 View,可以围绕它们开发出很多有意思好用的控件。对于 ImageView 而言,最复杂的就是缩放裁剪模式,这里就要关注的两个点:比例是否改变以及是否裁剪,这样相信就可以应对未来纷繁杂乱的图片尺寸的适配了。

相关文章
|
22天前
|
XML Android开发 数据格式
Android利用selector(选择器)实现图片动态点击效果
本文介绍了Android中ImageView的`src`与`background`属性的区别及应用,重点讲解如何通过设置背景选择器实现图片点击动态效果。`src`用于显示原图大小,不拉伸;`background`可随组件尺寸拉伸。通过创建`selector_setting.xml`,结合`setting_press.xml`和`setting_normal.xml`定义按下和正常状态的背景样式,提升用户体验。示例代码展示了具体实现步骤,包括XML配置和形状定义。
Android利用selector(选择器)实现图片动态点击效果
|
23天前
|
Java Android开发
Android图片的手动放大缩小
本文介绍了通过缩放因子实现图片放大缩小的功能,效果如动图所示。关键步骤包括:1) 在布局文件中设置 `android:scaleType=&quot;matrix&quot;`;2) 实例化控件并用 `ScaleGestureDetector` 处理缩放手势;3) 使用 `Matrix` 对图片进行缩放处理。为避免内存崩溃,可在全局配置添加 `android:largeHeap=&quot;true&quot;`。代码中定义了 `beforeScale` 和 `nowScale` 变量控制缩放范围,确保流畅体验。
|
22天前
|
XML 搜索推荐 Android开发
Android改变进度条控件progressbar的样式(根据源码修改)
本文介绍了如何基于Android源码自定义ProgressBar样式。首先分析了系统源码中ProgressBar样式的定义,发现其依赖一张旋转图片实现动画效果。接着分两步指导开发者实现自定义:1) 模仿源码创建一个旋转动画XML文件(放置在drawable文件夹),修改图片为自定义样式;2) 在UI控件中通过`indeterminateDrawable`属性应用该动画。最终实现简单且个性化的ProgressBar效果,附带效果图展示。
|
22天前
|
Android开发
Android控件样式的抽取(小提及快捷方式)
在Android开发中,若多个控件样式重复,可抽取公共部分以简化代码。例如对EditText提取样式,通过编辑`styles.xml`实现复用。为提高效率,Android Studio提供自动提取Style功能:右键点击控件样式选项,选择“Style...”,勾选需要提取的属性后确认,即可快速生成样式代码,显著提升开发便利性。
|
23天前
|
缓存 编解码 Android开发
Android内存优化之图片优化
本文主要探讨Android开发中的图片优化问题,包括图片优化的重要性、OOM错误的成因及解决方法、Android支持的图片格式及其特点。同时介绍了图片储存优化的三种方式:尺寸优化、质量压缩和内存重用,并详细讲解了相关的实现方法与属性。此外,还分析了图片加载优化策略,如异步加载、缓存机制、懒加载等,并结合多级缓存流程提升性能。最后对比了几大主流图片加载框架(Universal ImageLoader、Picasso、Glide、Fresco)的特点与适用场景,重点推荐Fresco在处理大图、动图时的优异表现。这些内容为开发者提供了全面的图片优化解决方案。
|
7月前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
1283 4
|
7月前
|
XML 前端开发 Android开发
Android:UI:Drawable:View/ImageView与Drawable
通过本文的介绍,我们详细探讨了Android中Drawable、View和ImageView的使用方法及其相互关系。Drawable作为图像和图形的抽象表示,提供了丰富的子类和自定义能力,使得开发者能够灵活地实现各种UI效果。View和ImageView则通过使用Drawable实现了各种图像和图形的显示需求。希望本文能为您在Android开发中使用Drawable提供有价值的参考和指导。
139 2
|
7月前
|
Android开发
布谷语音软件开发:android端语音软件搭建开发教程
语音软件搭建android端语音软件开发教程!
|
8月前
|
XML 存储 Java
浅谈Android的TextView控件
浅谈Android的TextView控件
88 0
|
XML Android开发 数据格式
Android自定义控件(十二)——自定义属性及应用
Android自定义控件(十二)——自定义属性及应用
235 0
Android自定义控件(十二)——自定义属性及应用