自定义view图文按钮

就像是导航栏一样，经常是上面是图片，下面是文字的格式，如果用imageButton的话，只能展示图片，而用button，文字又是浮现在图片的上方，而我们需要的是文字在图片的下方

：

所以，为了达到这种方式，我们就可以使用自定义view，让我们来缕一下思路

思路

首先，我们来看一下这个按钮的实现思路。有一种思维方式叫做“ out of box ”，也就是鼓励大家跳出固定思维模式以寻求新的突破。但是在“跳出箱子”之前，我们必须首先知道困住我们思维的“箱子”是什么。

在这里，这个箱子就是“按钮”。我们一直在想，如何去实现这个“按钮”，怎么才能让“按钮”显示出图片，然后在图片下面还显示一行字。我们就在“按钮”这个箱子里纠结。

但实际上，当我们发现所谓的“按钮”其实就是一个 View 的时候，一切就变得简单了。

它只不过是一个可点击、可设置监听、可显示文字或者图片的 View 而已。那么我们就跳出 Android 给我们设置的这个箱子，自己重新造一个具有我们需要的功能和外观的 View 不就 OK 了？

经过分析，上述按钮效果实际上就是一个布局，一个最简单不过的垂直线性布局，上部分是一个 ImageView ，下部分是一个 TextView ，这个布局可点击、可设置监听。

我们首先要编写自己的 ImageButton 类，然后在主布局文件中为我们自定义的 Button 编写布局，最后在 Activity 中调用我们自定义 ImageButton 即可。

1：创建一个自定义类，继承 LinearLayout线性布局

public class MyImageButton extends LinearLayout{

private final ImageView mButtonImage ;

private final TextView mButtonText ;

// 实现的构造器，后两个方法一个是文字的颜色，一个是背景色，是我自己后加的

public MyImageButton(Context context, int imageResId, int textResId, int textcolor, int backColor) {

super (context);

mButtonImage = new ImageView(context);

mButtonText = new TextView(context);

setImageResource(imageResId);

mButtonImage .setPadding( 0 , 0 , 0 , 0 );

settext(textResId);

setTextColor(textcolor);

// 设置布局的属性

setClickable( true ); // 可点击

setFocusable( true ); // 可聚焦

// 注意的是，传入的颜色需要是： #0f00000000 格式，在 values.xml 文件中定义

setBackgroundResource(backColor); // 布局采用普通按钮的背景

setOrientation(LinearLayout. VERTICAL ); // 垂直布局

// 首先添加 image ，然后才添加 Text

// 添加顺序会以你选哪个布局效果

addView( mButtonImage );

addView( mButtonText );

}

// ----------------public method-----------------------------

/*

* setImageResource 方法

*/

public void setImageResource( int imageResource) {

mButtonImage .setImageResource(imageResource);

}

public void settext( int text) {

mButtonText .setText(text);

}

public void setText(CharSequence buttonText) {

mButtonText .setText(buttonText);

}

public void setTextColor( int textColor) {

mButtonText .setTextColor(textColor);

}

}

2、因为定义的是线性布局，所以在创建布局的时候就需要用 LinearLayout来布局,里面宽高的属性正常定义，内容需要在activity类中添加

< LinearLayout

android :id= "@+id/butt_linear4"

android :layout_width= "0dp"

android :layout_weight= "1"

android :layout_height= "80dp"

android :orientation= "vertical"

android :background= "#f10202"

>

</ LinearLayout >

3、在Activity中找到定义好的这个布局的id

private LinearLayout llbtDataConfig =(LinearLayout)findViewById(R.id. butt_linear );

然后用自己自定义的View来通过构造器传入参数 :上下文，添加的图片，显示的文字，自己定义的字体颜色，定义的背景色

MyImageButton btDataConfig = new MyImageButton( this , R.drawable. ic_goods_kefu , R.string. text ,R.color. colorBLACK ,R.color. colorback1 );

// 将我们自定义的 Button 添加进这个容器

llbtDataConfig .addView( btDataConfig );

// 设置按钮的监听

btDataConfig .setOnClickListener( new Button.OnClickListener() {

@Override

public void onClick(View v) {

btDataConfig .setText( " 按钮被点击过了 " );

}

});

这样，一个自己定义的线性图片加文字的显示就完成了。

下面是定义的字体内容图片和颜色，都是在values下

color字体的颜色

strings的文字内容