时间:2021-05-20
今天给大家带来一个很简单但是很常用的控件ButtonExtendM,在开发中我们经常会用到图片加文字的组合控件,像这样:
以上图片都是从微信上截取的。(暂时没有找到icon在下,文字在上的例子)
下面我们通过一个控件来实现上下左右全部的样式,只需改动一个属性值即可改变icon的位置,是不是很方便,先看下demo效果图:
没错上图的三种不同的样式都是通过同一个控件实现的,下面我们看下代码
第一步自定义属性
在res/values/目录下新建attrs.xml文件,
添加如下属性
第二步新建布局文件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, 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); }}代码注释基本可以看懂具体的实现,接下来主要看下如何使用
在layout里直接引用ButtonExtendM即可,注意要添加
xmlns:landptf="http://schemas.android.com/apk/res-auto"
这个是实现的菜单栏的返回按钮,左右结构,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代码实现
setIconStyle(ButtonExtendM.STYLE_ICON_UP)
全部代码已托管到开源中国的码云上,欢迎下载,地址:https://git.oschina.net/landptf/landptf.git
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Android自定义控件实现显示文字的功能自定义控件—–逐个显示文字ONEGoal,ONEPassion!前言:今天要实现的效果时.让我们的文字一个一个显示出来
前言:前面几篇讲了自定义控件绘制原理Android自定义控件基本原理详解(一),Android自定义控件之自定义属性(二),Android自定义控件之自定义组合
在Android开发中,往往要用到自定义的控件来实现我们的需求或效果。在使用自定义控件时,难免要用到自定义属性,那怎么使用自定义属性呢?在文件res/value
本文讲述绘制Android自定义各种图形效果,为自定义控件的入门篇相关视频链接:Android自定义控件系列http://edu.csdn.net/course
Android自定义布局竖向的ViewPager的实现效果图:这个自定义控件涉及到的知识点:自定义ViewGroup中onMeasure和onLayout的写法