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

2016-05-14 本文已影响338人 diygreen

会发光的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);
    }

}

代码很简单：

获取 AssetManager
创建 Typeface 对象
为 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 移除。

优化效果

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

没有底部阴影
没有发光效果

实现底部阴影

先看效果：

实现底部阴影

仔细观察现实当中的 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

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

作者：李旺成

时间：2016年5月14日

数字时钟

自定义 LedTextView

简单模式数字时钟

优化效果

实现底部阴影

实现发光效果

项目地址

猜你喜欢

热点阅读