溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何在Android中實(shí)現(xiàn)一個(gè)在圖片中添加文字功能

發(fā)布時(shí)間：2020-12-04 17:02:10 來(lái)源：億速云 閱讀：1154 作者：Leah 欄目：移動(dòng)開(kāi)發(fā)

這篇文章給大家介紹如何在Android中實(shí)現(xiàn)一個(gè)在圖片中添加文字功能，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

Android自定義實(shí)現(xiàn)圖片加文字功能

分四步來(lái)寫(xiě)：

1，組合控件的xml;
2，自定義組合控件的屬性;
3，自定義繼承組合布局的class類，實(shí)現(xiàn)帶兩參數(shù)的構(gòu)造器;
4，在xml中展示組合控件。

具體實(shí)現(xiàn)過(guò)程：

一、組合控件的xml

我接觸的有兩種方式，一種是普通的Activity的xml；一種是父節(jié)點(diǎn)為merge的xml。我項(xiàng)目中用的是第一種，但個(gè)人感覺(jué)第二種好，因?yàn)榈谝环N多了相對(duì)或者絕對(duì)布局層。

我寫(xiě)的 custom_pictext.xml

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<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>

這里展示一個(gè)merge的例子，有時(shí)間，大家可以自己體會(huì)下。

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

這兩個(gè)xml，都是寫(xiě)在layout中的。

二、自定義組合控件的屬性

這步是我們自定義的重要部分之一，自定義組件的私有特性全顯示在這。

首先在values中創(chuàng)建attrs.xml

然后定義屬性，如下代碼

<&#63;xml version="1.0" encoding="UTF-8" &#63;>
<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>

這里有幾點(diǎn)需要注意的，第一：屬性名為name，第二：屬性單位為fromat。這單位包含的值可以查看這里。

三、自定義繼承組合布局的class類，實(shí)現(xiàn)帶兩參數(shù)的構(gòu)造器

我實(shí)現(xiàn)的CustomPicText.Java

/**
 * Created by Hman on 2017/5/4.
 * 為了測(cè)試自定義組合控件
 */
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);

      // 為標(biāo)題設(shè)置屬性
      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);

      // 為日期設(shè)置屬性
      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();


    }


  }
}

在這里，我們也可以給控件添加一些監(jiān)聽(tīng)器，大家自己去加上；這里值得注意的是一個(gè)加載配置的類TypeArray

4，在xml中展示組合控件

這個(gè)隨便寫(xiě)到一個(gè)xml中去就行

代碼如下

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<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>

關(guān)于如何在Android中實(shí)現(xiàn)一個(gè)在圖片中添加文字功能就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手