Android定制控件：带图标的TextView和可编辑文本框（附项目源码）

最新推荐文章于 2024-12-30 00:07:42 发布

原创最新推荐文章于 2024-12-30 00:07:42 发布 · 4.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#控件 #textview #android #移动开发 #实例

Android 专栏收录该内容

1 篇文章

订阅专栏

这篇博客介绍了作者在学习移动开发时，根据课堂所学，实现了一个自定义控件——带图标的TextView以及一个带图标的可编辑文本框。博主分享了项目的实现过程，并提醒读者注意自定义控件时的命名空间和R类导入，以确保正确创建。项目源码一并提供，旨在帮助初学者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

各位朋友，博主向大家问好啦！

初次见面，多多关照。

博主正在学习移动开发，今天老师教授的是定制控件：带图标的TextView，

然后课后依葫芦画瓢，博主定制了一个带图标的可编辑文本框，其实原理都一样！

博主觉得该课题具有可鉴意义，特此分享给大家，帮助入门级开发人员，大虾别见笑。

注意：以下项目在创建时没有勾选activity，是一个空白项目

好啦，先来张效果图演示吧：

项目结构图：

一、在src目录下创建一个类，用来编写控件代码（博主的是IconTextView.java）

<span style="font-size:14px;color:#006600;">package com.demo.widgets;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.TextView;


public class IconTextView extends TextView {
	//声明命名空间的值
	private final String namespace="http://widgets.demo.com";
	//保存图片资源ID的变量
	private int resourceId=0;
	//声明图片对象变量
	private Bitmap bitmap;
	//编写控制构造方法
	public IconTextView(Context context,AttributeSet attrs){
		//由于该空间类是从TextView继承，其构造过程应先构建父类，然后才是本身
		super(context,attrs);
		//使用AttributeResourceValue获得布局文件中控件属性的值
		//该方法有3个参数：
		//第一个参数表示命名空间
		//第二个参数表示属性名
		//第三个参数表示默认值，若在布局文件中不能得到该属性的值则返回该值
		resourceId=attrs.getAttributeResourceValue(namespace, "iconSrc",0);
		if(resourceId>0){
			//若成功获得图像资源ID则装载图像并实例化Bitmap对象
			bitmap=BitmapFactory.decodeResource(getResources(), resourceId);			
		}
	}
	//重载onDraw方法
	@Override
	protected void onDraw(Canvas canvas) {
		// 保证要绘制的内容存在
		if(bitmap!=null){
			//从原图截取图像区域，本例使用的全图
			Rect src=new Rect();//放宽区域
			//将图像区域复制到目标区域
			Rect target=new Rect();
			//定义从原图中截取的区域的边界
			src.left=0;
			src.top=0;
			src.right=bitmap.getWidth();
			src.bottom=bitmap.getHeight();
			//获取文本大小
			int textHeight=(int)getTextSize();
			//指定截取的图像绘制到目标区域
			target.left=0;
			target.top=(getMeasuredHeight()-textHeight)/2;
			target.bottom=target.top+textHeight;
			//为了截取的图像不变形，图像大小要重新计算
			target.right=(int)(textHeight*20/(float)20);
			//绘制截图
			canvas.drawBitmap(bitmap,src,target,getPaint());
			//让文本与截图有点间距
			canvas.translate(target.right+2, 0);
		}
		super.onDraw(canvas);
	}
}</span>

二、在当前项目res/layout下新建一个线性布局视图（博主的是icontvxml.xml）

注意命名空间的位置，需要添加一个自己的命名空间，否则无法完成自定义控件

<span style="font-size:14px;color:#006600;"><?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:icoand="http://widgets.demo.com"
    android:background="@drawable/bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <com.demo.widgets.IconTextView 
        icoand:iconSrc="@drawable/ikivilife" 
        android:id="@+id/txt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="轻微生活网"
        android:textSize="48sp"
        android:textColor="@color/aqua"
        />

        <com.demo.widgets.IconEditView 
        icoand:iconSrc="@drawable/etg" 
        android:id="@+id/etxt1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="请输入文字..."
        android:textSize="25sp"
        android:textColor="@color/violet"
        />
    
        <com.demo.widgets.IconTextView 
        icoand:iconSrc="@drawable/eye" 
        android:id="@+id/txturl1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="humicai.cn"
        android:textSize="50sp"
        android:textColor="@color/purple"
        />
</LinearLayout></span>

三、创建一个activity，即创建一个类来继承Activity，用来加载和显示视图效果（博主的是activityIconT）

注意：R类一定到导入正确，必须是当前项目下的R类，否则无法完成自定义控件

<span style="font-size:14px;color:#006600;">package com.demo.widgets;

import com.demo.ch04_icontextview.R;

import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;

public class activityIconT extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//
		LinearLayout ilayout=(LinearLayout) getLayoutInflater().inflate(R.layout.icontvxml, null);
		setContentView(ilayout);
	}

	@Override
	protected void onDestroy() {
		// TODO Auto-generated method stub
		super.onDestroy();
	}

	@Override
	protected void onPause() {
		// TODO Auto-generated method stub
		super.onPause();
	}

	@Override
	protected void onRestart() {
		// TODO Auto-generated method stub
		super.onRestart();
	}

	@Override
	protected void onResume() {
		// TODO Auto-generated method stub
		super.onResume();
	}

	@Override
	protected void onStart() {
		// TODO Auto-generated method stub
		super.onStart();
	}

	@Override
	protected void onStop() {
		// TODO Auto-generated method stub
		super.onStop();
	}

}</span>

最后，在AndroidManifest.xml中，添加启动代码

<span style="font-size:14px;color:#006600;"><?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.demo.ch04_icontextview"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="19" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity android:name="com.demo.widgets.activityIconT" 
            android:label="@string/app_name"
            android:theme="@style/AppTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest></span>

这样便完成了定制控件的项目需求了，另外如果需要设置颜色值得话，需要在res/values下创建一个color.xml用来保存颜色值源以方便视图调用，代码如下：

<span style="font-size:14px;color:#006600;"><?xml version="1.0" encoding="utf-8" ?> 
<resources> 
<color name="white">#FFFFFF</color><!--白色 --> 
<color name="ivory">#FFFFF0</color><!--象牙色 --> 
<color name="lightyellow">#FFFFE0</color><!--亮黄色 --> 
<color name="yellow">#FFFF00</color><!--黄色 --> 
<color name="snow">#FFFAFA</color><!--雪白色 --> 
<color name="floralwhite">#FFFAF0</color><!--花白色 --> 
<color name="lemonchiffon">#FFFACD</color><!--柠檬绸色 --> 
<color name="cornsilk">#FFF8DC</color><!--米绸色 --> 
<color name="seashell">#FFF5EE</color><!--海贝色 --> 
<color name="lavenderblush">#FFF0F5</color><!--淡紫红 --> 
<color name="papayawhip">#FFEFD5</color><!--番木色 --> 
<color name="blanchedalmond">#FFEBCD</color><!--白杏色 --> 
<color name="mistyrose">#FFE4E1</color><!--浅玫瑰色 --> 
<color name="bisque">#FFE4C4</color><!--桔黄色 --> 
<color name="moccasin">#FFE4B5</color><!--鹿皮色 --> 
<color name="navajowhite">#FFDEAD</color><!--纳瓦白 --> 
<color name="peachpuff">#FFDAB9</color><!--桃色 --> 
<color name="gold">#FFD700</color><!--金色 --> 
<color name="pink">#FFC0CB</color><!--粉红色 --> 
<color name="lightpink">#FFB6C1</color><!--亮粉红色 --> 
<color name="orange">#FFA500</color><!--橙色 --> 
<color name="lightsalmon">#FFA07A</color><!--亮肉色 --> 
<color name="darkorange">#FF8C00</color><!--暗桔黄色 --> 
<color name="coral">#FF7F50</color><!--珊瑚色 --> 
<color name="hotpink">#FF69B4</color><!--热粉红色 --> 
<color name="tomato">#FF6347</color><!--西红柿色 --> 
<color name="orangered">#FF4500</color><!--红橙色 --> 
<color name="deeppink">#FF1493</color><!--深粉红色 --> 
<color name="fuchsia">#FF00FF</color><!--紫红色 --> 
<color name="magenta">#FF00FF</color><!--红紫色 --> 
<color name="red">#FF0000</color><!--红色 --> 
<color name="oldlace">#FDF5E6</color><!--老花色 --> 
<color name="lightgoldenrodyellow">#FAFAD2</color><!--亮金黄色 --> 
<color name="linen">#FAF0E6</color><!--亚麻色 --> 
<color name="antiquewhite">#FAEBD7</color><!--古董白 --> 
<color name="salmon">#FA8072</color><!--鲜肉色 --> 
<color name="ghostwhite">#F8F8FF</color><!--幽灵白 --> 
<color name="mintcream">#F5FFFA</color><!--薄荷色 --> 
<color name="whitesmoke">#F5F5F5</color><!--烟白色 --> 
<color name="beige">#F5F5DC</color><!--米色 --> 
<color name="wheat">#F5DEB3</color><!--浅黄色 --> 
<color name="sandybrown">#F4A460</color><!--沙褐色 --> 
<color name="azure">#F0FFFF</color><!--天蓝色 --> 
<color name="honeydew">#F0FFF0</color><!--蜜色 --> 
<color name="aliceblue">#F0F8FF</color><!--艾利斯兰 --> 
<color name="khaki">#F0E68C</color><!--黄褐色 --> 
<color name="lightcoral">#F08080</color><!--亮珊瑚色 --> 
<color name="palegoldenrod">#EEE8AA</color><!--苍麒麟色 --> 
<color name="violet">#EE82EE</color><!--紫罗兰色 --> 
<color name="darksalmon">#E9967A</color><!--暗肉色 --> 
<color name="lavender">#E6E6FA</color><!--淡紫色 --> 
<color name="lightcyan">#E0FFFF</color><!--亮青色 --> 
<color name="burlywood">#DEB887</color><!--实木色 --> 
<color name="plum">#DDA0DD</color><!--洋李色 --> 
<color name="gainsboro">#DCDCDC</color><!--淡灰色 --> 
<color name="crimson">#DC143C</color><!--暗深红色 --> 
<color name="palevioletred">#DB7093</color><!--苍紫罗兰色 --> 
<color name="goldenrod">#DAA520</color><!--金麒麟色 --> 
<color name="orchid">#DA70D6</color><!--淡紫色 --> 
<color name="thistle">#D8BFD8</color><!--蓟色 --> 
<color name="lightgray">#D3D3D3</color><!--亮灰色 --> 
<color name="lightgrey">#D3D3D3</color><!--亮灰色 --> 
<color name="tan">#D2B48C</color><!--茶色 --> 
<color name="chocolate">#D2691E</color><!--巧可力色 --> 
<color name="peru">#CD853F</color><!--秘鲁色 --> 
<color name="indianred">#CD5C5C</color><!--印第安红 --> 
<color name="mediumvioletred">#C71585</color><!--中紫罗兰色 --> 
<color name="silver">#C0C0C0</color><!--银色 --> 
<color name="darkkhaki">#BDB76B</color><!--暗黄褐色 --> 
<color name="rosybrown">#BC8F8F</color><!--褐玫瑰红 --> 
<color name="mediumorchid">#BA55D3</color><!--中粉紫色 --> 
<color name="darkgoldenrod">#B8860B</color><!--暗金黄色 --> 
<color name="firebrick">#B22222</color><!--火砖色 --> 
<color name="powderblue">#B0E0E6</color><!--粉蓝色 --> 
<color name="lightsteelblue">#B0C4DE</color><!--亮钢兰色 --> 
<color name="paleturquoise">#AFEEEE</color><!--苍宝石绿 --> 
<color name="greenyellow">#ADFF2F</color><!--黄绿色 --> 
<color name="lightblue">#ADD8E6</color><!--亮蓝色 --> 
<color name="darkgray">#A9A9A9</color><!--暗灰色 --> 
<color name="darkgrey">#A9A9A9</color><!--暗灰色 --> 
<color name="brown">#A52A2A</color><!--褐色 --> 
<color name="sienna">#A0522D</color><!--赭色 --> 
<color name="darkorchid">#9932CC</color><!--暗紫色 --> 
<color name="palegreen">#98FB98</color><!--苍绿色 --> 
<color name="darkviolet">#9400D3</color><!--暗紫罗兰色 --> 
<color name="mediumpurple">#9370DB</color><!--中紫色 --> 
<color name="lightgreen">#90EE90</color><!--亮绿色 --> 
<color name="darkseagreen">#8FBC8F</color><!--暗海兰色 --> 
<color name="saddlebrown">#8B4513</color><!--重褐色 --> 
<color name="darkmagenta">#8B008B</color><!--暗洋红 --> 
<color name="darkred">#8B0000</color><!--暗红色 --> 
<color name="blueviolet">#8A2BE2</color><!--紫罗兰蓝色 --> 
<color name="lightskyblue">#87CEFA</color><!--亮天蓝色 --> 
<color name="skyblue">#87CEEB</color><!--天蓝色 --> 
<color name="gray">#808080</color><!--灰色 --> 
<color name="grey">#808080</color><!--灰色 --> 
<color name="olive">#808000</color><!--橄榄色 --> 
<color name="purple">#800080</color><!--紫色 --> 
<color name="maroon">#800000</color><!--粟色 --> 
<color name="aquamarine">#7FFFD4</color><!--碧绿色 --> 
<color name="chartreuse">#7FFF00</color><!--黄绿色 --> 
<color name="lawngreen">#7CFC00</color><!--草绿色 --> 
<color name="mediumslateblue">#7B68EE</color><!--中暗蓝色 --> 
<color name="lightslategray">#778899</color><!--亮蓝灰 --> 
<color name="lightslategrey">#778899</color><!--亮蓝灰 --> 
<color name="slategray">#708090</color><!--灰石色 --> 
<color name="slategrey">#708090</color><!--灰石色 --> 
<color name="olivedrab">#6B8E23</color><!--深绿褐色 --> 
<color name="slateblue">#6A5ACD</color><!--石蓝色 --> 
<color name="dimgray">#696969</color><!--暗灰色 --> 
<color name="dimgrey">#696969</color><!--暗灰色 --> 
<color name="mediumaquamarine">#66CDAA</color><!--中绿色 --> 
<color name="cornflowerblue">#6495ED</color><!--菊兰色 --> 
<color name="cadetblue">#5F9EA0</color><!--军兰色 --> 
<color name="darkolivegreen">#556B2F</color><!--暗橄榄绿 --> 
<color name="indigo">#4B0082</color><!--靛青色 --> 
<color name="mediumturquoise">#48D1CC</color><!--中绿宝石 --> 
<color name="darkslateblue">#483D8B</color><!--暗灰蓝色 --> 
<color name="steelblue">#4682B4</color><!--钢兰色 --> 
<color name="royalblue">#4169E1</color><!--皇家蓝 --> 
<color name="turquoise">#40E0D0</color><!--青绿色 --> 
<color name="mediumseagreen">#3CB371</color><!--中海蓝 --> 
<color name="limegreen">#32CD32</color><!--橙绿色 --> 
<color name="darkslategray">#2F4F4F</color><!--暗瓦灰色 --> 
<color name="darkslategrey">#2F4F4F</color><!--暗瓦灰色 --> 
<color name="seagreen">#2E8B57</color><!--海绿色 --> 
<color name="forestgreen">#228B22</color><!--森林绿 --> 
<color name="lightseagreen">#20B2AA</color><!--亮海蓝色 --> 
<color name="dodgerblue">#1E90FF</color><!--闪兰色 --> 
<color name="midnightblue">#191970</color><!--中灰兰色 --> 
<color name="aqua">#00FFFF</color><!--浅绿色 --> 
<color name="cyan">#00FFFF</color><!--青色 --> 
<color name="springgreen">#00FF7F</color><!--春绿色 --> 
<color name="lime">#00FF00</color><!--酸橙色 --> 
<color name="mediumspringgreen">#00FA9A</color><!--中春绿色 --> 
<color name="darkturquoise">#00CED1</color><!--暗宝石绿 --> 
<color name="deepskyblue">#00BFFF</color><!--深天蓝色 --> 
<color name="darkcyan">#008B8B</color><!--暗青色 --> 
<color name="teal">#008080</color><!--水鸭色 --> 
<color name="green">#008000</color><!--绿色 --> 
<color name="darkgreen">#006400</color><!--暗绿色 --> 
<color name="blue">#0000FF</color><!--蓝色 --> 
<color name="mediumblue">#0000CD</color><!--中兰色 --> 
<color name="darkblue">#00008B</color><!--暗蓝色 --> 
<color name="navy">#000080</color><!--海军色 --> 
<color name="black">#000000</color><!--黑色 --> 
</resources></span>

项目源码下载：点击打开链接