自定义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
- 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(0xFF000000);
- 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
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical" android:layout_width="fill_parent"
- android:layout_height="fill_parent">
- <!-- 这就是我们的“数据管理按钮” -->
- <LinearLayout android:id="@+id/ll_bt_data_config"
- android:layout_width="wrap_content" android:layout_height="wrap_content" />
- </LinearLayout>
最后,在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(View v) {
- btDataConfig.setText("按钮被点击过了");
- }
- });
- }
- private LinearLayout llbtDataConfig = null; //main布局中包裹本按钮的容器
- private MyImageButton btDataConfig = null;
- }
效果
扩展
大家还可以自己扩展这个类的功能,比如可以设置文字的环绕位置,大小控制等等
转自 :http://billhoo.blog.51cto.com/2337751/772442
自定义Android带图片的按钮相关推荐
- 自定义Android带图片和文字的ImageButton
自定义Android带图片的按钮 前言 现在移动设备的按钮设计讲究大图标小文字,希望用户只要一看到图标便能知道这个按钮是干嘛的,但又要有必要的文字提示,最常见的就数搜索按钮了,上面一个大大的放大镜图标 ...
- 【自定义Android带图片和文字的ImageButton】
前言 现在移动设备的按钮设计讲究大图标小文字,希望用户只要一看到图标便能知道这个按钮是干嘛的,但又要有必要的文字提示,最常见的就数搜索按钮了,上面一个大大的放大镜图标,下面两个字--搜索. Bill最 ...
- flutter图标按钮_flutter 按钮封装 带图片的按钮,带边框的按钮,纯文字的按钮
在项目中使用的时候,发现系统按钮并不符合我的需求,所以我把常用的按钮,按照我自己的理解,封装了一个! 供大家参考,如果有建议,可以评论提出! 十分感谢! 只有文字的button /* *只有文字的bu ...
- android 带箭头的按钮,android自定义带箭头对话框
本文实例为大家分享了android自定义带箭头对话框的具体代码,供大家参考,具体内容如下 import android.content.context; import android.content. ...
- android 带图片的文本框
基本原理 自定义一个IconTextView类继承自TextView,添加iconsrc属性,表示图片. 重新onDraw方法,将图片绘制到textVIew前面,然后将textView右移. 废话不多 ...
- android文本框带图片格式,android 带图片的文本框
基本原理 自定义一个IconTextView类继承自TextView,添加iconsrc属性,表示图片. 重新onDraw方法,将图片绘制到textVIew前面,然后将textView右移. 废话不多 ...
- android 带箭头的按钮,用Dialog创建带箭头的对话框
很多应用中,在点击Button后,会弹出一个带箭头的对话框,指向这个Button.网上查了,很多人都说用PopupWindow可以实现,我对PopupWindow不熟,于是试着用Dialog实现.(需 ...
- javafx 带图片的按钮菜单_flash怎么调透明度-Adobe flash调整图片透明度的方法
Adobe flash是一款用于创建动画和多媒体内容的强大软件,该软件内含丰富的工具集,具有排版精确.版面保真和强大的动画编辑功能,在多种设备中都能呈现一致效果的互动体验,使用起来非常方便.我们在使用 ...
- javafx 带图片的按钮菜单_怎么制作ICON图标 图片转ICON图标方法
怎么制作ICON图标 图片转ICON图标方法?接下来就与大家分享一下,有关利用软件制作ICON图标的方法,同时也介绍利用相关转换工具实现图片转ICON的方法. 方法/步骤 首先,我们需要借助如图所示的 ...
最新文章
- 2019-2021年中国AI芯片市场预测与展望数据
- 那个软件弹出广告_如何关闭烦人的电脑弹窗广告?5种方法教你轻松解决
- 使用【python语言】和【typescript】进行冒泡排序
- eclipse中快捷键
- 使用pdb调试Python程序
- html的div显示到最左侧,HTML/CSS:如何淡化div的左右边缘?
- redis 类型、方法
- python中读取txt文件、统计其中所有字母出现的频度_Python编程小技巧:如何统计序列中元素的出现频度...
- 远程分支显示不全 idea_IDEA中的Git操作,看完你就会了
- onvif学习笔记5:onvif框架代码初步了解
- 如何将 namedtuple 转换为字典或常规元组
- mysql 处理文件函数_mysql的字符串处理函数
- 《调色师手册:电影和视频调色专业技法(第2版)》——监视器校准
- 多功能工具箱微信小程序源码
- html按钮调用php函数,如何在html按钮上执行php函数点击
- Kafka其实就是个“篮子”
- 著名的斐波那契额数列,1 1 2 3 5 8输出第n项
- matlab2013a编译器,如何MATLAB2013a在win8-64位系统上能装mex编译器
- win10 计算机 搜索文件夹,win10如何搜索文件或文件夹_win10怎么全盘搜索文件-win7之家...
- 银河麒麟root用户自动登录
热门文章
- variable `xxx' has initializer but incomplete type
- ios使用支付宝进行支付,注意事项 集成支付宝钱包支付iOS SDK的方法与经验。...
- HYSBZ 1010 玩具装箱toy (决策单调DP)
- 测试Windows Live Writer对cnBlog的支持
- 数据库的缓存管理[ASPNET2.0深入挖掘系列听后感]
- Netty之粘包分包
- node.js 中的package.json文件怎么创建?
- Coolpad Y1刷机方法
- eclipse设置自定义快捷键
- 十四个值得推荐的个人提升方法