Android自定義實現圖片加文字功能

2019-12-12 02:56:08

字體：大中小

來源：轉載

供稿：網友

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”

總結

程序基本上到這就結束了。

看下效果截圖