文档库 最新最全的文档下载
当前位置:文档库 › Android实现自定义带文字和图片的Button

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

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

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

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

一.用系统自带的Button实现

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

主要代码:

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">

实现效果:

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

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

package com.test;

import android.content.Context;import android.graphics.Bitmap;import android.graphics.Bi tmapFactory;import android.graphics.Canvas;import android.util.AttributeSet;import andro id.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);

}

}

然后再布局文件中调用:

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:

xmlns:android="https://www.wendangku.net/doc/0b2391307.html,/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

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">

android:id="@+id/textview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_below="@id/imgview">

然后去继承RelativeLayout布局:

package com.test;

import android.content.Context;import android.util.AttributeSet;import https://www.wendangku.net/doc/0b2391307.html,yo

utInflater;import android.widget.ImageView;import android.widget.RelativeLayout;import a ndroid.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(https://www.wendangku.net/doc/0b2391307.html,yout.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文件中调用:

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

();

}

});

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

android 自定义圆角头像以及使用declare-styleable进行配置属性解析

android 自定义圆角头像以及使用declare-styleable进行配置属性解析由于最新项目中正在检查UI是否与效果图匹配,结果关于联系人模块给的默认图片是四角稍带弧度的圆角,而我们截取的图片是正方形的,现在要给应用统一替换。应用中既用到大圆角头像(即整个头像是圆的)又用到四角稍带弧度的圆角头像,封装一下以便重用。以下直接见代码 [java] view plain copy 在CODE上查看代码片派生到我的代码片 package com.test.demo; import com.test.demo.R; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapShader; import android.graphics.Canvas; import android.graphics.Matrix; import android.graphics.Paint; import android.graphics.RectF; import android.graphics.Shader.TileMode; import android.graphics.drawable.BitmapDrawable; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.os.Parcelable; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.widget.ImageView; /** * 圆角imageview */ public class RoundImageView extends ImageView { private static final String TAG = "RoundImageView"; /** * 图片的类型,圆形or圆角 */ private int type; public static final int TYPE_CIRCLE = 0; public static final int TYPE_ROUND = 1; /** * 圆角大小的默认值

Android平台我的日记设计文档

Android平台我的日记 设计文档 项目名称:mydiray 项目结构示意: 阶段任务名称(一)布局的设计 开始时间: 结束时间: 设计者: 梁凌旭 一、本次任务完成的功能 1、各控件的显示 二、最终功能及效果 三、涉及知识点介绍 四、代码设计 activity_main.xml:

android:layout_centerHorizontal="true" android:layout_marginTop="88dp" android:text="@string/wo" android:textSize="35sp"/>

相关文档
相关文档 最新文档