Android開發(fā)學(xué)習(xí)教程（9）- Android ImageView用法和屬性
上一篇我們講了文本輸入框EditText的基本用法，這里來學(xué)習(xí)圖片控件ImageView的基本用法。
ImageView是什么
ImageView，圖像視圖，直接繼承自View類，它的主要功能是用于顯示圖片，實際上它不僅僅可以用來顯示圖片，任何Drawable對象都可以使用ImageView來顯示。ImageView可以適用于任何布局中，并且Android為其提供了縮放和著色的一些操作。
ImageView有什么用
用來顯示圖片。
ImageView怎么用
繼續(xù)基于上一篇的項目，我們增加幾張圖片：
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"????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(默認(rèn))"????????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上，這里需要注意的是當(dāng)使用src顯示圖片時，圖片顯示的方式有8種模式，其實可以分為三個類型；android:layout_marginLeft：控件離左方的距離；屬性android:src的三種類型
1
2
3
以FIT_開頭的4種，它們的共同點是都會對圖片進行縮放；以CENTER_開頭的3種，它們的共同點是居中顯示，圖片的中心點會與ImageView的中心點重疊；ScaleType.MATRIX，保持原圖大小、從左上角的點開始，以矩陣形式繪圖；其中 android:inputType=”number” 是規(guī)定輸入框內(nèi)只能輸入數(shù)字。
下面具體看看8中模式的區(qū)別：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fitStart：圖片等比縮放到控件大小，并放置在控件的上邊或左邊展示。此模式下會在ImageView的下半部分留白，如果圖片高度大于寬，那么就會在ImageView的右半部份留白；fitCenter：該模式是ImageView的默認(rèn)模式，如果沒有設(shè)置ScaleType時，將采用這種模式展示圖片。在該模式下，圖片會被等比縮放到能夠填充控件大小，并居中展示；fitEnd：圖片等比縮放到控件大小，并放置在控件的下邊或右邊展示。此模式下會在ImageView的上半部分留白，如果圖片高度大于寬，那么就會在ImageView的左半部分留白；fitXY：圖片縮放到控件大小，完全填充控件大小展示。注意，此模式不是等比縮放。這個模式理解也是最簡單的；centerCrop：圖片會被等比縮放直到完全填充整個ImageView，并居中顯示。該模式也是最常用的模式了，圖片的高度是能完全展示出來的；center：不使用縮放，ImageView會展示圖片的中心部分，即圖片的中心點和ImageView的中心點重疊。如果圖片的大小小于控件的寬高，那么圖片會被居中顯示；centerInside：使用此模式以完全展示圖片的內(nèi)容為目的。圖片將被等比縮放到能夠完整展示在ImageView中并居中，如果圖片大小小于控件大小，那么就直接居中展示該圖片；matrix：保持原圖大小、從左上角的點開始，以矩陣形式繪圖，這里暫不詳細(xì)說，后面再單獨看。源碼鏈接：https://yunjunet.cn/876742.html
標(biāo)簽：
