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”

总结

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

看下效果截图

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