ImageView图片处理相关属性探讨

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" />

ImageView图片处理相关属性探讨_第1张图片

我们看到的内容就是TextView的内容

(2)添加background属性后

 android:background="@color/colorAccent"

ImageView图片处理相关属性探讨_第2张图片

可以看到控件的背景变为我们设定的背景色,控件内容可见。(背景不要设置和字体一样颜色哈)

(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" />

ImageView图片处理相关属性探讨_第3张图片

我们只能看见前景色了

2、三者之间关系(如下图解)

ImageView图片处理相关属性探讨_第4张图片

二、图片控制

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" />

ImageView图片处理相关属性探讨_第5张图片

我们发现这显示正式图片默认宽高。

(2)我们宽高都设置为和父控件宽高一致时

  <ImageView
    android:background="@drawable/link"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

ImageView图片处理相关属性探讨_第6张图片

发现宽高拉伸铺满屏幕

(3)其中一个为wrap 一个为match时

 

ImageView图片处理相关属性探讨_第7张图片

发现match的铺满相应空间

(4)固定尺寸时(100dp)

 <ImageView
    android:background="@drawable/link"
    android:layout_width="100dp"
    android:layout_height="100dp" />

ImageView图片处理相关属性探讨_第8张图片

发现按照相应尺寸变化

综上得出结论:
控件设置了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" />

ImageView图片处理相关属性探讨_第9张图片

显示原始大小

(2)都为match时(高>宽)

<ImageView
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/link" />

ImageView图片处理相关属性探讨_第10张图片

图片水平居中铺满,垂直居中上下留空间。
宽<高 先让宽铺满控件 竖直方向有空余

(3)宽match 高wrap(宽>高)

  <ImageView
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/link" />

ImageView图片处理相关属性探讨_第11张图片

宽>高 水平有剩余空间

(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(后部/尾部/底部)
控件宽高哪个大时哪边有空白留出

end

你可能感兴趣的:(android)