自定义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 就 不再赘述) http://blog.csdn.net/lzx_bupt/article/details/5600187 首先,我们编写一个 MyImageButton 类,继承自 LinearLayout 1. package com.billhoo.study; 2. 3. import android.content.Context; 4. import android.widget.ImageView; 5. import android.widget.LinearLayout; 6. import android.widget.TextView; 7. 8. //自定义 ImageButton,模拟 ImageButton,并在其下方显示文字 9. //提供 Button 的部分接口 10. public class MyImageButton extends LinearLayout { 11. 12. public MyImageButton(Context context, int imageResId, int textResI d) { 13. super(context); 14. 15. mButtonImage = new ImageView(context); 16. mButtonText = new TextView(context); 17. 18. setImageResource(imageResId); 19. mButtonImage.setPadding(0, 0, 0, 0); 20. 21. setText(textResId); 22. setTextColor(0xFF000000); 23. mButtonText.setPadding(0, 0, 0, 0); 24. 25. //设置本布局的属性 26. setClickable(true); //可点击 27. setFocusable(true); //可聚焦 28. setBackgroundResource(android.R.drawable.btn_default); //布局才 用普通按钮的背景 29. setOrientation(LinearLayout.VERTICAL); //垂直布局 30. 31. //首先添加 Image,然后才添加 Text 32. //添加顺序将会影响布局效果 33. addView(mButtonImage); 34. addView(mButtonText); 35. } 36. 37. // ----------------public method----------------------------- 38. /* 39. * setImageResource 方法 40. */ 41. public void setImageResource(int resId) { 42. mButtonImage.setImageResource(resId); 43. } 44. 45. /* 46. * setText 方法 47. */ 48. public void setText(int resId) { 49. mButtonText.setText(resId); 50. } 51. 52. public void setText(CharSequence buttonText) { 53. mButtonText.setText(buttonText); 54. } 55. 56. /* 57. * setTextColor 方法 58. */ 59. public void setTextColor(int color) { 60. mButtonText.setTextColor(color); 61. } 62. 63. // ----------------private attribute----------------------------- 64. private ImageView mButtonImage = null; 65. private TextView mButtonText = null; 66. } 然后在 main 布局中为我们自定义的 Button 写 xml 布局,注意,我们的“按钮”实际上 是一个线性布局,因此 xml 中应该写 LinearLayout 而不是 Button 或者 ImageButton 1. 2. 5. 6. 7. 9. 10. 最后,在 Activity 中为我们自定义的按钮设置监听 1. package com.billhoo.study; 2. 3. import android.app.Activity; 4. import android.os.Bundle; 5. import android.view.View; 6. import android.widget.Button; 7. import android.widget.LinearLayout; 8. 9. public class TestActivity extends Activity { 10. /** Called when the activity is first created. */ 11. @Override 12. public void onCreate(Bundle savedInstanceState) { 13. super.onCreate(savedInstanceState); 14. setContentView(R.layout.main); 15. 16. btDataConfig = new MyImageButton(this, R.drawable.option, R.stri ng.text); 17. 18. //获取包裹本按钮的容器 19. llbtDataConfig = (LinearLayout) findViewById(R.id.ll_bt_data_con fig); 20. 21. //将我们自定义的 Button 添加进这个容器 22. llbtDataConfig.addView(btDataConfig); 23. 24. //设置按钮的监听 25. btDataConfig.setOnClickListener(new Button.OnClickListener() { 26. @Override 27. public void onClick(View v) { 28. btDataConfig.setText("按钮被点击过了"); 29. } 30. }); 31. } 32. 33. private LinearLayout llbtDataConfig = null; //main 布局中包裹本按钮的 容器 34. private MyImageButton btDataConfig = null; 35. } 效果 扩展 大家还可以自己扩展这个类的功能,比如可以设置文字的环绕位置,大小控制等等
还剩5页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 3 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

sxlvxh

贡献于2015-12-29

下载需要 3 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf