1. 程式人生 > >Android中ImageView和ImageButton的比較詳解

Android中ImageView和ImageButton的比較詳解

第一次寫部落格,不知從何寫起,就從最近專案中遇到的一些細節問題說起吧!

專案中使用ImageButton,但是給圖片設定具體尺寸(width,height)之後,發現還是原來的大小,為了保持圖片的原始畫素,並沒有給ImageButton設定ScaleType,後來將ImageButton換成ImageView之後就ok了(並不是唯一解決方案)

於是,想搞明白ImageView和ImageButton之間到底有什麼不同,發現兩者之間還是有不小的區別.

原始碼的角度看繼承關係,一目瞭然:
這裡寫圖片描述
這裡寫圖片描述

下面分幾種不同的情況去說明兩者之間的差別:

1,不設定具體寬高

<ImageView
android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00f" android:src="@drawable/search"/>
<ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:background
="#0f0" android:src="@drawable/search"/>

效果是這樣的:
這裡寫圖片描述
兩者沒有區別

2,設定了具體的寬高

<ImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#00f"
    android:src="@drawable/search"
    />

<ImageButton
    android:layout_width="100dp"
    android:layout_height="100dp"
android:layout_marginTop="20dp" android:background="#0f0" android:src="@drawable/search"/>

效果是這樣的:
這裡寫圖片描述
效果就很明顯了,ImageView會根據設定的具體寬高尺寸變化,但是ImageButton只會顯示圖片的原始畫素大小.
當然,給ImageButton設定scaletype屬性是可以完成ImageView的效果,但是那樣會是圖片失真.

3,設定背景選擇器

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:background="#00f"
    android:src="@drawable/search_selector"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:background="#0f0"
    android:src="@drawable/search_selector"/>

注意:
ImageView要想使選擇器效果生效,需要讓控制元件是有焦點的,這裡加上clickable=true處理一下
ImageButton就不需要處理,因為原始碼中,ImageButton的構造中,已經setFocusable(true)處理過了
這裡寫圖片描述

效果都一樣的,選擇器都會生效,這裡就不上圖了.
同時,將寬高改成的具體尺寸,效果也是一樣的,選擇器都會生效

將兩者的src換成background試了一下:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:background="@drawable/search_selector"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:background="@drawable/search_selector"/>

效果也是一樣的,選擇器都會生效
同時,將寬高改成的具體尺寸,效果也是一樣的,選擇器都會生效

所以,在選擇器的使用上,兩者基本沒有差別,要說差別,那就是ImageView需要處理一下焦點問題吧

4,設定background(無具體寬高)

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:background="@drawable/search_selected"/>

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:background="@drawable/search_selected"/>

效果如圖:
這裡寫圖片描述
效果一樣,一會再說src和background的區別

5,設定background(有具體寬高)

<ImageView
  android:layout_width="100dp"
    android:layout_height="100dp"
    android:clickable="true"
    android:background="@drawable/search_selected"/>

<ImageButton
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/search_selected"/>

效果如圖:
這裡寫圖片描述
兩者效果一樣的,但是跟使用src不同的是,ImageButton的效果也跟著具體引數不同而改變了.

下面就說一下src和background的區別吧(ImageView和ImageButton通用):

(1),src指定的是原圖的大小,寬高設定成圖片的原始尺寸,在解析度不同的手機上,顯示效果會不同,但不會進行拉伸;
background會根據具體的寬高進行拉伸

注意:
src指定的圖片的寬高要是設定成超過其原始尺寸,比如圖片原始畫素是48*48,但是寬高設定成100*100,圖片也是會被拉伸的

(2),src是圖片的前景,background是背景,background是所有控制元件都有的屬性,兩者可以同時使用

(3),scaleType屬性只有src才生效

6,點9圖

<ImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:src="@drawable/bg"/>

<ImageButton
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_marginTop="10dp"
    android:background="@null"
    android:src="@drawable/bg"/>

<ImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_marginTop="10dp"
    android:background="@drawable/bg"/>

<ImageButton
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_marginTop="10dp"
    android:background="@drawable/bg"/>

效果如下:
這裡寫圖片描述
ImageView和ImageButton在設定成src指定圖片的時候,點9圖都沒有生效,ImageButton顯示的是圖片的原始大小,ImageView根據具體寬高,放大了圖片;
但是都使用background的時候,點9圖就生效了

總結:
1, ImageView和ImageButton在用src指定圖片的時候,不設定具體寬高,顯示效果一樣;
設定了具體寬高,若寬高不是圖片的原始大小,ImageView會根據寬高放大或者縮小,ImageButton會顯示原始圖片大小

2, ImageView和ImageButton在使用background的時候,效果是一樣的

3, ImageView和ImageButton在用選擇器的時候,無論是src還是backgroud,都會生效,前提是ImageView需要獲取到焦點

3,ImageView和ImageButton在使用點9圖的時候,使用src指定點9圖,都不會生效;
使用background指定點9圖,都才會生效

補充:
對於網上的一些資料說ImageButton支援點9圖,ImageView不支援點9圖,對此感覺這種說法並不嚴謹

以上就是ImageView和ImageButton的區別,有不對之處,歡迎指正!