Android自定义控件实现icon+文字的多种效果

概述今天给大家带来一个很简单但是很常用的控件ButtonExtendM，在开发中我们经常会用到图片加文字的组合控件，像这样：

今天给大家带来一个很简单但是很常用的控件buttonExtendM，在开发中我们经常会用到图片加文字的组合控件，像这样：

以上图片都是从微信上截取的。（暂时没有找到icon在下，文字在上的例子）

下面我们通过一个控件来实现上下左右全部的样式，只需改动一个属性值即可改变icon的位置，是不是很方便，先看下demo效果图：

没错上图的三种不同的样式都是通过同一个控件实现的，下面我们看下代码

第一步 自定义属性 

在res/values/目录下新建attrs.xml文件，
添加如下属性

<attr name="backcolor" format="color" /> <attr name="backcolorPress" format="color" /> <attr name="textcolor" format="color" /> <attr name="textcolorPress" format="color" /> <declare-styleable name="buttonExtendM">  <attr name="backcolor"/>  <attr name="backcolorPress"/>  <attr name="textcolor"/>  <attr name="textcolorPress"/>  <attr name="iconDrawable" format="reference" />  <attr name="iconDrawablePress" format="reference" />  <attr name="text" format="string" />  <attr name="textSize" format="float" />  <attr name="spacing" format="dimension" />  <attr name="style">   <enum name="iconleft" value="0" />   <enum name="iconRight" value="1" />   <enum name="iconUp" value="2" />   <enum name="iconBottom" value="3" />  </attr> </declare-styleable>

第二步 新建布局文件vIEw_button_extend_m.xml

<relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content"> <ImageVIEw  androID:ID="@+ID/iv_icon"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"/> <TextVIEw  androID:ID="@+ID/tv_content"  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:visibility="gone"  androID:text="@string/button_extend_m_default_text"/></relativeLayout>

第三步 新建buttonExtendM.java继承relativeLayout

package com.landptf.vIEw;import androID.content.Context;import androID.content.res.colorStateList;import androID.content.res.TypedArray;import androID.graphics.drawable.Drawable;import androID.util.AttributeSet;import androID.vIEw.Gravity;import androID.vIEw.LayoutInflater;import androID.vIEw.MotionEvent;import androID.vIEw.VIEw;import androID.Widget.ImageVIEw;import androID.Widget.relativeLayout;import androID.Widget.TextVIEw;import com.landptf.R;import com.landptf.util.ConvertM;/** * Created by landptf on 2016/10/31. * 扩展button，支持文字和icon分上下左右四种方式显示 * 默认为左右结构，图片在左，文字在右 */public class buttonExtendM extends relativeLayout { /**  * 左右结构，图片在左，文字在右  */ public static final int STYLE_ICON_left = 0; /**  * 左右结构，图片在右，文字在左  */ public static final int STYLE_ICON_RIGHT = 1; /**  * 上下结构，图片在上，文字在下  */ public static final int STYLE_ICON_UP = 2; /**  * 上下结构，图片在下，文字在上  */ public static final int STYLE_ICON_DOWN = 3; /**  * 定义控件  */ private ImageVIEw ivIcon; private TextVIEw tvContent; /**  * 上下文  */ private Context mContext; /**  * VIEw的背景色  */ private int backcolor = 0; /**  * VIEw被按下时的背景色  */ private int backcolorPress = 0; /**  * icon的背景图片  */ private Drawable iconDrawable = null; /**  * icon被按下时显示的背景图片  */ private Drawable iconDrawablePress = null; /**  * VIEw文字的颜色  */ private colorStateList textcolor = null; /**  * VIEw被按下时文字的颜色  */ private colorStateList textcolorPress = null; /**  * 两个控件之间的间距，默认为8dp  */ private int spacing = 8; /**  * 两个控件的位置结构  */ private int mStyle = STYLE_ICON_left; /**  * 标示ontouch方法的返回值，用来解决onClick和ontouch冲突问题  */ private boolean isCost = true; private OnClickListener onClickListener = null; public interface OnClickListener {  voID onClick(VIEw v); } /**  * 设置VIEw的Click事件  *  * @param l  */ public voID setonClickListener(OnClickListener l) {  this.onClickListener = l;  isCost = false; } public buttonExtendM(Context context) {  super(context);  mContext = context; } public buttonExtendM(Context context,AttributeSet attrs) {  this(context,attrs,0); } public buttonExtendM(Context context,AttributeSet attrs,int defStyle) {  super(context,defStyle);  mContext = context;  init(context,defStyle); } private voID init(Context context,int defStyle) {  //加载布局  LayoutInflater.from(context).inflate(R.layout.vIEw_button_extend_m,this,true);  //初始化控件  ivIcon = (ImageVIEw) findVIEwByID(R.ID.iv_icon);  tvContent = (TextVIEw) findVIEwByID(R.ID.tv_content);  setGravity(Gravity.CENTER);  TypedArray a = getContext().obtainStyledAttributes(    attrs,R.styleable.buttonExtendM,defStyle,0);  if (a != null) {   //设置背景色   colorStateList colorList = a.getcolorStateList(R.styleable.buttonExtendM_backcolor);   if (colorList != null) {    backcolor = colorList.getcolorForState(getDrawableState(),0);    if (backcolor != 0) {     setBackgroundcolor(backcolor);    }   }   //记录VIEw被按下时的背景色   colorStateList colorListPress = a.getcolorStateList(R.styleable.buttonExtendM_backcolorPress);   if (colorListPress != null) {    backcolorPress = colorListPress.getcolorForState(getDrawableState(),0);   }   //设置icon   iconDrawable = a.getDrawable(R.styleable.buttonExtendM_iconDrawable);   if (iconDrawable != null) {    ivIcon.setimageDrawable(iconDrawable);   }   //记录VIEw被按下时的icon的图片   iconDrawablePress = a.getDrawable(R.styleable.buttonExtendM_iconDrawablePress);   //设置文字的颜色   textcolor = a.getcolorStateList(R.styleable.buttonExtendM_textcolor);   if (textcolor != null) {    tvContent.setTextcolor(textcolor);   }   //记录VIEw被按下时文字的颜色   textcolorPress = a.getcolorStateList(R.styleable.buttonExtendM_textcolorPress);   //设置显示的文本内容   String text = a.getString(R.styleable.buttonExtendM_text);   if (text != null) {    //默认为隐藏的，设置文字后显示出来    tvContent.setVisibility(VISIBLE);    tvContent.setText(text);   }   //设置文本字体大小   float textSize = a.getfloat(R.styleable.buttonExtendM_textSize,0);   if (textSize != 0) {    tvContent.setTextSize(textSize);   }   //设置两个控件之间的间距   spacing = a.getDimensionPixelSize(R.styleable.buttonExtendM_spacing,ConvertM.dp2px(context,8));   //设置两个控件的位置结构   mStyle = a.getInt(R.styleable.buttonExtendM_style,0);   setIconStyle(mStyle);   a.recycle();  }  setontouchListener(new OntouchListener() {   @OverrIDe   public boolean ontouch(VIEw arg0,MotionEvent event) {    //根据touch事件设置按下抬起的样式    return settouchStyle(event.getAction());   }  });  setonClickListener(new VIEw.OnClickListener() {   @OverrIDe   public voID onClick(VIEw v) {    if (onClickListener != null) {     onClickListener.onClick(v);    }   }  }); } /**  * 根据按下或者抬起来改变背景和文字样式  *  * @param state  * @return isCost  */ private boolean settouchStyle(int state) {  if (state == MotionEvent.ACTION_DOWN) {   if (backcolorPress != 0) {    setBackgroundcolor(backcolorPress);   }   if (iconDrawablePress != null) {    ivIcon.setimageDrawable(iconDrawablePress);   }   if (textcolorPress != null) {    tvContent.setTextcolor(textcolorPress);   }  }  if (state == MotionEvent.ACTION_UP) {   if (backcolor != 0) {    setBackgroundcolor(backcolor);   }   if (iconDrawable != null) {    ivIcon.setimageDrawable(iconDrawable);   }   if (textcolor != null) {    tvContent.setTextcolor(textcolor);   }  }  return isCost; } /**  * 设置图标位置  * 通过重置LayoutParams来设置两个控件的摆放位置  * @param style  */ public voID setIconStyle(int style) {  mStyle = style;  relativeLayout.LayoutParams lp;  switch (style) {   case STYLE_ICON_left:    lp = new relativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);    lp.addRule(relativeLayout.CENTER_VERTICAL);    ivIcon.setLayoutParams(lp);    lp = new relativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);    lp.addRule(relativeLayout.CENTER_VERTICAL);    lp.addRule(relativeLayout.RIGHT_OF,ivIcon.getID());    lp.leftmargin = spacing;    tvContent.setLayoutParams(lp);    break;   case STYLE_ICON_RIGHT:    lp = new relativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);    lp.addRule(relativeLayout.CENTER_VERTICAL);    tvContent.setLayoutParams(lp);    lp = new relativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,tvContent.getID());    lp.leftmargin = spacing;    ivIcon.setLayoutParams(lp);    break;   case STYLE_ICON_UP:    lp = new relativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);    lp.addRule(relativeLayout.CENTER_HORIZONTAL);    ivIcon.setLayoutParams(lp);    lp = new relativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);    lp.addRule(relativeLayout.CENTER_HORIZONTAL);    lp.addRule(relativeLayout.BELOW,ivIcon.getID());    lp.leftmargin = spacing;    tvContent.setLayoutParams(lp);    break;   case STYLE_ICON_DOWN:    lp = new relativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);    lp.addRule(relativeLayout.CENTER_HORIZONTAL);    tvContent.setLayoutParams(lp);    lp = new relativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT,tvContent.getID());    lp.leftmargin = spacing;    ivIcon.setLayoutParams(lp);    break;   default:    break;  } } /**  * 设置VIEw的背景色  *  * @param backcolor  */ public voID setBackcolor(int backcolor) {  this.backcolor = backcolor;  setBackgroundcolor(backcolor); } /**  * 设置VIEw被按下时的背景色  *  * @param backcolorPress  */ public voID setBackcolorPress(int backcolorPress) {  this.backcolorPress = backcolorPress; } /**  * 设置icon的图片  *  * @param iconDrawable  */ public voID setIconDrawable(Drawable iconDrawable) {  this.iconDrawable = iconDrawable;  ivIcon.setimageDrawable(iconDrawable); } /**  * 设置VIEw被按下时的icon的图片  *  * @param iconDrawablePress  */ public voID setIconDrawablePress(Drawable iconDrawablePress) {  this.iconDrawablePress = iconDrawablePress; } /**  * 设置文字的颜色  *  * @param textcolor  */ public voID setTextcolor(int textcolor) {  if (textcolor == 0) return;  this.textcolor = colorStateList.valueOf(textcolor);  tvContent.setTextcolor(this.textcolor); } /**  * 设置VIEw被按下时文字的颜色  *  * @param textcolorPress  */ public voID setTextcolorPress(int textcolorPress) {  if (textcolorPress == 0) return;  this.textcolorPress = colorStateList.valueOf(textcolorPress); } /**  * 设置显示的文本内容  *  * @param text  */ public voID setText(CharSequence text) {  //默认为隐藏的，设置文字后显示出来  tvContent.setVisibility(VISIBLE);  tvContent.setText(text); } /**  * 获取显示的文本  *  * @return  */ public String getText() {  return tvContent.getText().toString(); } /**  * 设置文本字体大小  *  * @param size  */ public voID setTextSize(float size) {  tvContent.setTextSize(size); } /**  * 设置两个控件之间的间距  *  * @param spacing  */ public voID setSpacing(int spacing) {  this.spacing = ConvertM.dp2px(mContext,spacing);  //设置完成后刷新一下两个控件的结构，避免先执行了setIconStyle后，setSpacing不生效  setIconStyle(mStyle); }}

代码注释基本可以看懂具体的实现，接下来主要看下如何使用

在layout里直接引用buttonExtendM即可，注意要添加

xmlns:landptf="http://schemas.android.com/apk/res-auto"

<com.landptf.vIEw.buttonExtendM androID:ID="@+ID/bem_back" androID:layout_wIDth="wrap_content" androID:layout_height="wrap_content" androID:layout_centerVertical="true" androID:layout_marginleft="8dp" landptf:iconDrawable="@drawable/Title_back" landptf:iconDrawablePress="@drawable/Title_back_selected" landptf:textcolor="@androID:color/white" landptf:spacing="4dp" landptf:text="返回"/>

这个是实现的菜单栏的返回按钮，左右结构，icon在左为默认样式，注意一下*Press的属性，主要是用来设置控件被按下后的效果的。

再来看一个上下结构的

<com.landptf.vIEw.buttonExtendM androID:layout_wIDth="0dp" androID:layout_height="match_parent" androID:layout_weight="1" landptf:iconDrawable="@drawable/icon_home_page" landptf:text="首页" landptf: />

只需要设置landptf:style即可，同时也可以通过java代码实现

setIconStyle(buttonExtendM.STYLE_ICON_UP)

全部代码已托管到开源中国的码云上，欢迎下载，地址：https://git.oschina.net/landptf/landptf.git

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android自定义控件实现icon+文字的多种效果全部内容，希望文章能够帮你解决Android自定义控件实现icon+文字的多种效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。