自定义带图片按钮的实现。

首先，贴上效果图。

结构： 左边是图，右边是文字。

虽然这种可以用布局直接实现或者其他方式比如

。但是我认为做成自定义控件要比布局方便的多。需要什么效果，直接添加属性就行。

其次，实现。

自定义控件布局。

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:background="#FFFFFF"    android:orientation="vertical" >    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content" >        <RelativeLayout            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:gravity="center_vertical|center_horizontal" >            <ImageView                android:id="@+id/operation_imgview"                android:layout_width="25dp"                android:layout_height="25dp"                android:layout_alignParentLeft="true"                android:layout_centerVertical="true" />            <TextView                android:id="@+id/operation_txt"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:layout_centerVertical="true"                android:layout_toRightOf="@id/operation_imgview"                android:ellipsize="end"                android:gravity="center_vertical|left"                android:singleLine="true"                android:textColor="#777777"                android:textSize="15sp" />        </RelativeLayout>        <TextView            android:id="@+id/txt_ding_addone"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical|center_horizontal"            android:gravity="center_vertical|center"            android:singleLine="false"            android:text="+1"            android:textColor="#F02D2B"            android:textSize="18sp"            android:visibility="gone" />    </FrameLayout></LinearLayout>

这里多了个txt_ding_addone  为id的TextView，是我加的+1 。 当点击后，会有个+1的动画，用的地方也比较多。

这里加了个自定义属性：

<declare-styleable name="CustomImageButton">        <attr name="background_resource" format="reference" />    </declare-styleable>

Java代码实现。

package com.qiubaiclient.customui;import android.content.Context;import android.content.res.Resources;import android.content.res.TypedArray;import android.graphics.Bitmap;import android.graphics.Color;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.AnimationUtils;import android.widget.ImageView;import android.widget.LinearLayout;import android.widget.TextView;import com.qiubaiclient.main.R;import com.qiubaiclient.utils.Common;/** * 自定义带图片按钮 *  * @author xiangxm *  */public class CustomImageButton extends LinearLayout implements OnClickListener {public CustomImageButton(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);// TODO Auto-generated constructor stubmContext = context;TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CircleImageView, defStyle, 0);initData(a);}private void initData(TypedArray a) {LayoutInflater.from(mContext).inflate(R.layout.cust_imagebutton_layout,this, true);operationImageView = (ImageView) findViewById(R.id.operation_imgview);operationTxtInfo = (TextView) findViewById(R.id.operation_txt);Drawable resDrawable = a.getDrawable(R.styleable.CustomImageButton_background_resource);a.recycle();this.setBackgroundDrawable(resDrawable);// animation初始化this.txtDingAddOne = (TextView) findViewById(R.id.txt_ding_addone);animation = AnimationUtils.loadAnimation(mContext,R.anim.ding_animation);animation.setAnimationListener(new AnimationListener() {@Overridepublic void onAnimationStart(Animation arg0) {// TODO Auto-generated method stub}@Overridepublic void onAnimationRepeat(Animation arg0) {// TODO Auto-generated method stub}@Overridepublic void onAnimationEnd(Animation arg0) {// TODO Auto-generated method stubif (txtDingAddOne.getVisibility() == View.VISIBLE) {txtDingAddOne.setVisibility(View.GONE);}}});}/** * 左边图片 */private ImageView operationImageView;/** * 右边文字 */private TextView operationTxtInfo;private Context mContext;/** * +1动画 外部调用startDingAnimation()方法会添加动画。 * 也可以将onClick事件注册到本地，外部调用直接用回调IOnClickCallBack的方式。 */private Animation animation;/** * +1数字 */private TextView txtDingAddOne;public CustomImageButton(Context context, AttributeSet attrs) {super(context, attrs);// TODO Auto-generated constructor stubmContext = context;TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.CircleImageView);initData(a);}public CustomImageButton(Context context) {super(context);// TODO Auto-generated constructor stub}/** * 设置文字信息 *  * @param infoStr *            字符串资源 */public void setOperationInfo(String infoStr) {if (null != this.operationTxtInfo) {this.operationTxtInfo.setText(infoStr);}}/** * 设置文字 *  * @param infoRs *            文字资源id */public void setOperationInfo(int infoRs) {if (null != this.operationTxtInfo) {Resources rs = mContext.getResources();this.operationTxtInfo.setText(rs.getString(infoRs));}}/** * 获取当前控件显示的文字信息 *  * @return */public String getOperationInfo() {if (null != operationTxtInfo) {return this.operationTxtInfo.getText().toString();}return "";}/** * 设置字体颜色 *  * @param color *            颜色资源id */public void setOptTextColor(int color) {if (null != this.operationTxtInfo) {this.operationTxtInfo.setTextColor(color);}}/** * 十六进制颜色字符串 *  * @param colorStr */public void setOptTextColor(String colorStr) {if (null != this.operationTxtInfo) {this.operationTxtInfo.setTextColor(Color.parseColor(colorStr));}}/** * 设置图片资源 *  * @param bitmap *            图片bitmap对象 */public void setImageResource(Bitmap bitmap) {if (null == bitmap) {return;}if (null != this.operationImageView) {this.operationImageView.setImageBitmap(bitmap);}}/** * 设置图片 *  * @param drawable *            图片drawble对象 */public void setImageResource(Drawable drawable) {if (null == drawable) {return;}if (null != this.operationImageView) {Bitmap bitmap = Common.drawableToBitmap(drawable);this.operationImageView.setImageBitmap(bitmap);}}/** * 用户赞的动作 */public static final int ACTION_UP = 0;/** * 用户踩的动作 */public static final int ACTION_DOWN = 1;/** * 根据action来判断是赞还是不赞 *  * @param action *            动作 */public void startDingAnimation(int action) {if (action == ACTION_UP) {txtDingAddOne.setText("+1");} else {txtDingAddOne.setText("-1");}if (null != this.txtDingAddOne) {if (this.txtDingAddOne.getVisibility() == View.GONE|| this.txtDingAddOne.getVisibility() == View.INVISIBLE) {this.txtDingAddOne.setVisibility(View.VISIBLE);this.txtDingAddOne.startAnimation(animation);}}}public IOnClickCallBack onClickCallBack;public void setOnClickCallBack(IOnClickCallBack onClickCallBack) {this.onClickCallBack = onClickCallBack;}/** * 点击事件回调 *  * @author xiangxm *  */public interface IOnClickCallBack {/** * 点击事件监听 */void mOnClick();}@Overridepublic void onClick(View v) {// TODO Auto-generated method stub//外部直接回调if (this.onClickCallBack != null) {this.startAnimation(animation);onClickCallBack.mOnClick();}}}

+1 动画

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <!-- +1点赞动画 -->    <translate        android:duration="1000"        android:fromXDelta="0"        android:fromYDelta="0"        android:interpolator="@android:anim/accelerate_decelerate_interpolator"        android:toXDelta="0"        android:toYDelta="-50" />    <alpha        android:duration="1000"        android:fromAlpha="1.0"        android:toAlpha="0.3" /></set>

参考：http://www.2cto.com/kf/201211/171067.html