天天看點

ImageView圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end

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圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
我們看到的内容就是TextView的内容

(2)添加background屬性後

ImageView圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
可以看到控件的背景變為我們設定的背景色,控件内容可見。(背景不要設定和字型一樣顔色哈)

(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圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
我們隻能看見前景色了

2、三者之間關系(如下圖解)

ImageView圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end

二、圖檔控制

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圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
我們發現這顯示正式圖檔預設寬高。

(2)我們寬高都設定為和父控件寬高一緻時

<ImageView
    android:background="@drawable/link"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
           
ImageView圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
發現寬高拉伸鋪滿螢幕

(3)其中一個為wrap 一個為match時

<ImageView
    android:background="@drawable/link"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
           
ImageView圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
發現match的鋪滿相應空間

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

<ImageView
    android:background="@drawable/link"
    android:layout_width="100dp"
    android:layout_height="100dp" />
           
ImageView圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
發現按照相應尺寸變化

綜上得出結論:

控件設定了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圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
顯示原始大小

(2)都為match時(高>寬)

<ImageView
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/link" />
           
ImageView圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end

圖檔水準居中鋪滿,垂直居中上下留白間。

寬<高 先讓寬鋪滿控件 豎直方向有空餘

(3)寬match 高wrap(寬>高)

<ImageView
        android:background="@color/colorAccent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/link" />
           
ImageView圖檔處理相關屬性探讨一、所有view共有的屬性二、圖檔控制end
寬>高 水準有剩餘空間

(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