自定义一个图片加文字button，点击有效果

最新推荐文章于 2022-08-04 10:41:19 发布
最新推荐文章于 2022-08-04 10:41:19 发布
阅读量1.2k 收藏
点赞数
分类专栏： android 文章标签： 自定义button 图片加文字

第一步 自定义属性  
在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, 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"
<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代码实现

setIconStyle(ButtonExtendM.STYLE_ICON_UP)

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

码海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现 图片+文字 一起居中显示的 Button
Gong_zhuo的博客
03-29 3510
标签： ``` android:drawableLeft， android:drawableRight， android:drawableTop， android:drawableBottom； ``` 但是如果使用上述标签，就会发现图标会贴着 Button 边缘，无法和文字一起居中。
按钮文字点击效果
06-13
自定义按钮的文字随点击状态变化颜色。也可以应用于其他有文字的控件，皆可随点击状态变换颜色
在Button上、下、左、右位置添加图片和文字
hailushijie的专栏
07-08 6572
很多人有如标题所述的需求，而且大多数人采用了自定义组件解决了需求，其实还可以有更“懒”的方法。 关键代码就是布局文件中的android:drawableBottom，drawableBottom这个属性（attr）属于TextView解析的范畴，我们使用的Button，它继承自TextView，因而能够使用此属性完成Drawable的布局。
自定义图片按钮
牧童
06-07 291
[code="js"] /** * 定义图片按钮 * * @param {} * cfg */ Ext.ux.ImageButton = function(cfg) { Ext.ux.ImageButton.superclass.constructor.call(this, cfg); }; Ext.extend(Ext.ux.Imag...
Button里面既能加载图片又能加载文字
lovePaul77的博客
03-07 950
Button android:id="@+id/bt_collect" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight
400个DreamWeaver插件
03-28
mxp/在Dreamweaver中快速的插入一个Fireworks做好的图片，不过好象只能做空白图 ：（ mxp/这个插件用来代替Dreamweaver File菜单下的New Form Template命令。作用是可以侦测出站点内的模板，这样就直接打开了，而不...
苹果8XPC和手机二合一完整版
02-03
每个模版都可定义不同的样式，所以系统内置的功能的相关文件也都放在了模版里，每个模版里存储一份，避免替换系统目录下的其他文件。 ads/ 存放广告js文件，可自定义名称， 在当前模版路径的config.xml 里配置好 ...
ExtAspNet v2.2.1 （2009-4-1） 值得一看
04-01
-Button控件将不再自动拥有display:inline属性，如果希望两个按钮在一行显示，请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...
Android仿微信语音消息的录制和播放功能
01-21
长按Button时改变Button显示文字，弹出Dialog（动态更新音量），动态生成录音文件，开始录音； 监听手指动作，规定区域。录音状态下手指划出规定区域取消录音，删除生成的录音文件； 监听手指动作。当手指抬起时，...
职称计算机考试Dreamweaver操作技巧汇总.pdf
10-12
在布局视图中，可以看到单元格的列宽，在列宽数字的旁边还有一个小小的下拉式箭头，点击要设定弹性显示的列上方的小箭头，接着选择“将列设为弹性显示”（Make Column Autostretch）。这样，页面就变成了一个具有...
非常精美的几千个LabVIEW按钮图标
11-06
LabVIEW按钮图标 几千个蓝色的图标 亲测labview8.6及2015可用。
Labview按钮自定义控件素材（png图片）
04-15
Labview按钮自定义控件素材，可以让按钮变得更加的漂亮。
react-React水印组件支持图片水印文字水印
08-15
React水印组件，支持图片水印，文字水印。
自定义UIButton--iPhone按钮控件点击效果写法
小流星子学习博客
12-27 1852
当我们自定义了一个UIButton时，如果采用重绘的方式，将drawRect事件重写了，原有自带的点击的效果就没有了，这时，我们也要自己来重新写的。 例如下面效果的按钮 - (id) initWithFrame:(CGRect)frame { if ((self = [super initWithFrame:frame])) { [self addObserver:self for
el-table的暂无数据怎么变成图片加文字按钮？
weixin_42220130的博客
08-04 734
el-table的暂无数据怎么变成图片加文字按钮？这两种方写empty法都行，选你喜欢的。我加了图片文字还有按钮,看效果。
Android 自定义按钮button 加图片和两行文字
su_1998的博客
12-14 3885
Android 自定义按钮button 加图片和两行文字 先上效果图 首先在drawable里建四个文件 1.button.xml <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!--点击背景--> <item android:state_pressed="true">
按钮有图片怎么添加文字css,在CSS中怎么给按钮添加背景图片（详解及实例）
weixin_39893893的博客
08-03 1029
这里文章可以按钮添加好看的图片，让你可以轻而易举地让页面的风格千变万化。可以用渐变背景；button的background就可以给按钮换颜色；可以利用overflow: hidden然后去掉遮罩的。这里用top、left、right、bottom来调整高度和宽度来遮住按钮，加上上面说的渐变和透明。我们将遮罩分为上下两个部分，上面的用渐变背景，下面的只要用纯色就可以了(其实用一个遮罩也可以实现，但是...
css按钮添加文字,【CSS练习】纯 CSS 创作一个按钮文字滑动特效
weixin_33895396的博客
08-03 764
image.png【知识点】allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.使用 data-* 属性来嵌入自定义数据，是 HTML5 中的新属性。存储的(自定义)数据能够被页面的 JavaScript 中利用，以创建更好的用户体验(不进行 Aja...
关于做一个自定义的button，图片和文字在一起的
zyjjjay的博客
12-03 975
// //  ChoiceBtn.h //  Guitar // //  Created by tt1 on 15/11/29. //  Copyright © 2015年 Ji Miao. All rights reserved. // #import @interface ChoiceBtn : UIButton @end //
uniapp 点击出来一个图片加文字 同时背景变暗
最新发布
05-24
您可以使用uni-app提供的uni-popup组件来实现此效果。 首先，需要在页面中引入uni-popup组件： ```html <!-- 点击触发弹窗的按钮 --> <button @click="showPopup">打开弹窗</button> <!-- 弹窗 --> v-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值