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>

【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自定义组合控件--图片加文字,类似视频播放软件的列表

文章图片


    推荐阅读