快捷導(dǎo)航

Android中自定義ImageView添加文字說明詳解

更新時(shí)間：2017年08月23日 10:19:17 作者：芯_空

Android中的ImageView只能顯示矩形的圖片,為了用戶體驗(yàn)更多，下面這篇文章主要給大家介紹了關(guān)于Android中自定義ImageView實(shí)現(xiàn)添加文字說明的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。

前言

大家應(yīng)該都有所體會(huì)，在android開發(fā)中，需要展示圖片的地方有很多..正常情況下展示一張圖片的時(shí)候還需要在下面添加一個(gè)文字說明..我們也可以用布局ImageView+TextView來實(shí)現(xiàn)..最常見的就是底部菜單,或者頂部菜單...圖標(biāo)下面還要添加一個(gè)文字說明...重復(fù)多次使用ImageView+TextView來實(shí)現(xiàn)會(huì)感覺有點(diǎn)麻煩..

下面就介紹一個(gè)簡易的圖片+文字的簡單控件，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹：

上效果圖

效果圖

下面我們開始擼代碼.

MyImageTextViewNew.java

public class MyImageTextViewNew extends LinearLayout {

 private ImageView mImageView = null;
 private TextView mTextView = null;
 private int imageId;
 private int textId, textColorId;

 public MyImageTextViewNew(Context context) {
  this(context, null);
 }

 public MyImageTextViewNew(Context context, @Nullable AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public MyImageTextViewNew(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  this.setOrientation(LinearLayout.VERTICAL);//設(shè)置垂直排序
  this.setGravity(Gravity.CENTER);//設(shè)置居中
  if (mImageView == null) {
   mImageView = new ImageView(context);
  }
  if (mTextView == null) {
   mTextView = new TextView(context);
  }
  if (attrs == null)
   return;
  int count = attrs.getAttributeCount();
  for (int i = 0; i < count; i++) {
   String attrName = attrs.getAttributeName(i);//獲取屬性名稱
   //根據(jù)屬性獲取資源ID
   switch (attrName) {
    //顯示的圖片
    case "image":
     imageId = attrs.getAttributeResourceValue(i, 0);
     break;
    //顯示的文字
    case "text":
     textId = attrs.getAttributeResourceValue(i, 0);
     break;
    //顯示的文字的顏色
    case "textColor":
     textColorId = attrs.getAttributeResourceValue(i, 0);
     break;
   }
  }
  init();
 }

 /**
  * 初始化狀態(tài)
  */
 private void init() {
  this.setText(textId);
  mTextView.setGravity(Gravity.CENTER);//字體居中
  this.setTextColor(textColorId);
  this.setImgResource(imageId);
  addView(mImageView);//將圖片控件加入到布局中
  addView(mTextView);//將文字控件加入到布局中
 }

 /**
  * 設(shè)置顯示的圖片
  *
  * @param resourceID 圖片ID
  */
 private void setImgResource(int resourceID) {
  if (resourceID == 0) {
   this.mImageView.setImageResource(0);
  } else {
   this.mImageView.setImageResource(resourceID);
  }
 }

 /**
  * 設(shè)置顯示的文字
  *
  * @param text
  */
 public void setText(int text) {
  this.mTextView.setText(text);
 }

 /**
  * 設(shè)置字體顏色(默認(rèn)為黑色)
  *
  * @param color
  */
 private void setTextColor(int color) {
  if (color == 0) {
   this.mTextView.setTextColor(Color.BLACK);
  } else {
   this.mTextView.setTextColor(getResources().getColor(color));
  }
 }

}

簡單解釋下..實(shí)際上就是在LinearLayout布局中添加ImageView和TextView

這個(gè)View也比較簡單,代碼中也有部分簡易的說明.

下面可能還需要一個(gè)屬性文件

imageText.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

 <declare-styleable name="imageText">
  <attr name="image" format="integer" />
  <attr name="text" format="integer" />
  <attr name="textColor" format="integer" />
 </declare-styleable>
 
</resources>