ImageView和ImageButton

android:scaleType="center" //ImageView的缩放位置属性

项目中使用ImageButton,但是给图片设置具体尺寸(width,height)之后,发现还是原来的大小,为了保持图片的原始像素,并没有给ImageButton设置ScaleType,后来将ImageButton换成ImageView之后就ok了(并不是唯一解决方案)

于是,想搞明白ImageView和ImageButton之间到底有什么不同,发现两者之间还是有不小的区别.

源码的角度看继承关系,一目了然: 

下面分几种不同的情况去说明两者之间的差别:

1,不设置具体宽高

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageView
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#00f"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:src</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search"</span>/></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageButton
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 
102);">android:layout_marginTop</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"20dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#0f0"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:src</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search"</span>/></span></code><ul
 class="pre-numbering" style="box-sizing: border-box; position: 
absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
0px 40px; border-right-width: 1px; border-right-style: solid; 
border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
right; background-color: rgb(238, 238, 238);"><li 
style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
style="box-sizing: border-box; padding: 0px 5px;">2</li><li 
style="box-sizing: border-box; padding: 0px 5px;">3</li><li 
style="box-sizing: border-box; padding: 0px 5px;">4</li><li 
style="box-sizing: border-box; padding: 0px 5px;">5</li><li 
style="box-sizing: border-box; padding: 0px 5px;">6</li><li 
style="box-sizing: border-box; padding: 0px 5px;">7</li><li 
style="box-sizing: border-box; padding: 0px 5px;">8</li><li 
style="box-sizing: border-box; padding: 0px 5px;">9</li><li 
style="box-sizing: border-box; padding: 0px 5px;">10</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">11</li><li style="box-sizing: border-box; padding: 0px
 5px;">12</li></ul><ul class="pre-numbering" 
style="box-sizing: border-box; position: absolute; width: 50px; top: 
0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 
1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); 
list-style: none; text-align: right; background-color: rgb(238, 238, 
238);"><li style="box-sizing: border-box; padding: 0px 
5px;">1</li><li style="box-sizing: border-box; padding: 0px 
5px;">2</li><li style="box-sizing: border-box; padding: 0px 
5px;">3</li><li style="box-sizing: border-box; padding: 0px 
5px;">4</li><li style="box-sizing: border-box; padding: 0px 
5px;">5</li><li style="box-sizing: border-box; padding: 0px 
5px;">6</li><li style="box-sizing: border-box; padding: 0px 
5px;">7</li><li style="box-sizing: border-box; padding: 0px 
5px;">8</li><li style="box-sizing: border-box; padding: 0px 
5px;">9</li><li style="box-sizing: border-box; padding: 0px 
5px;">10</li><li style="box-sizing: border-box; padding: 0px
 5px;">11</li><li style="box-sizing: border-box; padding: 
0px 5px;">12</li></ul>

效果是这样的: 
 
两者没有区别

2,设置了具体的宽高

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageView
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"100dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"100dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#00f"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:src</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search"</span>
    /></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageButton
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"100dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"100dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 
102);">android:layout_marginTop</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"20dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#0f0"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:src</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search"</span>/></span></code><ul
 class="pre-numbering" style="box-sizing: border-box; position: 
absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
0px 40px; border-right-width: 1px; border-right-style: solid; 
border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
right; background-color: rgb(238, 238, 238);"><li 
style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
style="box-sizing: border-box; padding: 0px 5px;">2</li><li 
style="box-sizing: border-box; padding: 0px 5px;">3</li><li 
style="box-sizing: border-box; padding: 0px 5px;">4</li><li 
style="box-sizing: border-box; padding: 0px 5px;">5</li><li 
style="box-sizing: border-box; padding: 0px 5px;">6</li><li 
style="box-sizing: border-box; padding: 0px 5px;">7</li><li 
style="box-sizing: border-box; padding: 0px 5px;">8</li><li 
style="box-sizing: border-box; padding: 0px 5px;">9</li><li 
style="box-sizing: border-box; padding: 0px 5px;">10</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">11</li><li style="box-sizing: border-box; padding: 0px
 5px;">12</li><li style="box-sizing: border-box; padding: 
0px 5px;">13</li></ul><ul class="pre-numbering" 
style="box-sizing: border-box; position: absolute; width: 50px; top: 
0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 
1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); 
list-style: none; text-align: right; background-color: rgb(238, 238, 
238);"><li style="box-sizing: border-box; padding: 0px 
5px;">1</li><li style="box-sizing: border-box; padding: 0px 
5px;">2</li><li style="box-sizing: border-box; padding: 0px 
5px;">3</li><li style="box-sizing: border-box; padding: 0px 
5px;">4</li><li style="box-sizing: border-box; padding: 0px 
5px;">5</li><li style="box-sizing: border-box; padding: 0px 
5px;">6</li><li style="box-sizing: border-box; padding: 0px 
5px;">7</li><li style="box-sizing: border-box; padding: 0px 
5px;">8</li><li style="box-sizing: border-box; padding: 0px 
5px;">9</li><li style="box-sizing: border-box; padding: 0px 
5px;">10</li><li style="box-sizing: border-box; padding: 0px
 5px;">11</li><li style="box-sizing: border-box; padding: 
0px 5px;">12</li><li style="box-sizing: border-box; padding:
 0px 5px;">13</li></ul>

效果是这样的: 
 
效果就很明显了,ImageView会根据设置的具体宽高尺寸变化,但是ImageButton只会显示图片的原始像素大小. 
当然,给ImageButton设置scaletype属性是可以完成ImageView的效果,但是那样会是图片失真.

3,设置背景选择器

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageView
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:clickable</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"true"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#00f"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:src</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search_selector"</span>/></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageButton
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 
102);">android:layout_marginTop</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"20dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"#0f0"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:src</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search_selector"</span>/></span></code><ul
 class="pre-numbering" style="box-sizing: border-box; position: 
absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
0px 40px; border-right-width: 1px; border-right-style: solid; 
border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
right; background-color: rgb(238, 238, 238);"><li 
style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
style="box-sizing: border-box; padding: 0px 5px;">2</li><li 
style="box-sizing: border-box; padding: 0px 5px;">3</li><li 
style="box-sizing: border-box; padding: 0px 5px;">4</li><li 
style="box-sizing: border-box; padding: 0px 5px;">5</li><li 
style="box-sizing: border-box; padding: 0px 5px;">6</li><li 
style="box-sizing: border-box; padding: 0px 5px;">7</li><li 
style="box-sizing: border-box; padding: 0px 5px;">8</li><li 
style="box-sizing: border-box; padding: 0px 5px;">9</li><li 
style="box-sizing: border-box; padding: 0px 5px;">10</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">11</li><li style="box-sizing: border-box; padding: 0px
 5px;">12</li><li style="box-sizing: border-box; padding: 
0px 5px;">13</li></ul><ul class="pre-numbering" 
style="box-sizing: border-box; position: absolute; width: 50px; top: 
0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 
1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); 
list-style: none; text-align: right; background-color: rgb(238, 238, 
238);"><li style="box-sizing: border-box; padding: 0px 
5px;">1</li><li style="box-sizing: border-box; padding: 0px 
5px;">2</li><li style="box-sizing: border-box; padding: 0px 
5px;">3</li><li style="box-sizing: border-box; padding: 0px 
5px;">4</li><li style="box-sizing: border-box; padding: 0px 
5px;">5</li><li style="box-sizing: border-box; padding: 0px 
5px;">6</li><li style="box-sizing: border-box; padding: 0px 
5px;">7</li><li style="box-sizing: border-box; padding: 0px 
5px;">8</li><li style="box-sizing: border-box; padding: 0px 
5px;">9</li><li style="box-sizing: border-box; padding: 0px 
5px;">10</li><li style="box-sizing: border-box; padding: 0px
 5px;">11</li><li style="box-sizing: border-box; padding: 
0px 5px;">12</li><li style="box-sizing: border-box; padding:
 0px 5px;">13</li></ul>

注意: 
ImageView要想使选择器效果生效,需要让控件是有焦点的,这里加上clickable=true处理一下 
ImageButton就不需要处理,因为源码中,ImageButton的构造中,已经setFocusable(true)处理过了 

效果都一样的,选择器都会生效,这里就不上图了. 
同时,将宽高改成的具体尺寸,效果也是一样的,选择器都会生效

将两者的src换成background试了一下:

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageView
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:clickable</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"true"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search_selector"</span>/></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageButton
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 
102);">android:layout_marginTop</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"20dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search_selector"</span>/></span></code><ul
 class="pre-numbering" style="box-sizing: border-box; position: 
absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
0px 40px; border-right-width: 1px; border-right-style: solid; 
border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
right; background-color: rgb(238, 238, 238);"><li 
style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
style="box-sizing: border-box; padding: 0px 5px;">2</li><li 
style="box-sizing: border-box; padding: 0px 5px;">3</li><li 
style="box-sizing: border-box; padding: 0px 5px;">4</li><li 
style="box-sizing: border-box; padding: 0px 5px;">5</li><li 
style="box-sizing: border-box; padding: 0px 5px;">6</li><li 
style="box-sizing: border-box; padding: 0px 5px;">7</li><li 
style="box-sizing: border-box; padding: 0px 5px;">8</li><li 
style="box-sizing: border-box; padding: 0px 5px;">9</li><li 
style="box-sizing: border-box; padding: 0px 5px;">10</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">11</li></ul><ul class="pre-numbering" 
style="box-sizing: border-box; position: absolute; width: 50px; top: 
0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 
1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); 
list-style: none; text-align: right; background-color: rgb(238, 238, 
238);"><li style="box-sizing: border-box; padding: 0px 
5px;">1</li><li style="box-sizing: border-box; padding: 0px 
5px;">2</li><li style="box-sizing: border-box; padding: 0px 
5px;">3</li><li style="box-sizing: border-box; padding: 0px 
5px;">4</li><li style="box-sizing: border-box; padding: 0px 
5px;">5</li><li style="box-sizing: border-box; padding: 0px 
5px;">6</li><li style="box-sizing: border-box; padding: 0px 
5px;">7</li><li style="box-sizing: border-box; padding: 0px 
5px;">8</li><li style="box-sizing: border-box; padding: 0px 
5px;">9</li><li style="box-sizing: border-box; padding: 0px 
5px;">10</li><li style="box-sizing: border-box; padding: 0px
 5px;">11</li></ul>

效果也是一样的,选择器都会生效 
同时,将宽高改成的具体尺寸,效果也是一样的,选择器都会生效

所以,在选择器的使用上,两者基本没有差别,要说差别,那就是ImageView需要处理一下焦点问题吧

4,设置background(无具体宽高)

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageView
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:clickable</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"true"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search_selected"</span>/></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageButton
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"wrap_content"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 
102);">android:layout_marginTop</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"20dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search_selected"</span>/></span></code><ul
 class="pre-numbering" style="box-sizing: border-box; position: 
absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
0px 40px; border-right-width: 1px; border-right-style: solid; 
border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
right; background-color: rgb(238, 238, 238);"><li 
style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
style="box-sizing: border-box; padding: 0px 5px;">2</li><li 
style="box-sizing: border-box; padding: 0px 5px;">3</li><li 
style="box-sizing: border-box; padding: 0px 5px;">4</li><li 
style="box-sizing: border-box; padding: 0px 5px;">5</li><li 
style="box-sizing: border-box; padding: 0px 5px;">6</li><li 
style="box-sizing: border-box; padding: 0px 5px;">7</li><li 
style="box-sizing: border-box; padding: 0px 5px;">8</li><li 
style="box-sizing: border-box; padding: 0px 5px;">9</li><li 
style="box-sizing: border-box; padding: 0px 5px;">10</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">11</li></ul><ul class="pre-numbering" 
style="box-sizing: border-box; position: absolute; width: 50px; top: 
0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 
1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); 
list-style: none; text-align: right; background-color: rgb(238, 238, 
238);"><li style="box-sizing: border-box; padding: 0px 
5px;">1</li><li style="box-sizing: border-box; padding: 0px 
5px;">2</li><li style="box-sizing: border-box; padding: 0px 
5px;">3</li><li style="box-sizing: border-box; padding: 0px 
5px;">4</li><li style="box-sizing: border-box; padding: 0px 
5px;">5</li><li style="box-sizing: border-box; padding: 0px 
5px;">6</li><li style="box-sizing: border-box; padding: 0px 
5px;">7</li><li style="box-sizing: border-box; padding: 0px 
5px;">8</li><li style="box-sizing: border-box; padding: 0px 
5px;">9</li><li style="box-sizing: border-box; padding: 0px 
5px;">10</li><li style="box-sizing: border-box; padding: 0px
 5px;">11</li></ul>

效果如图: 
 
效果一样,一会再说src和background的区别

5,设置background(有具体宽高)

<code
 class="hljs xml has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><span 
class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageView
</span>  <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"100dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"100dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:clickable</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"true"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search_selected"</span>/></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: 
border-box;"><<span class="hljs-title" style="box-sizing: 
border-box; color: rgb(0, 0, 136);">ImageButton
</span>    <span class="hljs-attribute" style="box-sizing: 
border-box; color: rgb(102, 0, 
102);">android:layout_width</span>=<span class="hljs-value" 
style="box-sizing: border-box; color: rgb(0, 136, 
0);">"100dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:layout_height</span>=<span
 class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"100dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 
102);">android:layout_marginTop</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"20dp"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; 
color: rgb(102, 0, 102);">android:background</span>=<span 
class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 
0);">"@drawable/search_selected"</span>/></span></code><ul
 class="pre-numbering" style="box-sizing: border-box; position: 
absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
0px 40px; border-right-width: 1px; border-right-style: solid; 
border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
right; background-color: rgb(238, 238, 238);"><li 
style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
style="box-sizing: border-box; padding: 0px 5px;">2</li><li 
style="box-sizing: border-box; padding: 0px 5px;">3</li><li 
style="box-sizing: border-box; padding: 0px 5px;">4</li><li 
style="box-sizing: border-box; padding: 0px 5px;">5</li><li 
style="box-sizing: border-box; padding: 0px 5px;">6</li><li 
style="box-sizing: border-box; padding: 0px 5px;">7</li><li 
style="box-sizing: border-box; padding: 0px 5px;">8</li><li 
style="box-sizing: border-box; padding: 0px 5px;">9</li><li 
style="box-sizing: border-box; padding: 0px 5px;">10</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">11</li></ul><ul class="pre-numbering" 
style="box-sizing: border-box; position: absolute; width: 50px; top: 
0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 
1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); 
list-style: none; text-align: right; background-color: rgb(238, 238, 
238);"><li style="box-sizing: border-box; padding: 0px 
5px;">1</li><li style="box-sizing: border-box; padding: 0px 
5px;">2</li><li style="box-sizing: border-box; padding: 0px 
5px;">3</li><li style="box-sizing: border-box; padding: 0px 
5px;">4</li><li style="box-sizing: border-box; padding: 0px 
5px;">5</li><li style="box-sizing: border-box; padding: 0px 
5px;">6</li><li style="box-sizing: border-box; padding: 0px 
5px;">7</li><li style="box-sizing: border-box; padding: 0px 
5px;">8</li><li style="box-sizing: border-box; padding: 0px 
5px;">9</li><li style="box-sizing: border-box; padding: 0px 
5px;">10</li><li style="box-sizing: border-box; padding: 0px
 5px;">11</li></ul>

效果如图: 
 
两者效果一样的,但是跟使用src不同的是,ImageButton的效果也跟着具体参数不同而改变了.

下面就说一下src和background的区别吧(ImageView和ImageButton通用):

(1),src指定的是原图的大小,宽高设置成图片的原始尺寸,在分辨率不同的手机上,显示效果会不同,但不会进行拉伸;
background会根据具体的宽高进行拉伸

注意:
src指定的图片的宽高要是设置成超过其原始尺寸,比如图片原始像素是48*48,但是宽高设置成100*100,图片也是会被拉伸的

(2),src是图片的前景,background是背景,background是所有控件都有的属性,两者可以同时使用

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

6,点9图

<code
 class="hljs perl has-numbering" style="display: block; padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', 
monospace;font-size:undefined; white-space: pre; border-radius: 0px; 
word-wrap: normal; background: transparent;"><ImageView
    android:layout_width=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"150dp"</span>
    android:layout_height=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"150dp"</span>
    android:src=<span class="hljs-string" style="color: rgb(0, 136, 
0); box-sizing: border-box;">"<span class="hljs-variable" 
style="color: rgb(102, 0, 102); box-sizing: 
border-box;">@drawable</span>/bg"</span>/>

<ImageButton
    android:layout_width=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"150dp"</span>
    android:layout_height=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"150dp"</span>
    android:layout_marginTop=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"10dp"</span>
    android:background=<span class="hljs-string" style="color: rgb(0,
 136, 0); box-sizing: border-box;">"<span class="hljs-variable" 
style="color: rgb(102, 0, 102); box-sizing: 
border-box;">@null</span>"</span>
    android:src=<span class="hljs-string" style="color: rgb(0, 136, 
0); box-sizing: border-box;">"<span class="hljs-variable" 
style="color: rgb(102, 0, 102); box-sizing: 
border-box;">@drawable</span>/bg"</span>/>

<ImageView
    android:layout_width=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"150dp"</span>
    android:layout_height=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"150dp"</span>
    android:layout_marginTop=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"10dp"</span>
    android:background=<span class="hljs-string" style="color: rgb(0,
 136, 0); box-sizing: border-box;">"<span class="hljs-variable" 
style="color: rgb(102, 0, 102); box-sizing: 
border-box;">@drawable</span>/bg"</span>/>

<ImageButton
    android:layout_width=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"150dp"</span>
    android:layout_height=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"150dp"</span>
    android:layout_marginTop=<span class="hljs-string" style="color: 
rgb(0, 136, 0); box-sizing: border-box;">"10dp"</span>
    android:background=<span class="hljs-string" style="color: rgb(0,
 136, 0); box-sizing: border-box;">"<span class="hljs-variable" 
style="color: rgb(102, 0, 102); box-sizing: 
border-box;">@drawable</span>/bg"</span>/></code><ul
 class="pre-numbering" style="box-sizing: border-box; position: 
absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 
0px 40px; border-right-width: 1px; border-right-style: solid; 
border-right-color: rgb(221, 221, 221); list-style: none; text-align: 
right; background-color: rgb(238, 238, 238);"><li 
style="box-sizing: border-box; padding: 0px 5px;">1</li><li 
style="box-sizing: border-box; padding: 0px 5px;">2</li><li 
style="box-sizing: border-box; padding: 0px 5px;">3</li><li 
style="box-sizing: border-box; padding: 0px 5px;">4</li><li 
style="box-sizing: border-box; padding: 0px 5px;">5</li><li 
style="box-sizing: border-box; padding: 0px 5px;">6</li><li 
style="box-sizing: border-box; padding: 0px 5px;">7</li><li 
style="box-sizing: border-box; padding: 0px 5px;">8</li><li 
style="box-sizing: border-box; padding: 0px 5px;">9</li><li 
style="box-sizing: border-box; padding: 0px 5px;">10</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">11</li><li style="box-sizing: border-box; padding: 0px
 5px;">12</li><li style="box-sizing: border-box; padding: 
0px 5px;">13</li><li style="box-sizing: border-box; padding:
 0px 5px;">14</li><li style="box-sizing: border-box; 
padding: 0px 5px;">15</li><li style="box-sizing: border-box;
 padding: 0px 5px;">16</li><li style="box-sizing: 
border-box; padding: 0px 5px;">17</li><li style="box-sizing:
 border-box; padding: 0px 5px;">18</li><li 
style="box-sizing: border-box; padding: 0px 5px;">19</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">20</li><li style="box-sizing: border-box; padding: 0px
 5px;">21</li><li style="box-sizing: border-box; padding: 
0px 5px;">22</li><li style="box-sizing: border-box; padding:
 0px 5px;">23</li></ul><ul class="pre-numbering" 
style="box-sizing: border-box; position: absolute; width: 50px; top: 
0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 
1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); 
list-style: none; text-align: right; background-color: rgb(238, 238, 
238);"><li style="box-sizing: border-box; padding: 0px 
5px;">1</li><li style="box-sizing: border-box; padding: 0px 
5px;">2</li><li style="box-sizing: border-box; padding: 0px 
5px;">3</li><li style="box-sizing: border-box; padding: 0px 
5px;">4</li><li style="box-sizing: border-box; padding: 0px 
5px;">5</li><li style="box-sizing: border-box; padding: 0px 
5px;">6</li><li style="box-sizing: border-box; padding: 0px 
5px;">7</li><li style="box-sizing: border-box; padding: 0px 
5px;">8</li><li style="box-sizing: border-box; padding: 0px 
5px;">9</li><li style="box-sizing: border-box; padding: 0px 
5px;">10</li><li style="box-sizing: border-box; padding: 0px
 5px;">11</li><li style="box-sizing: border-box; padding: 
0px 5px;">12</li><li style="box-sizing: border-box; padding:
 0px 5px;">13</li><li style="box-sizing: border-box; 
padding: 0px 5px;">14</li><li style="box-sizing: border-box;
 padding: 0px 5px;">15</li><li style="box-sizing: 
border-box; padding: 0px 5px;">16</li><li style="box-sizing:
 border-box; padding: 0px 5px;">17</li><li 
style="box-sizing: border-box; padding: 0px 5px;">18</li><li
 style="box-sizing: border-box; padding: 0px 
5px;">19</li><li style="box-sizing: border-box; padding: 0px
 5px;">20</li><li style="box-sizing: border-box; padding: 
0px 5px;">21</li><li style="box-sizing: border-box; padding:
 0px 5px;">22</li><li style="box-sizing: border-box; 
padding: 0px 5px;">23</li></ul>

效果如下: 
 
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图,都才会生效