Android自定義控件實現(xiàn)icon+文字的多種效果
更新時間：2017年01月22日 11:20:36 作者：landptf
這篇文章主要為大家詳細(xì)介紹了Android自定義控件實現(xiàn)icon+文字的多種效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天給大家?guī)硪粋€很簡單但是很常用的控件ButtonExtendM，在開發(fā)中我們經(jīng)常會用到圖片加文字的組合控件，像這樣：
以上圖片都是從微信上截取的。（暫時沒有找到icon在下，文字在上的例子）
下面我們通過一個控件來實現(xiàn)上下左右全部的樣式，只需改動一個屬性值即可改變icon的位置，是不是很方便，先看下demo效果圖：
沒錯上圖的三種不同的樣式都是通過同一個控件實現(xiàn)的，下面我們看下代碼
第一步 自定義屬性
在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.
* 擴(kuò)展Button，支持文字和icon分上下左右四種方式顯示
* 默認(rèn)為左右結(jié)構(gòu)，圖片在左，文字在右
*/
public class ButtonExtendM extends RelativeLayout {
/**
* 左右結(jié)構(gòu)，圖片在左，文字在右
*/
public static final int STYLE_ICON_LEFT = 0;
/**
* 左右結(jié)構(gòu)，圖片在右，文字在左
*/
public static final int STYLE_ICON_RIGHT = 1;
/**
* 上下結(jié)構(gòu)，圖片在上，文字在下
*/
public static final int STYLE_ICON_UP = 2;
/**
* 上下結(jié)構(gòu)，圖片在下，文字在上
*/
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;
/**
* 兩個控件之間的間距，默認(rèn)為8dp
*/
private int spacing = 8;
/**
* 兩個控件的位置結(jié)構(gòu)
*/
private int mStyle = STYLE_ICON_LEFT;
/**
* 標(biāo)示onTouch方法的返回值，用來解決onClick和onTouch沖突問題
*/
private boolean isCost = true;
private OnClickListener onClickListener = null;
public interface OnClickListener {
void onClick(View v);
}
/**
* 設(shè)置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) {
//設(shè)置背景色
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);
}
//設(shè)置icon
iconDrawable = a.getDrawable(R.styleable.ButtonExtendM_iconDrawable);
if (iconDrawable != null) {
ivIcon.setImageDrawable(iconDrawable);
}
//記錄View被按下時的icon的圖片
iconDrawablePress = a.getDrawable(R.styleable.ButtonExtendM_iconDrawablePress);
//設(shè)置文字的顏色
textColor = a.getColorStateList(R.styleable.ButtonExtendM_textColor);
if (textColor != null) {
tvContent.setTextColor(textColor);
}
//記錄View被按下時文字的顏色
textColorPress = a.getColorStateList(R.styleable.ButtonExtendM_textColorPress);
//設(shè)置顯示的文本內(nèi)容
String text = a.getString(R.styleable.ButtonExtendM_text);
if (text != null) {
//默認(rèn)為隱藏的，設(shè)置文字后顯示出來
tvContent.setVisibility(VISIBLE);
tvContent.setText(text);
}
//設(shè)置文本字體大小
float textSize = a.getFloat(R.styleable.ButtonExtendM_textSize, 0);
if (textSize != 0) {
tvContent.setTextSize(textSize);
}
//設(shè)置兩個控件之間的間距
spacing = a.getDimensionPixelSize(R.styleable.ButtonExtendM_spacing, ConvertM.dp2px(context, 8));
//設(shè)置兩個控件的位置結(jié)構(gòu)
mStyle = a.getInt(R.styleable.ButtonExtendM_style, 0);
setIconStyle(mStyle);
a.recycle();
}
setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View arg0, MotionEvent event) {
//根據(jù)touch事件設(shè)置按下抬起的樣式
return setTouchStyle(event.getAction());
}
});
setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (onClickListener != null) {
onClickListener.onClick(v);
}
}
});
}
/**
* 根據(jù)按下或者抬起來改變背景和文字樣式
*
* @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;
}
/**
* 設(shè)置圖標(biāo)位置
* 通過重置LayoutParams來設(shè)置兩個控件的擺放位置
* @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;
}
}
/**
* 設(shè)置View的背景色
*
* @param backColor
*/
public void setBackColor(int backColor) {
this.backColor = backColor;
setBackgroundColor(backColor);
}
/**
* 設(shè)置View被按下時的背景色
*
* @param backColorPress
*/
public void setBackColorPress(int backColorPress) {
this.backColorPress = backColorPress;
}
/**
* 設(shè)置icon的圖片
*
* @param iconDrawable
*/
public void setIconDrawable(Drawable iconDrawable) {
this.iconDrawable = iconDrawable;
ivIcon.setImageDrawable(iconDrawable);
}
/**
* 設(shè)置View被按下時的icon的圖片
*
* @param iconDrawablePress
*/
public void setIconDrawablePress(Drawable iconDrawablePress) {
this.iconDrawablePress = iconDrawablePress;
}
/**
* 設(shè)置文字的顏色
*
* @param textColor
*/
public void setTextColor(int textColor) {
if (textColor == 0) return;
this.textColor = ColorStateList.valueOf(textColor);
tvContent.setTextColor(this.textColor);
}
/**
* 設(shè)置View被按下時文字的顏色
*
* @param textColorPress
*/
public void setTextColorPress(int textColorPress) {
if (textColorPress == 0) return;
this.textColorPress = ColorStateList.valueOf(textColorPress);
}
/**
* 設(shè)置顯示的文本內(nèi)容
*
* @param text
*/
public void setText(CharSequence text) {
//默認(rèn)為隱藏的，設(shè)置文字后顯示出來
tvContent.setVisibility(VISIBLE);
tvContent.setText(text);
}
/**
* 獲取顯示的文本
*
* @return
*/
public String getText() {
return tvContent.getText().toString();
}
/**
* 設(shè)置文本字體大小
*
* @param size
*/
public void setTextSize(float size) {
tvContent.setTextSize(size);
}
/**
* 設(shè)置兩個控件之間的間距
*
* @param spacing
*/
public void setSpacing(int spacing) {
this.spacing = ConvertM.dp2px(mContext, spacing);
//設(shè)置完成后刷新一下兩個控件的結(jié)構(gòu)，避免先執(zhí)行了setIconStyle后，setSpacing不生效
setIconStyle(mStyle);
}
}
代碼注釋基本可以看懂具體的實現(xiàn)，接下來主要看下如何使用
在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="返回"/>
這個是實現(xiàn)的菜單欄的返回按鈕，左右結(jié)構(gòu)，icon在左為默認(rèn)樣式，注意一下*Press的屬性，主要是用來設(shè)置控件被按下后的效果的。
再來看一個上下結(jié)構(gòu)的
<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" />
只需要設(shè)置landptf:style即可，同時也可以通過java代碼實現(xiàn)
setIconStyle(ButtonExtendM.STYLE_ICON_UP)
全部代碼已托管到開源中國的碼云上，歡迎下載，地址：https://git.oschina.net/landptf/landptf.git
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android消息機(jī)制Handler用法總結(jié)
這篇文章介紹了Android消息機(jī)制Handler用法總結(jié)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
Android Studio gradle 編譯提示‘default not found’ 解決辦法
這篇文章主要介紹了Android Studio gradle 編譯提示‘default not found’ 解決辦法的相關(guān)資料,需要的朋友可以參考下2016-12-12
Android采用File形式保存與讀取數(shù)據(jù)的方法
這篇文章主要介紹了Android采用File形式保存與讀取數(shù)據(jù)的方法,涉及Android文件流操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2016-06-06
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)簡單畫圖畫板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
這篇文章主要為大家詳細(xì)介紹了基于Android實現(xiàn)數(shù)獨游戲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了Android Studio 常見問題及解決方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-08-08
Android ScrollView實現(xiàn)橫向和豎向拖動回彈效果
這篇文章主要為大家詳細(xì)介紹了Android ScrollView實現(xiàn)橫向和豎向拖動回彈效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
Android 圖像處理(類型轉(zhuǎn)換,比例縮放,倒影,圓角)的小例子
Android 圖像處理(類型轉(zhuǎn)換,比例縮放,倒影,圓角)的小例子，需要的朋友可以參考一下2013-05-05
這篇文章主要為大家詳細(xì)介紹了Android實現(xiàn)點擊縮略圖放大效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
Android如何實現(xiàn)社交應(yīng)用中的評論與回復(fù)功能詳解
目前，各種App的社區(qū)或者用戶曬照片、發(fā)說說的地方，都提供了評論功能，為了更好地學(xué)習(xí)，自己把這個功能實現(xiàn)了一下，下面這篇文章主要給大家介紹了關(guān)于Android如何實現(xiàn)社交應(yīng)用中的評論與回復(fù)功能的相關(guān)資料，需要的朋友可以參考下2018-07-07