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)即可完美实现需求。

最后的效果图
效果图

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值