易网时代-编程资源站
易网时代-编程资源站 
以上图片都是从微信上截取的。（暂时没有找到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"> <ImageViewandroid:id="@+id/iv_icon"android:layout_width="wrap_content"android:layout_height="wrap_content"/> <TextViewandroid: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, attrs, defStyle）;mContext = context;init（context, attrs, defStyle）; } private void init（Context context, AttributeSet attrs, 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, LayoutParams.WRAP_CONTENT）;lp.addRule（RelativeLayout.CENTER_VERTICAL）;lp.addRule（RelativeLayout.RIGHT_OF, 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, LayoutParams.WRAP_CONTENT）;lp.addRule（RelativeLayout.CENTER_HORIZONTAL）;lp.addRule（RelativeLayout.BELOW, 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）; }}代码注释基本可以看懂具体的实现，接下来主要看下如何使用<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:style="iconUp" />只需要设置landptf:style即可，同时也可以通过java代码实现