Hacks控件篇-Hack3 为文本添加发亮的效果

会发光的TextView

作者：李旺成

时间：2016年5月14日

---

这个 Hack 将介绍通过微调 TextView 来生成 LED 效果的文本。

数字时钟

先看看数字时钟的效果：

LED数字时钟

自定义 LedTextView

要实现上面的数字时钟的效果，直接使用 Android 的字体是肯定达不到的，那么需要用到一种特殊的字体。

这里，通过继承 TextView 实现使用自定义字体的 LedTextView，先看看如何使用自定义字体。

1、首先将字体文件放到 assets 目录下
很多使用 AndroidStudio 创建的项目是没有 assets 文件夹的，这里直接在 Module 的 src/main 目录下创建 assets 文件夹即可，如图：

创建 assets 目录

一般建议不要直接将字体文件放到 assets 下，最好再创建一个文件夹 fonts 专门存放字体文件。

2、自定义 LedTextView 使用特定字体
直接看代码吧：

public class LedTextView extends TextView {

    private static final String FONTS_FOLDER = "fonts";
    private static final String FONT_DIGITAL_7 = FONTS_FOLDER
            + File.separator + "digital-7.ttf";

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

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

    public LedTextView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context);
    }

    private void init(Context context) {
        AssetManager assets = context.getAssets();
        final Typeface font = Typeface.createFromAsset(assets,
                FONT_DIGITAL_7);
        setTypeface(font);
    }

}

代码很简单：

1. 获取 AssetManager
2. 创建 Typeface 对象
3. 为 LedTextView 设置 Typeface

好了，自定义 LedTextView 已经完成了，下面就是使用了。

简单模式数字时钟

先看效果：

简单模式数字时钟

实现步骤：
1、在布局中使用自定义 LedTextView
这个 LedTextView 与普通的 TextView 在使用上没有任何区别：

2、让“数字”动起来
要实现类似时钟计时的效果有很多方法：

• 利用 Timer
• 利用在 Thread 中 sleep
• 利用 Handler 的 postDelayed() 方法

这里使用 Handler 的 postDelayed() 方法来实现，就不一一演示其他的实现方案了。

思路是这样的：利用 Handler 可以延迟 post 一个 Runnable 的特性，每次延迟发送一个 Runnable 的时候，再次将该 Runnable 延迟发送，这样就可以形成一个循环，直到手动停止。

public class LedTextActivity extends AppCompatActivity {

    private static final String DATE_FORMAT = "%02d:%02d:%02d";
    private static final int REFRESH_DELAY = 500;

    private TextView mClockTimeTV;

    private final Handler mHandler = new Handler();
    private final Runnable mTimeRefresher = new Runnable() {
        @Override
        public void run() {
            final Date d = new Date();
            mClockTimeTV.setText(String.format(DATE_FORMAT, d.getHours(),
                    d.getMinutes(), d.getSeconds()));
            mHandler.postDelayed(this, REFRESH_DELAY);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_led_text);

        initView();
    }

    private void initView() {
        mClockTimeTV = (TextView) findViewById(R.id.tv_clock_time);
    }

    @Override
    protected void onResume() {
        super.onResume();
        mHandler.post(mTimeRefresher);
    }

    @Override
    protected void onStop() {
        super.onStop();
        mHandler.removeCallbacks(mTimeRefresher);
    }
}

代码量很少，在 Activity onResume() 时使用 Handler post 用于更新 LedTextView 的 Runnable，在该 Runnable 的 run() 方法中再使用 Handler postDelayed() 该 Runnable。不要忘了在 onStop() 方法中将 Runnable 移除。

优化效果

经过上面的步骤可以看到数字时钟已经跑起来的，但是效果还有差距：

1. 没有底部阴影
2. 没有发光效果

实现底部阴影

先看效果：

实现底部阴影

仔细观察现实当中的 Led 数字时钟，你会发现它在动的是发亮文本，下面还有一层阴影。要想做得更像那就得把该效果模拟出来，其实也很简单，直接在下面再放一个 LedTextView 显示固定的文本“88:88:88”即可。

实现代码如下：

实现发光效果

先看效果：

实现发光效果

setShadowLayer() 方法
要实现发光效果也很简单，TextView 提供了 setShadowLayer() 方法：

public void setShadowLayer(float radius, float dx, float dy, int color);

该方法的四个参数分别是：

• radius：阴影半径
• dx：X 轴方向的偏移量
• dy：Y 轴方向的偏移量
• color：阴影颜色

属性设置阴影
当然，也可以通过属性设置：

• shadowRadius
• shadowDx
• shadowDy
• shadowColor

和 setShadowLayer() 方法的参数对应，可以直接在 xml 中设置。

示例代码

为了产生一种发光的效果，这里是通过设置 shadowRadius 属性来实现的，设置阴影之后可以使显示日期的文本看起来更亮，也就是发光的效果。

好了，来看看最终效果：

模式数字时钟

项目地址

AndroidHacks合集
控件使用篇

项目示例代码：
LedTextView.java
LedTextActivity.java
activity_led_text.xml