自定义view图文按钮

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

：

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

思路

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

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

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

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

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

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

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

public class MyImageButtonextends LinearLayout{

private finalImageView mButtonImage;

private finalTextView mButtonText;

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

publicMyImageButton(Context context, int imageResId,int textResId,inttextcolor,intbackColor) {

super(context);

mButtonImage= newImageView(context);

mButtonText= newTextView(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 voidsetImageResource(intimageResource) {

mButtonImage.setImageResource(imageResource);

}

public voidsettext(inttext) {

mButtonText.setText(text);

}

public voidsetText(CharSequence buttonText) {

mButtonText.setText(buttonText);

}

public voidsetTextColor(inttextColor) {

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 LinearLayoutllbtDataConfig=(LinearLayout)findViewById(R.id.butt_linear);

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

MyImageButtonbtDataConfig = newMyImageButton(this, R.drawable.ic_goods_kefu, R.string.text,R.color.colorBLACK,R.color.colorback1);

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

llbtDataConfig.addView(btDataConfig);

//设置按钮的监听

btDataConfig.setOnClickListener(newButton.OnClickListener() {

@Override

public voidonClick(View v) {

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

}

});

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

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

color字体的颜色

strings的文字内容