完美实现Android自定义控件---以自定义带图片和文本的Button为例

最新推荐文章于 2022-05-12 21:58:06 发布
最新推荐文章于 2022-05-12 21:58:06 发布
阅读量1.5w 收藏 11
点赞数
分类专栏： Android开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sasoritattoo/article/details/8614410
版权
本文详细介绍了如何实现一个自定义的Android控件，该控件结合了图片和文本，类似于系统Button。步骤包括定义布局、创建对应类、在布局中使用以及代码设置。最终达到的效果是，点击控件任一区域都会触发onClick()方法，同时内部组件状态可变。文章还提供了参考链接和对CSDN编辑器的评价。
摘要由CSDN通过智能技术生成

像系统自带控件的一样，做一个真正的控件。

第一步：定义一个有图片和文本的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="horizontal" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    > 
<ImageView 
    android:id="@+id/widget_image_text_btn_Img" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    /> 
<TextView 
    android:id="@+id/widget_image_text_btn_TV" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:textColor="#000000" 
    android:layout_marginLeft="8dip" 
    android:layout_gravity="center_vertical" 
    /> 
</LinearLayout>


第二步：定义一个与这个布局对应的类：

package com.widget;

import com.example.testdrawable.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.KeyEvent;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;

public class ImgTextBtnH extends LinearLayout {

	private static final String TAG = ImgTextBtnH.class.getSimpleName();
	
	private ImageView mImg; 
    private TextView  mTV; 
    private Button mBtn;
    private Context mContext = null;
 
    public ImgTextBtnH(Context context) { 
        this(context, null); 
        mContext = context;
    } 
 
    protected void inflaterLayout(Context context) {
        // 导入布局 
        LayoutInflater.from(context).inflate(R.layout.widget_image_text_btn_horizontal_layout, this, true); 
    }
    
    
    @SuppressLint("NewApi")
	public ImgTextBtnH(Context context, AttributeSet attrs) { 
        super(context, attrs); 
        mContext = context;
        
        Resources.Theme theme = context.getTheme();
        
        inflaterLayout(context);
        // 导入布局 
//        LayoutInflater.from(context).inflate(R.layout.widget_image_text_btn_layout, this, true); 
        mImg = (ImageView) findViewById(R.id.widget_image_text_btn_Img); 
        mTV = (TextView) findViewById(R.id.widget_image_text_btn_TV); 
        mBtn = (Button) findViewById(R.id.widget_image_text_btn_Btn);
        
        //不能够使用ImageView的click方法， 在android里点击事件消息是从内向外传递的，设置了false之后才能传递出来给LinearLayout
        mImg.setClickable(false); //谢谢 Brightshadow11111 朋友的提醒
        
        TypedArray typeArray = context.obtainStyledAttributes(attrs,
                R.styleable.ImgTextBtn);
        if (typeArray == null) {
        	return;
        }
        
        int count = typeArray.getIndexCount();
        int resId = 0;
        for (int i = 0; i < count; i++) {
        	int attr = typeArray.getIndex(i);
        	switch(attr) {
        	case R.styleable.ImgTextBtn_ImgDraw:
        		Drawable background = typeArray.getDrawable(attr);
        		int sdk = android.os.Build.VERSION.SDK_INT;
        		if(sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) {
        		    mImg.setBackgroundDrawable(background);
        		} else {
        			mImg.setBackground(background);
        		}
        		break;
        	case R.styleable.ImgTextBtn_ImgDrawWidth:
        		int imageWidth = typeArray.getDimensionPixelSize(attr, -1);
        		mImg.setMaxWidth(imageWidth);
        		mImg.setMinimumWidth(imageWidth);
        		break;
        	case R.styleable.ImgTextBtn_ImgDrawHeight:
        		int imageHeight = typeArray.getDimensionPixelSize(attr, -1);
        		mImg.setMaxHeight(imageHeight);
        		mImg.setMinimumHeight(imageHeight);
        		break;
        	case R.styleable.ImgTextBtn_ImgDrawMinWidth:
        		int imageMinWidth = typeArray.getDimensionPixelSize(attr, -1);
        		mImg.setMinimumHeight(imageMinWidth);
        		break;
        	case R.styleable.ImgTextBtn_ImgDrawMinHeight:
        		int imageMinHeight = typeArray.getDimensionPixelSize(attr, -1);
        		mImg.setMinimumHeight(imageMinHeight);
        		break;
        	case R.styleable.ImgTextBtn_ImgDrawMaxHeight:
        		int imageMaxHeight = typeArray.getDimensionPixelSize(attr, -1);
        		mImg.setMaxHeight(imageMaxHeight);
        		break;
        	case R.styleable.ImgTextBtn_ImgDrawMaxWidth:
        		int imageMaxWidth = typeArray.getDimensionPixelSize(attr, -1);
        		mImg.setMaxWidth(imageMaxWidth);
        		break;
        	case R.styleable.ImgTextBtn_TVText:
        		mTV.setText(typeArray.getText(attr));
        		break;
        	case R.styleable.ImgTextBtn_TVTextSize:
        		mTV.setTextSize(typeArray.getDimensionPixelSize(attr, 15));
        		break;
        	}
        }
        typeArray.recycle();
    } 
    
    @Override
    public void refreshDrawableState() {
    	// TODO Auto-generated method stub
    	super.refreshDrawableState();
        //------------接下来处理联动效果，关键代码，请认真看-------------------
        //------------ ImageView控件的联动刷新 -------------------
    	Drawable imgDrawable = mImg.getBackground(); //获取drawable资源
    	Log.d(TAG, "drawable = " + imgDrawable);
    	if (imgDrawable != null && imgDrawable.isStateful()) {
            //关键中的关键，根据当前状态设置drawable的状态，本来应该是LinearLayout的getDrawableState()状态，
            //但是现在是实现联动效果，而且获取的ImageView的getDrawState()结果不对。
    		imgDrawable.setState(this.getDrawableState()); 
    	}
    	
    	//------------- TextView的联动刷新， 抱歉， 无法刷新 ------------------
        //这块代码很快写出来了，但是写出来后发现，颜色总是停留在最后一次的颜色上，后面再点击都无法改变颜色了，
        //才恍然大悟，mTV.setTextColor()是设置TextView内部的ColorStateList对象的，这样会清掉原先的
        //res/color/colorSelector.xml里的设置，导致只有一种颜色值。应该赋值给TextView内部的private int mCurTextColor;
        //可惜没有并设置mCurTextColor值的接口，不知到使用反射能否做到，有兴趣朋友可以一试。
        //既然Text的color是靠TextPaint刷出来的，那么是否可以改变TextPaint的颜色值呢？发现有接口getPaint可以获取到TextPaint，
        //但是设置了color值之后，还是不行，哦，原来在onDraw()函数中，重新设置了颜色值，所以白设了。
        //总而言之，联动刷新颜色是不行滴，只能设一个颜色（对于我目前来讲功能已经是足够了） 哈哈，讲的够详细吧～～
    	ColorStateList mTextColor = mTV.getTextColors();
    	
    	int color = mTextColor.getColorForState(this.getDrawableState(), 0);
        if (mTV.getCurrentTextColor() != color) {
        	mTV.getPaint().setColor(color);
//        	mTV.setTextColor(color);
        	mTV.invalidate();
        }
        
        //-----------如果有个Button的话就可以在这里设置改变，效果同上，略---------------
//        Drawable btnDrawable = mBtn.getBackground();
//    	Log.d(TAG, "drawable = " + btnDrawable);
//    	if (btnDrawable != null && btnDrawable.isStateful()) {
//    		btnDrawable.setState(this.getDrawableState());
//    	}
//    	
//    	ColorStateList mTextColor2 = mBtn.getTextColors();
//    	int color2 = mTextColor2.getColorForState(this.getDrawableState(), 0);
//        if (mBtn.getCurrentTextColor() != color2) {
//        	mBtn.setTextColor(color2);
//        }
 
    }

    /**
     * 设置图片资源
     */ 
    public void setImgViewResource(int resId) { 
        mImg.setImageResource(resId); 
    } 
    
    /**
     * 设置图片
     */ 
    public void setImgViewResource(Bitmap bitmap) { 
        mImg.setImageBitmap(bitmap); 
    } 
 
    /**
     * 设置显示的文字
     */ 
    public void setTextViewText(int resId) { 
        mTV.setText(resId); 
    } 
    /**
     * 设置显示的文字
     */ 
    public void setTextViewText(String text) { 
        mTV.setText(text); 
    } 
 
}

第三步：

在value/下面定义一个attrs.xml文件，内容如下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="ImgTextBtn">
        <attr name="ImgDraw" format="reference"></attr>
        <attr name="ImgDrawWidth" format="dimension"></attr>
        <attr name="ImgDrawHeight" format="dimension"></attr>
        <attr name="ImgDrawMinWidth" format="dimension"></attr>
        <attr name="ImgDrawMinHeight" format="dimension"></attr>
        <attr name="ImgDrawMaxWidth" format="dimension"></attr>
        <attr name="ImgDrawMaxHeight" format="dimension"></attr>
        
        <attr name="TVText" format="reference|string"></attr>
        <attr name="TVTextSize" format="dimension"></attr>
        <attr name="TVTextColor" format="reference|color"></attr>
    </declare-styleable>
    
</resources>

第四步：

直接在布局中使用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:CustomAttrs="http://schemas.android.com/apk/res/com.example.testdrawable"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.widget.ImgTextBtn
        android:id="@+id/imageTextButton1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_above="@+id/textView1"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="35dp"
        android:background="@drawable/preference_round_rect_light_blue"
        CustomAttrs:TVText="@string/hello_world"
        CustomAttrs:TVTextSize="@dimen/dimens_Padding_normal"
        CustomAttrs:ImgDraw="@drawable/test_btn_selector">
    </com.widget.ImgTextBtn>

</RelativeLayout>


第五步：

代码中设置：

ImgTextBtn mBtn = (ImgTextBtn) findViewById(R.id.imageTextButton1);
		mbtn.setOnClickListener(new View.OnClickListener() {
			
			@Override
			public void onClick(View v) {
				// TODO Auto-generated method stub
				Toast.makeText(MainActivity.this, "OK OK OK", Toast.LENGTH_LONG).show();
			}
		});


运行效果如下：



最低0.47元/天 解锁文章
跟随内心
关注
专栏目录
android自定义"图片+文字"控件四种实现方法,UIButton图片文字位置的四种情况
weixin_42178963的博客
07-04 1155
我们在做项目的过程中经常会遇到各定制UIButton1.左边图片,右边文字2.左边文字,右边图片3.上边图片,下边文字4.上边文字,下边图片针对这四种情况使用UIButton的category实现.h文件实现内容#import typedef NS_ENUM(NSInteger,SDButtonStyle) {SDButtonStyleNormal = 0,SDButtonStyleTitleLe...
Android图片文字按钮
编程资料大全
07-30 164
今天在整理资料的时候发现有个问题，原来做的些软件中用到的按钮，要么是纯文字的，要么是纯图片的 突然看有款软件上的按钮文字可以同时显示， &lt;!--StartFragment --&gt; 而且我用hierarchyviewer查看了下 他确确实实是图片加文字的，所以问了下群友并且思考了下，总有以下解决方法 1.直接用图片和文字的截图放在Imagebutton上显示，这种事最简单但...
Android带文字的ImageButton实现
既是过河之卒，惟有奋力向前。
06-07 185
实际上，ImageButton是不能添加文字的，所以我选择将ImageView控件和TextView控件封装在一个LinearLayout里面，整个LinearLayout就是一个按钮，然后对它监听单击等动作。 首先贴上layout.xml里面的布局设计： view sourceprint? 01 &lt;LinearLayou...
Android自定义图文并茂的Button
JavaTiger
08-26 3057
<br />    anroid内置了Button和ImageButton，但是没有提供既能显示图片又能显示文字的button。这里我自定义了一个ImageTextButton，,其中了XML文件中使用了自定义属性custom:icon="@drawable/icon" 。<br
Android 按钮 Button和ImageButton
weixin_34218579的博客
04-16 95
Button -- 按钮ImageButton -- 图片按钮Button和ImageButton特征1.共有的特征都可以作为一个按钮产生点击事件2.不同点： (1)Button有text属性，ImageButton没有 (2)ImageButton有src属性，Button没有3.产生明显的点击效果 实现Button和ImageButton的效果注：我们一般不把android:text的信息直...
Android自定义控件---“取消”视图
04-22
在Android开发中，自定义控件是提升应用用户体验和界面个性化的重要手段。本文将深入探讨如何在Android中创建一个自定义的...通过这样的实践，开发者可以更好地掌握Android自定义控件的开发技巧，提升应用的交互体验。
自定义控件--自定义Button和EditText
02-10
在Android开发中，自定义控件是提升应用独特性和用户体验的重要手段。本教程将深入讲解如何自定义Button和EditText这两个常见的UI元素，帮助开发者更好地理解自定义控件的原理和实践。 首先，自定义Button控件通常...
Android自定义Button并设置不同背景图片的方法
09-02
这个过程涉及到Android自定义控件的基本原理和布局管理。 首先，创建一个自定义的Button类。这里我们命名为`MyButton`，它继承自Android的`Button`类。通过继承，我们可以保留Button原有的所有功能，并在此基础上...
Android编程实现自定义控件的方法示例
08-30
本示例中，我们创建了一个名为`ImageBtn`的自定义控件，它继承自`LinearLayout`，并且在内部组合了一个`ImageView`和一个`TextView`，形成一个具有图片和文本的按钮。 在`ImageBtn`类的构造函数中，我们使用`...
android Emoji表情，通过自定义textview能够实现表情包在输入框中展示
06-12
在项目中使用Emoji表情，通过自定义textview能够实现表情包在输入框中展示
自定义图片、文字组合控件
IT小蔡的博客
07-06 545
效果 package yu.cai.myview.widget; import android.content.Context
android中的按钮，图形按钮，带文字的图片按钮
weixin_30871293的博客
05-17 113
先来看看效果图吧： 效果就是这么简单，其中第一行的2个算是默认的吧，第二行的2个按钮当鼠标点击的时候图片发送变化。 其中main.xml大致代码如下： <?xml version="1.0" encoding="utf-8"?> <TableLayout xmlns:android="http://schemas.android.com/apk/res/andro...
android button 图片与文字一起
08-15 2006
在android 开发中，使用button控件，当需要图片与文字一起出现，很容易想到imagebutton与文字出现，但 是imagebutton并不支持文字。         其实button控件中有属性可以设置图片：         android:drawableLeft         如下图效果：
android之实现带图片和文本的Button
taoshengyijiuzt的专栏
12-05 3865
我在仿sina微博的时候，发现有个朋友圈那个按钮是既有文本又有图标的，上网找了一下，总结如下： 一.用系统自带的Button实现 　　最简单的一种办法就是利用系统自带的Button来实现，这种方式代码量最小。在Button的属性中有一个是drawableLeft，这个属性可以把图片设置在文字的左边，但是这种方 式必须让icon的背景色是透明的，如果icon的背景色不是透明的话，会导致点击按钮
图片按钮 imagebutton
weixin_44701192的博客
05-12 242
xml 文件 <?xml version="1.0" encoding="utf-8"?> <!-- 普通图片按钮 --> <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/mia5" /> <!-- 按下时显示不同图片的按钮 --> <ImageButton
android ImageButton和Button区别
hangdianyizhihua的专栏
05-20 431
Imagebutton继承Imageview，就是用一个图标代表了一些文字，它没有android:text属性，换句说它由android:src代替android:text; Button继承Textview,所以Textview的一些属性也适用于Button控件，Button把图片当作背景与放在ImageButton/ImageView中的效果是不一样的。
Android入门教程二十五之Button(按钮)与ImageButton(图像按钮)详解
热门推荐
无名
02-11 1万+
今天给大家介绍的Android基本控件中的两个按钮控件，Button普通按钮和ImageButton图像按钮； 其实ImageButton和Button的用法基本类似，至于与图片相关的则和后面ImageView相同，所以本节 只对Button进行讲解，另外Button是TextView的子类，所以TextView上很多属性也可以应用到Button 上！我们实际开发中对于Button的，无非是对按钮的
android 图文按钮
daxi8814的博客
10-19 145
/** * 设置图文按钮 * @param drawable 图片drawable * @param button 按钮 * @param str 显示文字 */ public static void setImageButton(int drawable, final Button button, Stri...
Android自定义控件：组合布局与带图片文字按钮实例
在Android开发中，自定义控件是提升应用用户体验和灵活性的重要手段。本文将详细介绍如何通过组合控件来创建一个具有图片和文字的自定义按钮。首先，理解为何自定义控件在特定情况下可能无法满足需求：虽然Android...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值