大道之行,天下为公。这篇文章主要讲述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>
【Android自定义组合控件--图片加文字,类似视频播放软件的列表】这里展示一个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 架构设计实现——MVP模式
- Android SDK安装时出错“android Failed to rename directory”的解决方法
- 如何从Weebly迁移到WordPress(分步迁移指南)
- 图像SEO分步指南(如何优化你的网站上的图像())
- 如何使用Polylang实现WordPress多语言(分步教程)
- 如何从WordPress.com迁移到自托管WordPress(终极迁移指南)
- 如何使用BackWPup插件备份WordPress网站(综合指南)
- 如何从Blogger迁移到WordPress(综合站点迁移指南)