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

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

分四步来写：

1，组合控件的xml;

2，自定义组合控件的属性;

3，自定义继承组合布局的class类，实现带两参数的构造器;

4，在xml中展示组合控件。

具体实现过程：

一、组合控件的xml

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

我写的 custom_pictext.xml

android:layout_width="wrap_content"

android:layout_height="wrap_content">

android:id="@+id/custom_pic_iv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@mipmap/a" />

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

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="题目" />

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

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

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

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

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

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

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

首先在values中创建attrs.xml

然后定义属性，如下代码

这里有几点需要注意的，第一：属性名为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中去就行

代码如下

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

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

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

总结

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

看下效果截图

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