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="" 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=""> <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

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中去就行

代码如下