Android自定义View用切图显示字符串

近期开发收音机有个需求，将频率值以图片的形式显示出来（如结尾效果图所示）。然而，一开始用TextView写出来的效果太丑了，提交上去肯定不合格。于是乎我想到了写一个自定义View，将频率的数字切图排布在View上，满足效果图的需求，在此记录一下。

TextView表示的数字，Low得一批。

主要代码及相关注释

public class DigitalTextView extends LinearLayout {

public DigitalTextView(Context context) {
   super(context);
   init();
 }

public DigitalTextView(Context context, AttributeSet attrs) {
   super(context, attrs);
   init();
 }

// 初始化
 private void init() {
   this.setOrientation(LinearLayout.HORIZONTAL);
 }
 /**
  * 获取调频图片
  *
  * @param index 频率值
  * @return 对应频率值的图片id
  */
 private int getFreqDrawable(int index) {
   int drawableId = -1;
   switch (index) {
     case 0:
       drawableId = R.drawable.num_0;
       break;
     case 1:
       drawableId = R.drawable.num_1;
       break;
     case 2:
       drawableId = R.drawable.num_2;
       break;
     case 3:
       drawableId = R.drawable.num_3;
       break;
     case 4:
       drawableId = R.drawable.num_4;
       break;
     case 5:
       drawableId = R.drawable.num_5;
       break;
     case 6:
       drawableId = R.drawable.num_6;
       break;
     case 7:
       drawableId = R.drawable.num_7;
       break;
     case 8:
       drawableId = R.drawable.num_8;
       break;
     case 9:
       drawableId = R.drawable.num_9;
       break;
   }
   return drawableId;
 }

/**
  * 根据传递进来的字符，返回对应的图片资源
  *
  * @param c 传递进来的字符
  * @return 对应的图片id
  */
 private int getResourceForChar(char c) {
   if (c == '.') {
     return R.drawable.num_dot;
   } else if (c >= '0' && c <= '9') {
     return getFreqDrawable(c - '0');
   } else {
     return -1;
   }
 }

// 创建一个ImageView
 private ImageView createImageView() {
   ImageView imageView = new ImageView(getContext());
   LayoutParams param = new LayoutParams(
       LinearLayout.LayoutParams.WRAP_CONTENT,
       LinearLayout.LayoutParams.WRAP_CONTENT);
   imageView.setLayoutParams(param);
   return imageView;
 }

/**
  * 更新自定义TextView
  * @param text 传递进来的字符串
  */
 public void setDigitalText(String text) {

int startIndex = getChildCount() - text.length();// 起始位置，因为imageView的数量是根据字符串的长度创建的
   if (startIndex < 0)//第一次更新的时候肯定是小于0的
     startIndex = 0;

for (int i = 0; i < startIndex; i++) {
     getChildAt(i).setVisibility(View.GONE);
   }

//下面是根据字符串的长度，循环更换为对应的图片
   for (int i = 0; i < text.length(); i++) {
     int childId = i + startIndex;
     int resId = getResourceForChar(text.charAt(i));//将每个字符转换为数字

if (resId != -1) {
       if (childId == getChildCount()) {
         addView(createImageView());//添加到LinearLayout中
       }
       ImageView child = ((ImageView) getChildAt(childId));
       child.setVisibility(View.VISIBLE);
       child.setImageResource(resId);
     }
   }
 }
}

DigitalTextView 已经实现了把频率用drawable下的num_0~num9来显示了，因此只需要在Activity更新频率的方法里调用setDigitalText(mFreq)即可完美实现需求。

最后的效果图

来源：https://blog.csdn.net/weixin_38689688/article/details/113250289