Android ImageButton 图片按钮

ImageButton 其实和 Button 类似,差别只在于 ImageButton 显示图片而不是文字

ImageButton 继承自 ImageView ,所以 ImageButton 可以像 ImageView 那样使用 android:src 来添加图片

ImageButton

ImageButton 可以根据用户按下或点击的的动作显示不同的图像

默认情况下,ImageButton 看起来像一个常规的 Button, ImageButton 显示的图像可以使用属性 android:srcsetImageResource(int) 方法来添加

如果想要要移除 ImageButton 背景图像,可以使用 android:background 定义自己的背景图像或将背景颜色设置为透明

我们写一个 demo 来演示下 ImageButton

  1. 创建一个 空的 Android 项目 cn.twle.android.ImageButton

  2. 下载图片资源 /static/i/android/imagebutton.zip 并放到 res/drawable 目录下

  3. 修改 activity_main.xml 添加一个 <ImageButton>

    <?xml version="1.0" encoding="utf-8" ?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center" 
        android:orientation="vertical" >
    
        <ImageButton
            android:src="@drawable/windpower"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    

运行 demo 效果如下

不同状态下的 ImageButton

ImageButton 如果要指示不同的按钮状态 (按下,选定等),可以为每个状态定义不同的图像

例如,默认情况下为蓝色图像,聚焦时为橙色图像,按下时为黄色

我们可以使用 selector drawable 资源来做到这一点

<?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_pressed="true"
           android:drawable="@drawable/button_pressed" /> <!-- pressed -->
     <item android:state_focused="true"
           android:drawable="@drawable/button_focused" /> <!-- focused -->
     <item android:drawable="@drawable/button_normal" /> <!-- default -->
</selector>

把上面的内容保存到 res/drawable/btn_selector.xml 然后就可以使用 android:src 属性指向它们了,Android 会根据按钮的状态和 XML 中定义的相应图像自动更改图像

注意: <item> 的顺序很重要,一定要把 正常 的图片放在最后, 因为它们是按照顺序来进行匹配的

我们来写一个 demo 实现 ImageButton 的各种状态

  1. 复用上面的 demo

  2. res/drawable 目录下新建一个文件 btn_selector.xml 用来定义 ImageButton 的各种状态背景

    <?xml version="1.0" encoding="utf-8"?>
     <selector xmlns:android="http://schemas.android.com/apk/res/android">
         <item android:state_pressed="true"
               android:drawable="@drawable/good_pressed" /> <!-- pressed -->
         <item android:state_focused="true"
               android:drawable="@drawable/good_focused" /> <!-- focused -->
         <item android:drawable="@drawable/good_normal" /> <!-- default -->
    </selector>
    
  3. 修改 activity_main.xml 将 ImageButton 的 android:src 属性指向 btn_selector

    <?xml version="1.0" encoding="utf-8" ?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center" 
        android:orientation="vertical" >
    
        <ImageButton
            android:src="@drawable/btn_selector"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    
    </LinearLayout>
    

运行 demo 效果如下

参考文档

Android 官方 ImageButton API

Android 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.