Android中自定義ImageView添加文字說(shuō)明詳解

2019-12-12 02:12:24

字體：大中小

供稿：網(wǎng)友

前言

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

下面就介紹一個(gè)簡(jiǎn)易的圖片+文字的簡(jiǎn)單控件，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(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));  } }}

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

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

下面可能還需要一個(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>