Android自定義View用切圖顯示字符串

更新時(shí)間：2021年01月28日 15:28:18 作者：JaJa非

這篇文章主要為大家詳細(xì)介紹了Android自定義View用切圖顯示字符串，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

近期開(kāi)發(fā)收音機(jī)有個(gè)需求，將頻率值以圖片的形式顯示出來(lái)（如結(jié)尾效果圖所示）。然而，一開(kāi)始用TextView寫(xiě)出來(lái)的效果太丑了，提交上去肯定不合格。于是乎我想到了寫(xiě)一個(gè)自定義View，將頻率的數(shù)字切圖排布在View上，滿足效果圖的需求，在此記錄一下。

TextView表示的數(shù)字，Low得一批。

主要代碼及相關(guān)注釋

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);
  }
  /**
   * 獲取調(diào)頻圖片
   *
   * @param index 頻率值
   * @return 對(duì)應(yīng)頻率值的圖片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;
  }

  /**
   * 根據(jù)傳遞進(jìn)來(lái)的字符，返回對(duì)應(yīng)的圖片資源
   *
   * @param c 傳遞進(jìn)來(lái)的字符
   * @return 對(duì)應(yīng)的圖片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;
    }
  }

  // 創(chuàng)建一個(gè)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 傳遞進(jìn)來(lái)的字符串
   */
  public void setDigitalText(String text) {

    int startIndex = getChildCount() - text.length();// 起始位置，因?yàn)閕mageView的數(shù)量是根據(jù)字符串的長(zhǎng)度創(chuàng)建的
    if (startIndex < 0)//第一次更新的時(shí)候肯定是小于0的
      startIndex = 0;

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

    //下面是根據(jù)字符串的長(zhǎng)度，循環(huán)更換為對(duì)應(yīng)的圖片
    for (int i = 0; i < text.length(); i++) {
      int childId = i + startIndex;
      int resId = getResourceForChar(text.charAt(i));//將每個(gè)字符轉(zhuǎn)換為數(shù)字

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

DigitalTextView 已經(jīng)實(shí)現(xiàn)了把頻率用drawable下的num_0~num9來(lái)顯示了，因此只需要在Activity更新頻率的方法里調(diào)用setDigitalText(mFreq)即可完美實(shí)現(xiàn)需求。

最后的效果圖

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: