—— 你以为的极限弄不好是别人的起点。
上一篇我们讲了文本输入框EditText的基本用法，这里来学习图片控件ImageView的基本用法。
ImageView是什么
ImageView，图像视图，直接继承自View类，它的主要功能是用于显示图片，实际上它不仅仅可以用来显示图片，任何Drawable对象都可以使用ImageView来显示。ImageView可以适用于任何布局中，并且Android为其提供了缩放和着色的一些操作。
ImageView有什么用
用来显示图片。
ImageView怎么用
继续基于上一篇的项目，我们增加几张图片：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 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> |
上面显示了八张图片，我们分别来看看：
|
1
2
3
|
android:background="@drawable/bg"：表示将图片bg作为背景图片填充ImageView的长宽；android:src="@drawable/bg"：表示将图片bg作为前景图片显示在ImageView上，这里需要注意的是当使用src显示图片时，图片显示的方式有8种模式，其实可以分为三个类型；android:layout_marginLeft：控件离左方的距离； |
属性android:src的三种类型
|
1
2
3
|
以FIT_开头的4种，它们的共同点是都会对图片进行缩放；以CENTER_开头的3种，它们的共同点是居中显示，图片的中心点会与ImageView的中心点重叠；ScaleType.MATRIX，保持原图大小、从左上角的点开始，以矩阵形式绘图； |
其中 android:inputType="number" 是规定输入框内只能输入数字。
下面具体看看8中模式的区别：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
fitStart：图片等比缩放到控件大小，并放置在控件的上边或左边展示。此模式下会在ImageView的下半部分留白，如果图片高度大于宽，那么就会在ImageView的右半部份留白；fitCenter：该模式是ImageView的默认模式，如果没有设置ScaleType时，将采用这种模式展示图片。在该模式下，图片会被等比缩放到能够填充控件大小，并居中展示；fitEnd：图片等比缩放到控件大小，并放置在控件的下边或右边展示。此模式下会在ImageView的上半部分留白，如果图片高度大于宽，那么就会在ImageView的左半部分留白；fitXY：图片缩放到控件大小，完全填充控件大小展示。注意，此模式不是等比缩放。这个模式理解也是最简单的；centerCrop：图片会被等比缩放直到完全填充整个ImageView，并居中显示。该模式也是最常用的模式了，图片的高度是能完全展示出来的；center：不使用缩放，ImageView会展示图片的中心部分，即图片的中心点和ImageView的中心点重叠。如果图片的大小小于控件的宽高，那么图片会被居中显示；centerInside：使用此模式以完全展示图片的内容为目的。图片将被等比缩放到能够完整展示在ImageView中并居中，如果图片大小小于控件大小，那么就直接居中展示该图片；matrix：保持原图大小、从左上角的点开始，以矩阵形式绘图，这里暂不详细说，后面再单独看。 |
