自定义Android带图片的按钮

自定义 Android 带图片的按钮 前言 现在移动设备的按钮设计讲究大图标小文字 希望用户只要一看到图标便能知道这个按钮 是干嘛的 但又要有必要的文字提示 最常见的就数搜索按钮了 上面一个大大的放大镜 图标 下面两个字 搜索 Bill 最近也在做具有这种效果的按钮 过程总是曲折的 不过结果总是美好滴 现在 Bill 把其做法分享给大家 希望对还不会的朋友有所帮助 先看看 bill 曲折的过程吧 也许里面就有你的影子 最开始以为直接利用 Android 控件 ImageButton 即可完事 谁知事不如人料 ImageButton 只能显示图片 并不能对其添加文字 此想法不攻自破 于是我想到了直接用 Button 但是 Button 的文字却是显示在图片内部 并不能达到我的需 求 放弃 懒人总有懒人的办法 我可以直接在图片下方 PS 需要的文字嘛 然后把 P 好的图片放进 ImageButton 就好了 此法十分简单好用 但是 一旦我们需要改变文字 或者我要把文字 显示在图片顶部而不是底部怎么办 此法虽简单 却缺乏可变性 放弃 这就是所谓的 一钮三折 了 那么 有没有一种方法既能够拥有 Button 的效果 又能够实现 Button 显示的自定义呢 答案是肯定的 接下来 bill 将一步一步详细解释这个按钮的制作过程 思路 首先 我们来看一下这个按钮的实现思路 有一种思维方式叫做 out of box 也就是鼓 励大家跳出固定思维模式以寻求新的突破 但是在 跳出箱子 之前 我们必须首先知道 困住我们思维的 箱子 是什么 在这里 这个箱子就是 按钮 我们一直在想 如何去实现这个 按钮 怎么才能让 按钮 显示出图片 然后在图片下面还显示一行字 我们就在 按钮 这个箱子里纠结 但实际上 当我们发现所谓的 按钮 其实就是一个 View 的时候 一切就变得简单了 它只不过是一个可点击 可设置监听 可显示文字或者图片的 View 而已 那么我们就跳 出 Android 给我们设置的这个箱子 自己重新造一个具有我们需要的功能和外观的 View 不 就 OK 了 经过分析 上述按钮效果实际上就是一个布局 一个最简单不过的垂直线性布局 上部分 是一个 ImageView 下部分是一个 TextView 这个布局可点击 可设置监听 我们首先要编写自己的 ImageButton 类 然后在主布局文件中为我们自定义的 Button 编写 布局 最后在 Activity 中调用我们自定义 ImageButton 即可 那么接下来我们就一起来实现这个简单的 LinearLayout 编码实现自己的 ImageButton 在编写我们自己的 ImageButton 之前 如果读者并不清楚如何在一个静态的 xml 布局文件 中动态地加载子布局 请先阅读下面的博文 此文言简意赅 已经写得很清楚了 bill 就 不再赘述 首先 我们编写一个 MyImageButton 类 继承自 LinearLayout 复制内容到剪贴板 代码 package com billhoo study import android content Context import android widget ImageView import android widget LinearLayout import android widget TextView 自定义 ImageButton 模拟 ImageButton 并在其下方显示文字 提供 Button 的部分接口 public class MyImageButton extends LinearLayout public MyImageButton Context context int imageResId int textResId super context mButtonImage new ImageView context mButtonText new TextView context setImageResource imageResId mButtonImage setPadding 0 0 0 0 setText textResId setTextColor 0 xFF000000 mButtonText setPadding 0 0 0 0 设置本布局的属性 setClickable true 可点击 setFocusable true 可聚焦 setBackgroundResource android R drawable btn default 布 局才用普通按钮的背景 setOrientation LinearLayout VERTICAL 垂直布局 首先添加 Image 然后才添加 Text 添加顺序将会影响布局效果 addView mButtonImage addView mButtonText public method setImageResource 方法 public void setImageResource int resId mButtonImage setImageResource resId setText 方法 public void setText int resId mButtonText setText resId public void setText CharSequence buttonText mButtonText setText buttonText setTextColor 方法 public void setTextColor int color mButtonText setTextColor color private attribute private ImageView mButtonImage null private TextView mButtonText null 然后在 main 布局中为我们自定义的 Button 写 xml 布局 注意 我们的 按钮 实际上是 一个线性布局 因此 xml 中应该写 LinearLayout 而不是 Button 或者 ImageButton 复制内容到剪贴板 代码 最后 在 Activity 中为我们自定义的按钮设置监听 复制内容到剪贴板 代码 package com billhoo study import android app Activity import android os Bundle import android view View import android widget Button import android widget LinearLayout public class TestActivity extends Activity Called when the activity is first created Override public void onCreate Bundle savedInstanceState super onCreate savedInstanceState setContentView R layout main btDataConfig new MyImageButton this R drawable option R string text 获取包裹本按钮的容器 llbtDataConfig LinearLayout findViewById R id ll bt data config 将我们自定义的 Button 添加进这个容器 llbtDataConfig addView btDataConfig 设置按钮的监听 btDataConfig setOnClickListener new Button OnClickListener Override public void onClick Vie