锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识自定义控件自定义效果实现

【Android自定义控件系列—icon+文字的多种效果实现】少年恃险若平地，独倚长剑凌清秋。这篇文章主要讲述Android自定义控件系列—icon+文字的多种效果实现相关的知识，希望能为你提供帮助。
转载请注明出处：http://www.cnblogs.com/landptf/p/6290810.html
今天给大家带来一个很简单但是很常用的控件ButtonExtendM，在开发中我们经常会用到图片加文字的组合控件，像这样：

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

文章图片

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

文章图片

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

文章图片

以上图片都是从微信上截取的。（暂时没有找到icon在下，文字在上的例子）
下面我们通过一个控件来实现上下左右全部的样式，只需改动一个属性值即可改变icon的位置，是不是很方便，先看下demo效果图：
Android自定义控件系列—icon+文字的多种效果实现

文章图片

没错上图的三种不同的样式都是通过同一个控件实现的，下面我们看下代码
第一步 自定义属性   
在res/values/目录下新建attrs.xml文件， 
添加如下属性
1 < attr name="backColor" format="color" /> 2< attr name="backColorPress" format="color" /> 3< attr name="textColor" format="color" /> 4< attr name="textColorPress" format="color" /> 5 6< declare-styleable name="ButtonExtendM"> 7< attr name="backColor"/> 8< attr name="backColorPress"/> 9< attr name="textColor"/> 10< attr name="textColorPress"/> 11< attr name="iconDrawable" format="reference" /> 12< attr name="iconDrawablePress" format="reference" /> 13< attr name="text" format="string" /> 14< attr name="textSize" format="float" /> 15< attr name="spacing" format="dimension" /> 16< attr name="style"> 17< enum name="iconLeft" value="https://www.songbingjia.com/android/0" /> 18< enum name="iconRight" value="https://www.songbingjia.com/android/1" /> 19< enum name="iconUp" value="https://www.songbingjia.com/android/2" /> 20< enum name="iconBottom" value="https://www.songbingjia.com/android/3" /> 21< /attr> 22< /declare-styleable>

第二步 新建布局文件view_button_extend_m.xml
1 < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2android:layout_width="wrap_content" 3android:layout_height="wrap_content"> 4 5< ImageView 6android:id="@+id/iv_icon" 7android:layout_width="wrap_content" 8android:layout_height="wrap_content"/> 9 10< TextView 11android:id="@+id/tv_content" 12android:layout_width="wrap_content" 13android:layout_height="wrap_content" 14android:visibility="gone" 15android:text="@string/button_extend_m_default_text"/> 16 17 < /RelativeLayout>

第三步 新建ButtonExtendM.java继承RelativeLayout
1 package com.landptf.view; 2 3 import android.content.Context; 4 import android.content.res.ColorStateList; 5 import android.content.res.TypedArray; 6 import android.graphics.drawable.Drawable; 7 import android.util.AttributeSet; 8 import android.view.Gravity; 9 import android.view.LayoutInflater; 10 import android.view.MotionEvent; 11 import android.view.View; 12 import android.widget.ImageView; 13 import android.widget.RelativeLayout; 14 import android.widget.TextView; 15 16 import com.landptf.R; 17 import com.landptf.util.ConvertM; 18 19 /** 20* Created by landptf on 2016/10/31. 21* 扩展Button，支持文字和icon分上下左右四种方式显示 22* 默认为左右结构，图片在左，文字在右 23*/ 24 public class ButtonExtendM extends RelativeLayout { 25/** 26* 左右结构，图片在左，文字在右 27*/ 28public static final int STYLE_ICON_LEFT = 0; 29/** 30* 左右结构，图片在右，文字在左 31*/ 32public static final int STYLE_ICON_RIGHT = 1; 33/** 34* 上下结构，图片在上，文字在下 35*/ 36public static final int STYLE_ICON_UP = 2; 37/** 38* 上下结构，图片在下，文字在上 39*/ 40public static final int STYLE_ICON_DOWN = 3; 41 42/** 43* 定义控件 44*/ 45private ImageView ivIcon; 46private TextView tvContent; 47/** 48* 上下文 49*/ 50private Context mContext; 51/** 52* View的背景色 53*/ 54private int backColor = 0; 55/** 56* View被按下时的背景色 57*/ 58private int backColorPress = 0; 59/** 60* icon的背景图片 61*/ 62private Drawable iconDrawable = null; 63/** 64* icon被按下时显示的背景图片 65*/ 66private Drawable iconDrawablePress = null; 67/** 68* View文字的颜色 69*/ 70private ColorStateList textColor = null; 71/** 72* View被按下时文字的颜色 73*/ 74private ColorStateList textColorPress = null; 75/** 76* 两个控件之间的间距，默认为8dp 77*/ 78private int spacing = 8; 79/** 80* 两个控件的位置结构 81*/ 82private int mStyle = STYLE_ICON_LEFT; 83/** 84* 标示onTouch方法的返回值，用来解决onClick和onTouch冲突问题 85*/ 86private boolean isCost = true; 87 88private OnClickListener onClickListener = null; 89 90public interface OnClickListener { 91void onClick(View v); 92} 93 94/** 95* 设置View的Click事件 96* 97* @param l 98*/ 99public void setOnClickListener(OnClickListener l) { 100this.onClickListener = l; 101isCost = false; 102} 103 104public ButtonExtendM(Context context) { 105super(context); 106mContext = context; 107} 108 109public ButtonExtendM(Context context, AttributeSet attrs) { 110this(context, attrs, 0); 111} 112 113public ButtonExtendM(Context context, AttributeSet attrs, int defStyle) { 114super(context, attrs, defStyle); 115mContext = context; 116init(context, attrs, defStyle); 117 118} 119 120private void init(Context context, AttributeSet attrs, int defStyle) { 121//加载布局 122LayoutInflater.from(context).inflate(R.layout.view_button_extend_m, this, true); 123//初始化控件 124ivIcon = (ImageView) findViewById(R.id.iv_icon); 125tvContent = (TextView) findViewById(R.id.tv_content); 126setGravity(Gravity.CENTER); 127TypedArray a = getContext().obtainStyledAttributes( 128attrs, R.styleable.ButtonExtendM, defStyle, 0); 129if (a != null) { 130//设置背景色 131ColorStateList colorList = a.getColorStateList(R.styleable.ButtonExtendM_backColor); 132if (colorList != null) { 133backColor = colorList.getColorForState(getDrawableState(), 0); 134if (backColor != 0) { 135setBackgroundColor(backColor); 136} 137} 138//记录View被按下时的背景色 139ColorStateList colorListPress = a.getColorStateList(R.styleable.ButtonExtendM_backColorPress); 140if (colorListPress != null) { 141backColorPress = colorListPress.getColorForState(getDrawableState(), 0); 142} 143//设置icon 144iconDrawable = a.getDrawable(R.styleable.ButtonExtendM_iconDrawable); 145if (iconDrawable != null) { 146ivIcon.setImageDrawable(iconDrawable); 147} 148//记录View被按下时的icon的图片 149iconDrawablePress = a.getDrawable(R.styleable.ButtonExtendM_iconDrawablePress); 150//设置文字的颜色 151textColor = a.getColorStateList(R.styleable.ButtonExtendM_textColor); 152if (textColor != null) { 153tvContent.setTextColor(textColor); 154} 155//记录View被按下时文字的颜色 156textColorPress = a.getColorStateList(R.styleable.ButtonExtendM_textColorPress); 157//设置显示的文本内容 158String text = a.getString(R.styleable.ButtonExtendM_text); 159if (text != null) { 160//默认为隐藏的，设置文字后显示出来 161tvContent.setVisibility(VISIBLE); 162tvContent.setText(text); 163} 164//设置文本字体大小 165float textSize = a.getFloat(R.styleable.ButtonExtendM_textSize, 0); 166if (textSize != 0) { 167tvContent.setTextSize(textSize); 168} 169//设置两个控件之间的间距 170spacing = a.getDimensionPixelSize(R.styleable.ButtonExtendM_spacing, ConvertM.dp2px(context, 8)); 171//设置两个控件的位置结构 172mStyle = a.getInt(R.styleable.ButtonExtendM_style, 0); 173setIconStyle(mStyle); 174a.recycle(); 175} 176 177setOnTouchListener(new OnTouchListener() { 178@Override 179public boolean onTouch(View arg0, MotionEvent event) { 180//根据touch事件设置按下抬起的样式 181return setTouchStyle(event.getAction()); 182} 183}); 184 185setOnClickListener(new View.OnClickListener() { 186@Override 187public void onClick(View v) { 188if (onClickListener != null) { 189onClickListener.onClick(v); 190} 191} 192}); 193} 194 195/** 196* 根据按下或者抬起来改变背景和文字样式 197* 198* @param state 199* @return isCost 200*/ 201private boolean setTouchStyle(int state) { 202if (state == MotionEvent.ACTION_DOWN) { 203if (backColorPress != 0) { 204setBackgroundColor(backColorPress); 205} 206if (iconDrawablePress != null) { 207ivIcon.setImageDrawable(iconDrawablePress); 208} 209if (textColorPress != null) { 210tvContent.setTextColor(textColorPress); 211} 212} 213if (state == MotionEvent.ACTION_UP) { 214if (backColor != 0) { 215setBackgroundColor(backColor); 216} 217if (iconDrawable != null) { 218ivIcon.setImageDrawable(iconDrawable); 219} 220if (textColor != null) { 221tvContent.setTextColor(textColor); 222} 223} 224return isCost; 225} 226 227/** 228* 设置图标位置 229* 通过重置LayoutParams来设置两个控件的摆放位置 230* @param style 231*/ 232public void setIconStyle(int style) { 233mStyle = style; 234RelativeLayout.LayoutParams lp; 235switch (style) { 236case STYLE_ICON_LEFT: 237lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 238lp.addRule(RelativeLayout.CENTER_VERTICAL); 239ivIcon.setLayoutParams(lp); 240lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 241lp.addRule(RelativeLayout.CENTER_VERTICAL); 242lp.addRule(RelativeLayout.RIGHT_OF, ivIcon.getId()); 243lp.leftMargin = spacing; 244tvContent.setLayoutParams(lp); 245break; 246case STYLE_ICON_RIGHT: 247lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 248lp.addRule(RelativeLayout.CENTER_VERTICAL); 249tvContent.setLayoutParams(lp); 250lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 251lp.addRule(RelativeLayout.CENTER_VERTICAL); 252lp.addRule(RelativeLayout.RIGHT_OF, tvContent.getId()); 253lp.leftMargin = spacing; 254ivIcon.setLayoutParams(lp); 255break; 256case STYLE_ICON_UP: 257lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 258lp.addRule(RelativeLayout.CENTER_HORIZONTAL); 259ivIcon.setLayoutParams(lp); 260lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 261lp.addRule(RelativeLayout.CENTER_HORIZONTAL); 262lp.addRule(RelativeLayout.BELOW, ivIcon.getId()); 263lp.leftMargin = spacing; 264tvContent.setLayoutParams(lp); 265break; 266case STYLE_ICON_DOWN: 267lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 268lp.addRule(RelativeLayout.CENTER_HORIZONTAL); 269tvContent.setLayoutParams(lp); 270lp = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT); 271lp.addRule(RelativeLayout.CENTER_HORIZONTAL); 272lp.addRule(RelativeLayout.BELOW, tvContent.getId()); 273lp.leftMargin = spacing; 274ivIcon.setLayoutParams(lp); 275break; 276default: 277break; 278} 279} 280 281/** 282* 设置View的背景色 283* 284* @param backColor 285*/ 286public void setBackColor(int backColor) { 287this.backColor = backColor; 288setBackgroundColor(backColor); 289} 290 291/** 292* 设置View被按下时的背景色 293* 294* @param backColorPress 295*/ 296public void setBackColorPress(int backColorPress) { 297this.backColorPress = backColorPress; 298} 299 300/** 301* 设置icon的图片 302* 303* @param iconDrawable 304*/ 305public void setIconDrawable(Drawable iconDrawable) { 306this.iconDrawable = iconDrawable; 307ivIcon.setImageDrawable(iconDrawable); 308} 309 310/** 311* 设置View被按下时的icon的图片 312* 313* @param iconDrawablePress 314*/ 315public void setIconDrawablePress(Drawable iconDrawablePress) { 316this.iconDrawablePress = iconDrawablePress; 317} 318 319/** 320* 设置文字的颜色 321* 322* @param textColor 323*/ 324public void setTextColor(int textColor) { 325if (textColor == 0) return; 326this.textColor = ColorStateList.valueOf(textColor); 327tvContent.setTextColor(this.textColor); 328} 329 330/** 331* 设置View被按下时文字的颜色 332* 333* @param textColorPress 334*/ 335public void setTextColorPress(int textColorPress) { 336if (textColorPress == 0) return;

    推荐阅读


    上一篇：asp.net web表单正则表达式验证器

    下一篇：Android LogCat