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”

总结

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

看下效果截图

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

# Android自定义实现图片加  # Android  # 自定义控件实现图文  # Android实现异步加载图片  # android图片文件的路径地址与Uri的相互转换方法  # Android异步下载图片并且缓存图片到本地DEMO详解  # Android中RecyclerView 滑动时图片加载的优化  # Android仿微信朋友圈点击加号添加图片功能  # Android常用的图片加载库  # Android 实现获取手机里面的所有图片详解及实例  # 自定义  # 的是  # 加载  # 第一种  # 都是  # 在这里  # 在这  # 这两个  # 这就  # 就行  # 希望能  # 几点  # 写到  # 中去  # 有两种  # 谢谢大家  # 写在  # 我写  # 第一张  # 需要注意 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 香港服务器WordPress建站指南：SEO优化与高效部署策略  Mybatis 中的insertOrUpdate操作  微信小程序 HTTPS报错整理常见问题及解决方案  如何快速生成橙子建站落地页链接？  创业网站制作流程,创业网站可靠吗？  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  bing浏览器学术搜索入口_bing学术文献检索地址  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  佛山企业网站制作公司有哪些,沟通100网上服务官网？  如何自定义建站之星模板颜色并下载新样式？  Android GridView 滑动条设置一直显示状态(推荐)  网站制作软件有哪些,制图软件有哪些？  如何在IIS7中新建站点？详细步骤解析  微信小程序 canvas开发实例及注意事项  javascript读取文本节点方法小结  Laravel怎么生成二维码图片_Laravel集成Simple-QrCode扩展包与参数设置【实战】  网站制作企业,网站的banner和导航栏是指什么？  Laravel如何实现本地化和多语言支持？（i18n教程）  Python高阶函数应用_函数作为参数说明【指导】  javascript中的try catch异常捕获机制用法分析  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  如何基于PHP生成高效IDC网络公司建站源码？  青岛网站建设如何选择本地服务器？  laravel怎么为应用开启和关闭维护模式_laravel应用维护模式开启与关闭方法  php做exe能调用系统命令吗_执行cmd指令实现方式【详解】  Android利用动画实现背景逐渐变暗  如何选择PHP开源工具快速搭建网站？  深圳网站制作平台,深圳市做网站好的公司有哪些？  绝密ChatGPT指令：手把手教你生成HR无法拒绝的求职信  如何在阿里云虚拟服务器快速搭建网站？  Android okhttputils现在进度显示实例代码  Laravel中的Facade(门面)到底是什么原理  如何用已有域名快速搭建网站？  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  矢量图网站制作软件,用千图网的一张矢量图做公司app首页，该网站并未说明版权等问题，这样做算不算侵权？应该如何解决？  Laravel如何使用withoutEvents方法临时禁用模型事件  太平洋网站制作公司,网络用语太平洋是什么意思？  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗？  html5如何设置样式_HTML5样式设置方法与CSS应用技巧【教程】  晋江文学城电脑版官网 晋江文学城网页版直接进入  如何快速搭建高效WAP手机网站吸引移动用户？  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  Laravel distinct去重查询_Laravel Eloquent去重方法  php后缀怎么变mp4格式错误_修改扩展名提示格式不对怎么办【技巧】  油猴 教程,油猴搜脚本为什么会网页无法显示？  Laravel如何使用Socialite实现第三方登录？（微信/GitHub示例）  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  Laravel怎么设置路由分组Prefix_Laravel多级路由嵌套与命名空间隔离【步骤】