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 在使用上没有任何区别:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.diygreen.widgetuse.LedTextActivity">

    <com.diygreen.widgetuse.view.LedTextView
        android:id="@+id/tv_clock_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"/>
</RelativeLayout>

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”即可。

实现代码如下:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.diygreen.widgetuse.LedTextActivity">
    <com.diygreen.widgetuse.view.LedTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:text="88:88:88"
        android:textColor="#3300ff00"
        android:textSize="80sp"/>
    <com.diygreen.widgetuse.view.LedTextView
        android:id="@+id/tv_clock_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:textColor="#00ff00"
        android:textSize="80sp"/>
</RelativeLayout>

实现发光效果

先看效果:

实现发光效果

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 中设置。

示例代码

<com.diygreen.widgetuse.view.LedTextView
    android:id="@+id/tv_clock_time"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:shadowRadius="10"
    android:shadowDx="0"
    android:shadowDy="0"
    android:shadowColor="#00ff00"
    android:textColor="#00ff00"
    android:textSize="80sp"/>

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

好了,来看看最终效果:

模式数字时钟

项目地址

AndroidHacks合集
控件使用篇

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

推荐阅读更多精彩内容