ImageView一个图片展示的控件,图片处理的属性也有不少,这里趁着空余自己简单的探讨下。
一、所有view共有的属性
探讨ImageView 的图片相关的属性之前先了解下所有view共有的几个属性吧。我们平时会使用到background这个属性其实除了background这个属性外,与其对应的还有foreground这个属性。
1、 背景前景和控件内容
- background (背景)
- foreground (前景)
所有控件都有背景、前景、还有控件内容(比如TextView的text)这三者,但是这三者有什么联系呢我们先看个栗子。
(1)如下我们搞了个简单的Textview (附预览图)
<TextView
android:gravity="center"
android:textColor="#000"
android:textSize="30sp"
android:text="简单的测试"
android:layout_width="match_parent"
android:layout_height="match_parent" />
我们看到的内容就是TextView的内容
(2)添加background属性后
android:background="@color/colorAccent"
可以看到控件的背景变为我们设定的背景色,控件内容可见。(背景不要设置和字体一样颜色哈)
(3)添加foreground后
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorAccent"
android:foreground="@color/colorPrimaryDark"
android:gravity="center"
android:text="简单的测试"
android:textColor="#000"
android:textSize="30sp" />
我们只能看见前景色了
2、三者之间关系(如下图解)
二、图片控制
1、background属性探讨
背景和前景两个属性类似我们就以经常使用的background来探讨下。
background其实就代表控件背景,这个背景的显示和控件大小有关。而控件的大小又可以有三种值如下。
- wrap_content
- match_parent
- 具体的xxx dp
我们把图片设为background 之后进行相关操作:
(1)宽高都包括内容
<ImageView
android:background="@drawable/link"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
我们发现这显示正式图片默认宽高。
(2)我们宽高都设置为和父控件宽高一致时
<ImageView
android:background="@drawable/link"
android:layout_width="match_parent"
android:layout_height="match_parent" />
发现宽高拉伸铺满屏幕
(3)其中一个为wrap 一个为match时
<ImageView
android:background="@drawable/link"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
发现match的铺满相应空间
(4)固定尺寸时(100dp)
<ImageView
android:background="@drawable/link"
android:layout_width="100dp"
android:layout_height="100dp" />
发现按照相应尺寸变化
综上得出结论:
控件设置了background后(这里默认背景为图片了)图片的大小和控件大小有关。
ps:但是控件大小在开发中一般是确定的,所以我们想要控制图片使用background不可取
2、src属性探讨(为了方便观看我们设置了背景色)
还是那样,单一使用这个属性时还是由控件大小决定图片位置。
- wrap_content
- match_parent
- 具体的xxx dp
(1)都为wrap时
<ImageView
android:background="@color/colorAccent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/link" />
显示原始大小
(2)都为match时(高>宽)
<ImageView
android:background="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/link" />
图片水平居中铺满,垂直居中上下留空间。
宽<高 先让宽铺满控件 竖直方向有空余
(3)宽match 高wrap(宽>高)
<ImageView
android:background="@color/colorAccent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@drawable/link" />
宽>高 水平有剩余空间
(4)控件大小设置具体的dp
按照宽高大小分情况即可(略)
综上得出结论:
1、控件设置wrap时显示图片的默认大小
2、当宽>高时图片按照控件的大小优先高先铺满 宽有剩余空间
3、当宽<高时图片按照控件的大小优先宽先铺满 高有剩余空间
也会是说小的按照控件优先铺满,大的有剩余控件
ps:还是那句话:但是控件大小在开发中一般是确定的单单使用src也是不可取
3、src+scaleType
真正的控制图片在控件中的位置是scaleType
scaleType的值如下:
- CENTER
- CENTER_INSIDE
- CENTER_CROP
- MATRIX
- FIT_XY
- FIT_START
- FIT_CENTER
- FIT_END
(1)CENTER
保持原图的大小,显示在ImageView控件的中心。
1、当原图的size大于ImageView的size时,多出来的部分被截掉。
2、当原图的size小于imageView的size时,imageView的剩余空间会留白。
(2)CENTER_INSIDE
以原图正常显示为目的
1、如果原图大小大于ImageView的size,就按照比例缩小原图的宽高,居中显示在ImageView中。
2、如果原图size小于ImageView的size,则不做处理。居中显示图片在控件中。
(3)CENTER_CROP
以原图填满ImageView为目的
1、如果原图size大于ImageView的size,则与center_inside一样,按比例缩小,居中显示在ImageView上。
2、如果原图size小于ImageView的size,则按比例拉升原图的宽和高,填充ImageView居中显示。
(4)MATRIX
不改变原图的大小。
1、当原图尺寸大于控件尺寸时。从ImageView的左上角开始绘制,超出部分做剪切处理。
2、当原图尺寸小于控件尺寸时。从左上方按照原图大小显示。
(5)FIT_XY
把图片按照控件大小在ImageView中显示,拉伸显示图片,不保持原比例,填满ImageView.
(6)FIT_START
把原图按照比例放大缩小到ImageView的高度,显示在ImageView的start(前部/上部)。
控件宽高哪个大时哪边有空白留出
(7)FIT_CENTER
把原图按照比例放大缩小到ImageView的高度,显示在ImageView的center(中部/居中显示)。
控件宽高哪个大时哪边有空白留出
(8)FIT_END
把原图按照比例放大缩小到ImageView的高度,显示在ImageVIew的end(后部/尾部/底部)
控件宽高哪个大时哪边有空白留出