在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法。

一.用系统自带的Button实现

  最简单的一种办法就是利用系统自带的Button来实现,这种方式代码量最小。在Button的属性中有一个是drawableLeft,这个属性可以把图片设置在文字的左边,但是这种方式必须让icon的背景色是透明的,如果icon的背景色不是透明的话,会导致点击按钮时icon部分的背景色不会发生变化。

主要代码:

<Button
android:id="@+id/bt3"
android:layout_marginTop="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="火车"
android:textSize="16sp"
android:textColor="#000000"
android:paddingLeft="5dp"
android:paddingTop="5dp"
android:paddingRight="5dp"
android:paddingBottom="5dp"
android:drawableLeft="@drawable/line_bus_icon"
android:background="@drawable/button_bg">
</Button>

  实现效果:

  

  如果要让文字在图标下方,改成drawableTop即可。

二.继承系统的Button然后进行重绘

package com.test;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.Button; public class ImageTextButton2 extends Button { private int resourceId = 0;
private Bitmap bitmap; public ImageTextButton2(Context context) {
super(context,null);
} public ImageTextButton2(Context context,AttributeSet attributeSet) {
super(context, attributeSet);
this.setClickable(true);
resourceId = R.drawable.icon;
bitmap = BitmapFactory.decodeResource(getResources(), resourceId);
} public void setIcon(int resourceId)
{
this.bitmap = BitmapFactory.decodeResource(getResources(), resourceId);
invalidate();
} @Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub // 图片顶部居中显示
int x = (this.getMeasuredWidth() - bitmap.getWidth())/2;
int y = 0;
canvas.drawBitmap(bitmap, x, y, null);
// 坐标需要转换,因为默认情况下Button中的文字居中显示
// 这里需要让文字在底部显示
canvas.translate(0,(this.getMeasuredHeight()/2) - (int) this.getTextSize());
super.onDraw(canvas);
} }

  然后再布局文件中调用:

<com.test.ImageTextButton2
android:id="@+id/bt2"
android:layout_marginTop="10dp"
android:text="hello"
android:textSize="15dp"
android:textColor="#000000"
android:layout_width="60dp"
android:layout_height="70dp"
android:background="@drawable/button_bg"
/>

  注意,在xml文件中调用时,对于layout_width和layout_height两个属性千万不能用wrap_content,否则会导致按钮显示出来的只有文字部分。

三.继承布局文件

  分析发现一个带文字和icon的button其实可以看成一个线性布局或相对布局,因此可以继承布局来实现。

  先实现一个button的布局文件img_text_bt.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"> <ImageView
android:id="@+id/imgview"
android:layout_alignParentTop="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/icon">
</ImageView> <TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_below="@id/imgview">
</TextView> </RelativeLayout>

  然后去继承RelativeLayout布局:

package com.test;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView; public class ImageTextButton1 extends RelativeLayout { private ImageView imgView;
private TextView textView; public ImageTextButton1(Context context) {
super(context,null);
} public ImageTextButton1(Context context,AttributeSet attributeSet) {
super(context, attributeSet); LayoutInflater.from(context).inflate(R.layout.img_text_bt, this,true); this.imgView = (ImageView)findViewById(R.id.imgview);
this.textView = (TextView)findViewById(R.id.textview); this.setClickable(true);
this.setFocusable(true);
} public void setImgResource(int resourceID) {
this.imgView.setImageResource(resourceID);
} public void setText(String text) {
this.textView.setText(text);
} public void setTextColor(int color) {
this.textView.setTextColor(color);
} public void setTextSize(float size) {
this.textView.setTextSize(size);
} }

  然后就可以在需要的xml文件中调用:

<com.test.ImageTextButton1
android:id="@+id/bt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg"
/>

  再在Activity中使用:

     bt1 = (ImageTextButton1)findViewById(R.id.bt1);
bt1.setText("icon");
bt1.setTextColor(Color.rgb(0, 0, 0));
bt1.setOnClickListener(new OnClickListener() { @Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(MainActivity.this, "bt1被点击了", Toast.LENGTH_SHORT).show();
}
});

  三种不同方法最后的运行效果:

  工程源码下载地址:http://files.cnblogs.com/dolphin0520/TestImgTextButton.rar

【Android】Android实现自定义带文字和图片的Button的更多相关文章

  1. Android实现自定义带文字和图片的Button

    Android实现自定义带文字和图片的Button 在Android开发中经常会需要用到带文字和图片的button,下面来讲解一下常用的实现办法. 一.用系统自带的Button实现 最简单的一种办法就 ...

  2. Android开发学习之路-带文字的图片分享

    有用过微信分享SDK的都应该知道,微信分享到朋友圈的时候是不能同时分享图片和文字的,只要有缩略图,那么文字就不会生效.那么问题就来了,如果我们想把APP内的某些内容连带图片一起分享到微信,是不是没办法 ...

  3. Android应用程序之间共享文字和图片(一)

    以下为TestReceiveShare1工程 MainActivity如下: package cn.testreceiveshare1; import java.util.ArrayList; imp ...

  4. Android应用程序之间共享文字和图片(二)

    MainActivity如下: package cn.testshare1; import java.io.File; import java.util.ArrayList; import andro ...

  5. Android 带文字的图片分享

    这里也记录下上下文,因为做了一个失物招领的App,当有人上交了失物之后,可以将这个消息分享出去,这个消息内容有物品的信息和图片,而微信SDK始终无法做到,就想着把物品信息嵌入到图片中分享出去,先放一个 ...

  6. android控件---自定义带文本的ImageButton

    由于SDK提供的ImageButton只能添加图片,不能添加文字:而Button控件添加的文字只能显示在图片内部:当我们需要添加文字在图片外部时就不能满足我们的需求了,顾只能自己写个自定义ImageB ...

  7. 【Android UI】自定义带按钮的标题栏

    自定义标题栏在很多的android app中很常见,可以说是一种很有用的UI设计方法.自 己也本着学习的态度,经过一番各种坑,终于实现了,现总结如下: 一:大致流程 1.      对指定的andro ...

  8. qml自定义带文字的button tabbutton

    https://blog.csdn.net/u014416260/article/details/54579480

  9. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

随机推荐

  1. LINQ教程一:LINQ简介

    一.为什么要使用LINQ 要理解为什么使用LINQ,先来看下面一个例子.假设有一个整数类型的数组,找到里面的偶数并进行降序排序. 在C#2.0以前,如果要实现这样的功能,我们必须使用'foreach' ...

  2. 关于Unity中的删除、显示和隐藏节点

    一.删除节点和组件 1.删除一个节点,以及节点上面所有的组件全部删除了//删除一个节点的时候,节点上面所有的组件也会被删除:MonoBehaviour.Destroy(this.gameObject) ...

  3. 如何查询表A中的某字段的值在表B中不存在?

    1.测试表创建,插入数据: create table a (id int, name )); create table b (id int); ,'a'); ,'b'); ,'c'); ,'d'); ...

  4. android 编译 app

    有些编写的app需要放到android的源码中进行编译.放置的路径packages/apps/ 编译方法,参考 http://blog.csdn.net/luoshengyang/article/de ...

  5. 测试x264编码器的低延时编码和非延时编码

    最近在学x264的编码,经过大量的测试,编码1080P的视频,编码10000帧数据. 在设置为低延时编码的时候: 编码线程0,一帧耗时:7.000000 ms.编码线程0,一帧耗时:8.000000 ...

  6. c++ vector init操作

    1) string str[n]={"hello", ...}; vector<string> strArray(str,str+n); 2) vector<st ...

  7. ThinkPHP的ajaxReturn方法的使用

    ThinkPHP后端的代码如下: public function testAjax(){ $this->ajaxReturn(array('name'=>'z','age'=>18) ...

  8. openal 基础知识2

    三枚举扩展包(enumeration extension,“ALC_ENUMERATION_EXT”) 开发者可以通过这个extension得到一个字符串列表,区分不同的渲染/捕捉设备.OpenALr ...

  9. java web接口controller测试控制台输出乱码

    接口上配置:

  10. <UIKit>关于剪贴板共享数据

     http://blog.sina.com.cn/s/blog_45e2b66c010102h9.html 上面这篇文章将剪贴板的使用方法基本上已经讲清楚了,参考这篇文章,再加上一个使用剪贴板共享数据 ...