Android 图像按钮ImageButton

╰+哭是因爲堅強的太久メ 2022-06-05 04:11 526阅读 0赞

ImageButton派生自ImageView,而不是Button，这一点当第一眼看到ImageButton的时候，我就下意识的认识它是Button的子类。所以ImageButton拥有ImageView的属性和方法，不过ImageView有默认的按钮外观。  
从android文档中，我们可以很清楚看到ImageButton和ImageView之间的关系。  
![这里写图片描述][SouthEast]

让我们在看下ImageButton和ImageView外观的区别。  
![这里写图片描述][SouthEast 1]  
可见ImageButotn拥有和一个普通Button一样的外观，有默认的边框背景，而ImageView则什么都没有。  
这里为了让大家能清楚看出两者的不同，所以这里的图片是设计图片，不是程序运行时的图片。运行时，ImageView那块是空白的，没有背景色是看不出来的。

接下来我们说下ImageButton的一些特别的地方。

1.不同于Button既能显示文字又能显示图片，ImageButton是图像按钮，只能显示图像而不能显示文本。  
2.ImageButton上的图像可以按照比例进行拉伸，而Button上的大图会拉伸变形  
3.ImageButton可以同时设置背景图片和前景图片，实现两者图片叠加的效果。

布局文件里只有一个ImageButton，设置一张背景图片，一张前景图片(search小图标)，显示效果如下图：  
![这里写图片描述][SouthEast 2]

这里我们对ImageButton的使用就不多做说明了，在使用过程中遇到我们在详细讲一下。  
只写这么多就结束好像有点简单了，我们在加一点东西，实现ImageButton的touch效果，代码很简单，  
实现触摸ImageButton显示search图片，当然这个只是演示，大家可以发散一下，比如点击的时候，背景改变，图像大小，透明度改变等等。。。

private ImageButton ib_image;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_imagebutton);
    
            ib_image = findViewById(R.id.ib_image);
    
            ib_image.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    if(event.getAction() == MotionEvent.ACTION_DOWN)
                    {
                        ib_image.setImageResource(R.drawable.search_press);
                    }
                    else
                    {
                        ib_image.setImageDrawable(null);
                    }
                    return false;
                }
            });
        }

布局文件和上边的差不多，只不过没有设置src属性。  
![这里写图片描述][SouthEast 3]![这里写图片描述][SouthEast 4]

[SouthEast]: /images/20220605/4d152fbdab954acb9c34d657fd60bbe0.png
[SouthEast 1]: /images/20220605/bcc7047f99594c0ea969fe4b8b180572.png
[SouthEast 2]: /images/20220605/eb76329720c24f5c82f3912b943ea5b0.png
[SouthEast 3]: https://img-blog.csdn.net/20171116230741597?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWluZ3l1bG92ZQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 4]: /images/20220605/45929eb3ba574d30bd712a089d6107c0.png