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

更新时间：2017年05月05日 14:25:38 投稿：lqh

这篇文章主要介绍了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”

总结

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

看下效果截图

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

您可能感兴趣的文章:

Flutter实现固定header底部滑动页效果示例
这篇文章主要为大家介绍了Flutter实现固定header底部滑动页效果示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
Android监听滑动控件实现状态栏颜色切换
这篇文章给大家分享一个平时在滑动页面经常遇到的效果：滑动过程动态修改状态栏颜色,文中有详细的示例代码,对我们的学习或工作有一定的帮助,感兴趣的小伙伴自己动手试试吧
2023-08-08
Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果
这篇文章主要介绍了Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-04-04
Flutter滚动组件之ListView使用方法详解
这篇文章主要为大家详细介绍了Flutter滚动组件之ListView的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Android通过多点触控的方式对图片进行缩放的实例代码
这篇文章主要介绍了Android通过多点触控的方式对图片进行缩放的实例代码，完成了点击图片就能浏览大图的功能，并且在浏览大图的时候还可以通过多点触控的方式对图片进行缩放。
2018-05-05
Android常用进度条效果分享
这篇文章主要为大家分享了Android常用进度条效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
Android手机获取root权限并实现关机重启功能的方法
这篇文章主要介绍了Android手机获取root权限并实现关机重启功能的方法,是Android程序设计中非常重要的技巧,需要的朋友可以参考下
2014-08-08
Android全面屏适配方法详解
Apple一直在引领设计的潮流，自从 iPhone X 发布之后，各种异形屏、刘海屏也都出来，下面这篇文章主要给大家分享介绍了关于Android全面屏与异形(刘海)屏的适配教程，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
2022-11-11
Android应用中图片浏览时实现自动切换功能的方法详解
这篇文章主要介绍了Android应用中图片浏览时实现自动切换功能的方法,文中还讲解了一个触摸大图进行图片切换的深入功能,需要的朋友可以参考下
2016-04-04
Android开发实现TextView显示丰富的文本
这篇文章主要介绍了Android开发实现TextView显示丰富的文本,涉及Android中TextView的使用技巧,需要的朋友可以参考下
2015-12-12

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具