Android自定义实现图片加文字功能

Android自定义实现图片加文字功能

分四步来写:

1,组合控件的xml;
2,自定义组合控件的属性;
3,自定义继承组合布局的class类,实现带两参数的构造器;
4,在xml中展示组合控件。

具体实现过程:

一、组合控件的xml

我接触的有两种方式,一种是普通的Activity的xml;一种是父节点为merge的xml。我项目中用的是第一种,但个人感觉第二种好,因为第一种多了相对或者绝对布局层。

我写的 custom_pictext.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <ImageView
    android:id="@+id/custom_pic_iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@mipmap/a" />

  <TextView
    android:id="@+id/custom_date_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@id/custom_pic_iv"
    android:layout_marginBottom="5dp"
    android:layout_marginLeft="8dp"
    android:text="2017" />

  <TextView
    android:id="@+id/custom_text_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/custom_pic_iv"
    android:layout_marginLeft="4dp"
    android:layout_marginTop="4dp"
    android:text="题目" />
</RelativeLayout>

这里展示一个merge的例子,有时间,大家可以自己体会下。

<merge xmlns:android="http://schemas.android.com/apk/res/android">

  <Button
    android:id="@+id/title_bar_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:layout_marginLeft="5dp"
    android:background="@null"
    android:minHeight="45dp"
    android:minWidth="45dp"
    android:textSize="14sp" />

  <TextView
    android:id="@+id/title_bar_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:singleLine="true"
    android:textSize="17sp" />

  <Button
    android:id="@+id/title_bar_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:layout_marginRight="7dp"
    android:background="@null"
    android:minHeight="45dp"
    android:minWidth="45dp"
    android:textSize="14sp" />

</merge>

这两个xml,都是写在layout中的。

二、自定义组合控件的属性

这步是我们自定义的重要部分之一,自定义组件的私有特性全显示在这。

首先在values中创建attrs.xml

然后定义属性,如下代码

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
  <declare-styleable name="CustomPicText">
    <attr name="pic_backgroud" format="reference"/>
    <attr name="pic_backgroud_width" format="dimension"/>
    <attr name="pic_backgroud_height" format="dimension"/>
    <attr name="pic_text" format="string"/>
    <attr name="pic_text_color" format="color"/>
    <attr name="pic_text_size" format="integer"/>
    <attr name="pic_date" format="string"/>
    <attr name="pic_date_color" format="color"/>
    <attr name="pic_date_size" format="integer"/>
  </declare-styleable>

</resources>

这里有几点需要注意的,第一:属性名为name,第二:属性单位为fromat。这单位包含的值可以查看这里。

三、自定义继承组合布局的class类,实现带两参数的构造器

我实现的CustomPicText.Java

/**
 * Created by Hman on 2017/5/4.
 * 为了测试自定义组合控件
 */
public class CustomPicText extends RelativeLayout {

  private ImageView customPicIv;
  private TextView customDateTv;
  private TextView customTextTv;

  public CustomPicText(Context context, AttributeSet attrs) {
    super(context, attrs);
    // 加载layout
    View view = LayoutInflater.from(context).inflate(R.layout.custom_pictext,this);
    customPicIv = (ImageView) view.findViewById(R.id.custom_pic_iv);
    customDateTv = (TextView) view.findViewById(R.id.custom_date_tv);
    customTextTv = (TextView) view.findViewById(R.id.custom_text_tv);

    // 加载自定义属性配置
    TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.CustomPicText);
    // 为自定义属性添加特性
    if (typedArray != null) {
      // 为图片添加特性
      int picBackgroud = typedArray.getResourceId(R.styleable.CustomPicText_pic_backgroud, 0);
      float picWidth = typedArray.getDimension(R.styleable.CustomPicText_pic_backgroud_width,25);
      float picHeight = typedArray.getDimension(R.styleable.CustomPicText_pic_backgroud_height,25);
      customPicIv.setBackgroundResource(picBackgroud);
//      customPicIv.setMinimumWidth(picWidth);

      // 为标题设置属性
      String picText = typedArray.getString(R.styleable.CustomPicText_pic_text);
      int picTextColor = typedArray.getColor(R.styleable.CustomPicText_pic_text_color,16);
      int picTextSize = typedArray.getResourceId(R.styleable.CustomPicText_pic_date_size, 16);
      customTextTv.setText(picText);
      customTextTv.setTextColor(picTextColor);
      customTextTv.setTextSize(picTextSize);

      // 为日期设置属性
      String picDate = typedArray.getString(R.styleable.CustomPicText_pic_date);
      int picDateColor = typedArray.getColor(R.styleable.CustomPicText_pic_date_color, 0);
      int picDateSize = typedArray.getResourceId(R.styleable.CustomPicText_pic_date_size, 12);
      customDateTv.setText(picDate);
      customDateTv.setTextColor(picDateColor);
      customDateTv.setTextSize(picDateSize);

      typedArray.recycle();

    }

  }
}

在这里,我们也可以给控件添加一些监听器,大家自己去加上;这里值得注意的是一个加载配置的类TypeArray

4,在xml中展示组合控件

这个随便写到一个xml中去就行

代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  xmlns:hman="http://schemas.android.com/apk/res-auto"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">

  <com.eastsun.widget.CustomPicText
    android:id="@+id/first"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    hman:pic_backgroud="@mipmap/b"
    hman:pic_date="2017/5/6"
    hman:pic_date_color="@color/white"
    hman:pic_text="第一张图片"
    hman:pic_text_color="@color/red"
    hman:pic_text_size="18"></com.eastsun.widget.CustomPicText>

</LinearLayout>

这里有一点别忘记,添加xmlns:hman=”http://schemas.Android.com/apk/res-auto”

总结

程序基本上到这就结束了。

看下效果截图

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-05-02

android图片文件的路径地址与Uri的相互转换方法

一个android文件的Uri地址一般如下: content://media/external/images/media/62026 这是一张图片的Uri,那么我们如何根据这个Uri获得其在文件系统中的路径呢? 其实很简单,直接上代码: public static String getRealFilePath( final Context context, final Uri uri ) { if ( null == uri ) return null; final String scheme

Android常用的图片加载库

前言:图片加载涉及到图片的缓存.图片的处理.图片的显示等.四种常用的图片加载框架,分别是Fresco.ImageLoader. Picasso. Glide. Universal Image Loader:ImageLoader是比较老的框架,一个强大的图片加载库,包含各种各样的配置,最老牌,使用也最广泛. ImageLoader开源库存哪些特征: 1.多线程下载图片,图片可以来源于网络,文件系统,项目文件夹assets中以及drawable中等 2.支持随意的配置ImageLoader,例如线

Android仿微信朋友圈点击加号添加图片功能

本文为大家分享了类似微信朋友圈,点击+号图片,可以加图片功能,供大家参考,具体内容如下 xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto

Android实现异步加载图片

麦洛开通博客以来,有一段时间没有更新博文了.主要是麦洛这段时间因项目开发实在太忙了.今天周六还在公司加班,苦逼程序猿都是这样生活的. 今天在做项目的时候,有一个实现异步加载图片的功能,虽然比较简单但还是记录一下吧.因为麦洛之前实现异步加载图片都是使用了AsynTask这个API,继续这个类,实现起来非常简单也很方便.在doInBackground()方法里实现下载逻辑.具体实现如下 实现逻辑是:先从内存中读取,如果内存中有这张图片,则直接使用;如果内存没有再到sdcard上读取,如果有则显示;如

Android中RecyclerView 滑动时图片加载的优化

RecyclerView 滑动时的优化处理,在滑动时停止加载图片,在滑动停止时开始加载图片,这里用了Glide.pause 和Glide.resume.这里为了避免重复设置增加开销,设置了一个标志变量来做判断. mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrollStateChanged(RecyclerView recyclerView, in

Android 实现获取手机里面的所有图片详解及实例

Android 实现获取手机里面的所有图片详解及实例 实现代码: public class MainActivity extends Activity { //查看图片按钮 private Button look; private Button add; //显示图片名称的list ListView show_list; ArrayList names = null; ArrayList descs= null; ArrayList fileNames = null; @Override pro

Android异步下载图片并且缓存图片到本地DEMO详解

在Android开发中我们经常有这样的需求,从服务器上下载xml或者JSON类型的数据,其中包括一些图片资源,本demo模拟了这个需求,从网络上加载XML资源,其中包括图片,我们要做的解析XML里面的数据,并且把图片缓存到本地一个cache目录里面,并且用一个自定义的Adapter去填充到LIstView,demo运行效果见下图: 通过这个demo,要学会有一下几点 1.怎么解析一个XML 2.demo中用到的缓存图片到本地一个临时目录的思想是怎样的? 3.AsyncTask类的使用,因为要去异

Android异步加载数据和图片的保存思路详解

把从网络获取的图片数据保存在SD卡上, 先把权限都加上 网络权限 android.permission.INTERNET SD卡读写权限 android.permission.MOUNT_UNMOUNT_FILESYSTEMS android.permission.WRITE_EXTERNAL_STORAGE 总体布局 写界面,使用ListView,创建条目的布局文件,水平摆放的ImageView TextView 在activity中获取到ListView对象,调用setAdapter()方法

Android 图片存入系统相册更新显示实例详解

Android 图片存入系统相册更新显示实例详解 在开发android的过程中,我们避免不了可能会涉及到做一个自定义相册或则会去本地创建一个文件夹来存储我们需要的图片.拿相册来说,比如我们创建一个test的文件夹,拍完一张照片后存储到这个指定的test文件夹里,然后在相册里面显示出来,就像微信的效果一样.拍完即可立即显示.但是,在实际开发过程中我们保存完一张图片后并不能立即更新显示出来这个图片,需要我们重启手机才能在系统相册中显示出来. 这里先提供一个插入系统图库的方法: MediaStore.

Android 通过webservice上传多张图片到指定服务器详解

Android 通过webservice上传多张图片到指定服务器详解 当你浏览这个的时候相信你对webservice的基本应用已经有一定的了解了,若是还没有明白的小伙伴,可以看我前面写的文章点击打开链接,这几天在开发一款app,需要上传图片到指定服务器吧,但是我刚开始以为在网上面应该有这样的好文章的吧,结果我在网络上找了好多代码,在传递图片的过程中,遇到各种bug,真是国人的东西就是喜欢复制别人的,自己不动手检验一下代码的正确性,哎,我也是无语了,然后我决定花点时间来填补一下这个空缺,写了这一片

Android屏幕锁屏弹窗的正确姿势DEMO详解

在上篇文章给大家介绍了Android程序开发仿新版QQ锁屏下弹窗功能.今天通过本文给大家分享android锁屏弹窗的正确姿势. 最近在做一个关于屏幕锁屏悬浮窗的功能,于是在网上搜索了很多安卓屏幕锁屏的相关资料,鉴于网上的资料比较零碎,所以我在这里进行整理总结.本文将从以下两点对屏幕锁屏进行解析: 1. 如何监听系统屏幕锁屏 2. 如何在锁屏界面弹出悬浮窗 如何监听系统屏幕锁屏 经过总结,监听系统的锁屏可以通过以下两种方式: 1) 代码直接判定 2) 接收广播 1) 代码直接判定 代码判断方式,也

Android 拍照并对照片进行裁剪和压缩实例详解

Android 拍照并对照片进行裁剪和压缩实例详解 本文主要介绍 Android 调用摄像头拍照并对照片进行裁剪和压缩,文中给出了主要步骤和关键代码. 调用摄像头拍照,对拍摄照片进行裁剪,代码如下. /** * 调用摄像头拍照,对拍摄照片进行裁剪 */ private void showCameraAction() { // 跳转到系统照相机 Intent cameraIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); if (camera

Android自定义进度条的圆角横向进度条实例详解

1.本文将向你介绍自定义进度条的写法,比较简单,但还是有些知识点是需要注意的: invalidate()方法 RectF方法的应用 onMeasure方法的应用 2.原理 画3层圆角矩形,底层为黑色,第二层为灰色,最上一层为进度条颜色,示例图如下: 3.效果图   实现圆角进度条还有很多其他方法,比如在Progress控件里填充圆角图片,通过拉伸图片来达到预想的效果,虽然听起来很简单,但实现起来还是有些麻烦的. 4.解说方法 (1)invalidate()方法 invalidate()是用来刷新

Android中用Bmob实现短信验证码功能的方法详解

这篇文章主要介绍发送验证码和校验验证码的功能,用到一个第三方平台Bmob,那Bmob是什么呢?Bmob可以开发一个云存储的移动应用软件,他提供了大量的标准的API接口,根据需要接入相关服务,开发者可以更加专注于应用的开发,让产品交付更快速,验证码功能就是其中一个. 一.跟其他第三方一样,我们开发之前要做一些准备工作. 1.首先,去官网注册一个帐号:http://www.bmob.cn/: 2.然后就可以创建应用了:具体怎么做Bmob说得很清楚了(官方操作介绍),如果你不想看,我简单说一下:点击右

android 9.0 launcher3 去掉抽屉式显示所有 app(代码详解)

效果图 修改思路 1.增加全局控制变量 sys.launcher3.is_full_app,用来动态切换 2.增加两套布局,对应有抽屉和无抽屉 3.去除 allAppsButton 4.将 AllAppsContainerView 中的图标加载到 Workspace 5.新安装的 app 自动添加图标到 Workspace 6.替换 Workspace 图标长按删除选项为取消 7.屏蔽上拉显示抽屉页面手势 8.修改页面指示线为圆点 上代码 1.增加全局控制变量 sys.launcher3.is_

Android Studio3.6.+ 插件搜索不到终极解决方案(图文详解)

不知道什么时候Android Studio 插件和Gradle升级后,插件在线安装就搜索不到插件了,一直处于转圈圈状态,通过各种测试和摸索总结出几种解决方案.我的Android Studio已经升级到3.6.3. 一.排查他因 排除一些相关因素,这些方法排除后任然无法搜索插件再使用终极解决方案. 1. 网络检查 . 确定无法搜索到插件前,一定要确定网络状态良好,弱网状态下也是会半天搜索不出插件的.不然后面忙了大半天要哭了. 2. 取消代理 二.终极方案 如下列举的几种方法都可有效解决插件搜索不到