带图标的TextView—ImageTextView

立即下载用AI写一个

发布时间：2019-12-13

2人 | 浏览：2141次 | 收藏 |

技术：android7.0+jdk1.8

运行环境：androidstudio

概述

在开发过程中，我们偶尔会遇到需要在一个TextView的旁边显示一个icon的界面效果。那么今天就跟大家介绍一款封装的带图标的TextView—ImageTextView。

详细

###前言
在开发过程中，我们偶尔会遇到需要在一个TextView的旁边显示一个icon的界面效果。
那么今天就跟大家介绍一款封装的带图标的TextView—ImageTextView。
下面就来讲讲它的知识吧。

今天涉及到的内容：
1. ImageTextView特性
2. ImageTextView的使用
3. 效果图和项目结构图

先来波效果图
![](/contentImages/image/20191213/dpF6MG1Mbo6IAuRU1Ud.gif)

####一.ImageTextView特性
ImageTextView是一个可以在旁边设置icon的TextView，其支持以下功能：
- 在ImageTextView左侧设置icon
- 在ImageTextView上侧设置icon
- 在ImageTextView右侧设置icon
- 在ImageTextView下侧设置icon

####二.ImageTextView的使用
#####2.1 布局中声明自定义属性
在将ImageTextView引入布局的时候，在布局头部添加自定义属性声明：
```
xmlns:ImageTextView="http://schemas.android.com/apk/res-auto"
```
类似下面这样：
```
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ImageTextView="http://schemas.android.com/apk/res-auto"
    //其他代码省略
    //...... 
   >

//其他代码省略
    //......
 
</androidx.constraintlayout.widget.ConstraintLayout>
```
#####2.2 布局中引入控件
在布局中引用ImageTextView，你可以像下面这样(注意：ImageTextView路径以实际为准)：
```
    <com.example.function.ImageTextView
        android:id="@+id/imv_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="带图片的TextView"
        android:textColor="#0000ff"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tv"
        ImageTextView:drawable="@drawable/activate_card2"
        ImageTextView:drawableWidth="20dp"
        ImageTextView:drawableHeight="20dp"
        ImageTextView:position="1"/>
```
这里需要解释几个属性：
-  ImageTextView:drawable：给 ImageTextView设置要显示的资源drawable
-  ImageTextView:drawableWidth：图标宽度
-  ImageTextView:drawableHeight：图标高度
-  ImageTextView:position：图标显示的位置:

```
position="1"  图标显示在TextView 左侧
position="2"  图标显示在TextView 上侧
position="3"  图标显示在TextView 右侧
position="4"  图标显示在TextView 下侧
```
要设置图标和文字间距的话，可以用属性：
```
android:drawablePadding="5dp"
```
#####2.3 控件在mainActivity中使用
在MainActivity中使用如下：
```
//声明
private ImageTextView mImageTextView;

//初始化
mImageTextView = findViewById(R.id.imv_tv);
```
ImageTextView不仅能在xml中通过自定义属性来设置drawable和drawable的位置，也可以在代码中设置，具体如下：
```
//设置左边显示图片
mImageTextView.setDrawableLeft(R.drawable.activate_card2,MainActivity.this);
//设置上边显示图片
mImageTextView.setDrawableTOP(R.drawable.activate_card2,MainActivity.this);
//设置右边显示图片
mImageTextView.setDrawableRight(R.drawable.activate_card2,MainActivity.this);
//设置下边显示图片
mImageTextView.setDrawableBottom(R.drawable.activate_card2,MainActivity.this);
```
####三.效果图和项目结构图
效果图
![](/contentImages/image/20191213/dpF6MG1Mbo6IAuRU1Ud.gif)

项目结构图
![](/contentImages/image/20191213/sXDfb0JreEJpM9etXcM.png)
欢迎大家下载demo,相互学习交流。

本实例支付的费用只是购买源码的费用，如有疑问欢迎在文末留言交流，如需作者在线代码指导、定制等，在作者开启付费服务后，可以点击“购买服务”进行实时联系，请知悉，谢谢

感谢

手机上随时阅读、收藏该文章？请扫下方二维码

带图标的TextView—ImageTextView

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子