Android ImageButton使用详解（系列教程四）

Posted 2023-04-01 我的宝宝最可爱

目录

一、ImageButton简介

二、ImageButton的基本使用

三、ImageButton事件处理

四、ImageButton不同状态样式

---

一、ImageButton简介

ImageButton也是一个按钮，但与Button不同的是，Button显示的是文字，ImageButton显示的是图片，ImageButton集成自ImageView，拥有ImageView的所有属性，ImageView的详细讲解可以看我的这篇文章：Android ImageView使用详解

二、ImageButton的基本使用

我们一般在布局文件中直接创建ImageButton控件，调整好布局，也可以在代码中通过New的方式创建ImageButton，如非必要，一般不推荐。

下面的代码，在布局文件中创建了一个按钮，并且设置了图片按钮的src属性，引用了图片按钮上要展示的drawable资源。并为图片按钮设置了一个唯一的ID 'btnImage'，此ID会在代码中获取按钮的时候使用到。ID的命名方式一般使用驼峰方式，并以控件类型作为前缀，此处为ImageButton，所以ID以btn做为了前缀。此种方式的好处是一眼就可看出控件的类型。

<LinearLayout
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/btnImage"
            android:layout_width="100dp"
            android:layout_height="80dp"
            android:background="#ff0000"
            android:scaleType="centerCrop"
            app:srcCompat="@drawable/winter" />
    </LinearLayout>

在Activity中使用ImageButton。

public class MainActivity04 extends AppCompatActivity 

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_04);

        //根据ID获取到图片按钮对象
        ImageButton btnImage = findViewById(R.id.btnImage);

        //为图片按钮设置点击事件
        btnImage.setOnClickListener(new View.OnClickListener() 
            @Override
            public void onClick(View view) 
                System.out.println("我点击了图片按钮。");
            
        );
        
        //为图片按钮设置长按事件
        btnImage.setOnLongClickListener(new View.OnLongClickListener() 
            @Override
            public boolean onLongClick(View view) 
                System.out.println("我长按了图片按钮。");
                return false;
            
        );
        
        //为图片按钮设置触摸事件
        btnImage.setOnTouchListener(new View.OnTouchListener() 
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) 
                System.out.println("我touch了图片按钮。");

                int action = motionEvent.getAction();
                if(action == MotionEvent.ACTION_UP) 
                    System.out.println("我按下了图片按钮。");
                
                else if(action == MotionEvent.ACTION_DOWN) 
                    System.out.println("我松开了图片按钮。");
                
                else if(action == MotionEvent.ACTION_MOVE) 
                    System.out.println("我按下并移动了图片按钮。");
                
                return false;
            
        );
    

三、ImageButton事件处理

ImageButton和Button拥有同样的事件处理机制，事件处理可以查看我的这篇文章：Android Button的使用详解

四、ImageButton不同状态样式

通常情况下，我们需要根据按钮的不同状态改变按钮不同的样式，比如：按钮默认样式、按压时的样式、以及按钮选中时的样式等等。图片按钮也可以设置在不同状态下的不同图片展示。

我们只需要在图片按钮的app:srcCompat属性中引入一个设置样式的drawable资源，图片按钮的不同状态就写在drawable资源中。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!--按钮的默认状态-->
    <item android:state_window_focused="false" android:drawable="@drawable/winter">
    </item>

    <!--按下时的按钮状态-->
    <item android:state_pressed="true" android:drawable="@drawable/winter_pressed">
    </item>

    <!--选中时的按钮状态-->
    <item android:state_selected="true" android:drawable="@drawable/winter_selected">
    </item>
</selector>

需要注意的是：按钮默认状态和按下状态，系统会帮我们自己去判断，但选中状态，系统并不知道什么时候是选中，因此，若想设置成选中状态，需要手动调用按钮的setSeclect()函数。

原创不易，点个赞再走呗。。

 

Android ImageButton 点击变按钮图片

Android ImageButton 点击变换图片

使用的图片类型为 png （当然，这不重要），图片大小和 ImageButton 大小不同

效果：

 1. 准备两张在 ImageButton 中显示的图片，将其放入 drawable 或其他。

2. 放置 ImageButton 的 xml 文件

        <ImageButton
            android:id="@+id/id_tab_wechat_img"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:padding="5dp"

            android:src="@drawable/ic_wechat_normal"
            android:scaleType="centerInside"
            android:background="@android:color/transparent"/>

        <TextView
            android:id="@+id/id_tab_wechat_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Wechat"
            android:textSize="15dp"
            android:layout_marginBottom="10dp"
            android:layout_gravity="center"/>

　　src 放置图片资源。

　　scaleType 作用于 src ，centerInside 表示根据 ImageButton 进行伸缩

　　background 设置背景为透明

3. 在 Activity 中

// 获得控件实例
ImageButton mImgWechat = (ImageButton)findViewById(R.id.id_tab_wechat_img);
// 设置监听
 mImgWechat.setOnClickListener(onClickListener);
View.OnClickListener onClickListener = new View.OnClickListener() {
    @Override
     public void onClick(View view) {
        mImgWechat.setImageResource(R.drawable.ic_wechat_press);
    }
}