Androidの实现自定义带文字和图片的Button
1.利用xml实现带文字图片的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/icon"
android:background="@drawable/button_bg">
</Button>
效果如右:
如果要让文字在图标下方,改成drawableTop即可。Button中有很多属性, drawableBottom等等。
如果控制图片文字居中显示,可以看到属性paddingLeft, paddingTop 等等,可以控制文字与图片居中显示并且距离button 边缘距离大小。
如果控制点击button效果,需要添加selector.xml .... 利用android:background="@drawable/button_bg"
button_bg.xml 代码:
<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@color/light_blue"></item>
<item android:state_pressed="false" android:drawable="@color/light_gray"></item>
</selector>
color.xml 代码:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<color name="light_blue">#4A92FC</color>
<color name="light_gray">#CCCCCC</color>
</resources>
2. 自定义类继承Button然后进行重绘
主activity中代码
:
public class MainActivity extends Activity {
private ImageTextButton1 bt1;
private ImageTextButton2 bt2;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
bt1 = (ImageTextButton1) findViewById(R.id.bt1);
bt1.setText("icon");
bt1.setTextColor(Color.rgb(0, 0, 0));
bt2 = (ImageTextButton2) findViewById(R.id.bt2);
//bt2.setIcon(R.drawable.line_bus_icon);
}
}
以及main.xml代码:
<com.test.ImageTextButton1
android:id="@+id/bt1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_bg" />
<com.test.ImageTextButton2
android:id="@+id/bt2"
android:layout_width="60dp"
android:layout_height="70dp"
android:layout_marginTop="10dp"
android:background="@drawable/button_bg"
android:text="hello"
android:textColor="#000000"
android:textSize="15dp" />
2.1 ImageTextButton1的自定义实现方式
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);
}
}
继承了RelativeLayout ,需要实现相应的构造方法,在构造方法中添加
LayoutInflater.from(context).inflate(R.layout.img_text_bt, this,true);
自定义一个布局,布局代码如下:
<?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_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
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_below="@id/imgview"
android:layout_centerInParent="true" >
</TextView>
</RelativeLayout>
然后在类中定义各种set方法,方便主activity调用。
关键部分在与如何定义好该xml 的布局问题。。。 可以控制图片跟文字的位置,通过布局来控制。。。
2.2 ImageTextButton2的自定义实现方式
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) {
int x = (this.getMeasuredWidth() - bitmap.getWidth()) / 2;
int y = 0;
canvas.drawBitmap(bitmap, x, y, null);
canvas.translate(0,
(this.getMeasuredHeight() / 2) - (int) this.getTextSize());
super.onDraw(canvas);
}
}