就像是导航栏一样,经常是上面是图片,下面是文字的格式,如果用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的文字内容