您的位置：首页 > 其它

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

2014-11-08 22:51 225 查看

首先，贴上效果图。

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

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

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

其次，实现。

自定义控件布局。

<?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 stub
		mContext = 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() {

			@Override
			public void onAnimationStart(Animation arg0) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onAnimationRepeat(Animation arg0) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onAnimationEnd(Animation arg0) {
				// TODO Auto-generated method stub

				if (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 stub

		mContext = 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();
	}

	@Override
	public 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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航