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

更新时间：2017年05月05日 14:25:38 投稿：lqh

这篇文章主要介绍了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”

总结

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

看下效果截图

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

您可能感兴趣的文章:

Android动画之逐帧动画(Frame Animation)基础学习
大家都知道逐帧动画是一种常见的动画形式，其原理是在“连续的关键帧”中分解动画动作，也就是在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。下面我们就来学习下Android中逐帧动画的基础知识，有需要的可以参考借鉴。
2016-09-09
Android NDK开发之:配置环境的详解
本篇文章是对Android中的配置环境进行了详细的分析介绍，需要的朋友参考下
2013-05-05
Android中将一个图片切割成多个图片的实现方法
有种场景，我们想将一个图片切割成多个图片。比如我们在开发一个拼图的游戏，就首先要对图片进行切割
2013-05-05
Android实现淘宝倒计时功能
这篇文章主要为大家详细介绍了Android实现淘宝倒计时，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-02-02
自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果
在工作中又很多需求都不是android系统自带的控件可以达到效果的所以这个时候就要自定义控件来达到效果:使用自定义RadioButton和ViewPager实现TabHost带滑动的页卡效果
2013-01-01
Android 中使用 ViewPager实现屏幕页面切换和页面轮播效果
ViewPager是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。下面我们就展示下ViewPager可以实现的两种简单效果，感兴趣的朋友一起看看吧
2016-12-12
Android jni调试打印char阵列的实例详解
这篇文章主要介绍了Android jni调试打印char阵列的实例详解的相关资料,通过此文希望能帮助到大家实现这样的功能，需要的朋友可以参考下
2017-08-08
简单好用的Adapter---ArrayAdapter详解
这篇文章主要介绍了简单好用的Adapter---ArrayAdapter详解，具有一定参考价值，需要的朋友可以了解下。
2017-11-11
android实现节点进度条效果
这篇文章主要为大家详细介绍了android实现节点进度条效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-05-05
Android 常见的图片加载框架详细介绍
这篇文章主要介绍了Android 常见的图片加载框架详细介绍的相关资料,需要的朋友可以参考下
2016-12-12

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具