Android仿打字机打字效果

最近不太忙,看了看JS方面的知识,偶然看到一个打字机打字的效果,感觉挺棒的,就打算用android搞一个试试.为了不造重复的轮子,先在度娘上找了找,果然有前辈已经写过这方面的文章.所以参考了一下,并且加入了一些自己的想法,做了一些优化.先来看一下效果吧:

图片可能有点掉帧,实际效果更好一些.

---

一、简单分析

看到这个效果,想一想其实并不太难,做一个定时器,然后一点一点的把文字显示出来就可以了,为了更加像打字机的效果,可以在每一个字显示出来时在后边加上一些修饰的符号比如” _ “或者” | ” 这些.下边就来实现一下.

二、具体实现

比较简单,先看一下代码:

package com.example.junweiliu.printertextview;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TextView;

import java.util.Timer;
import java.util.TimerTask;

/**
 * Created by junweiliu on 16/12/29.
 */
public class PrinterTextView extends TextView {
    /**
     * TAG
     */
    private static final String TAG = "PrinterTextView";
    /**
     * 默认打字字符
     */
    private final String DEFAULT_INTERVAL_CHAR = "_";
    /**
     * 默认打字间隔时间
     */
    private final int DEFAULT_TIME_DELAY = 80;
    /**
     * 计时器
     */
    private Timer mTimer;
    /**
     * 需要打字的文字
     */
    private String mPrintStr;
    /**
     * 间隔时间
     */
    private int intervalTime = DEFAULT_TIME_DELAY;
    /**
     * 间隔时间
     */
    private String intervalChar = DEFAULT_INTERVAL_CHAR;
    /**
     * 打字进度
     */
    private int printProgress = 0;


    public PrinterTextView(Context context) {
        super(context);
    }

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

    public PrinterTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }


    /**
     * 设置要打字的文字
     *
     * @param str
     */
    public void setPrintText(String str) {
        setPrintText(str, DEFAULT_TIME_DELAY);
    }

    /**
     * 设置需要打字的文字及打字间隔
     *
     * @param str  打字文字
     * @param time 打字间隔(ms)
     */
    public void setPrintText(String str, int time) {
        setPrintText(str, time, DEFAULT_INTERVAL_CHAR);
    }

    /**
     * 设置需要打字的文字,打字间隔,间隔符号
     *
     * @param str          打字文字
     * @param time         打字间隔(ms)
     * @param intervalChar 间隔符号("_")
     */
    public void setPrintText(String str, int time, String intervalChar) {
        if (strIsEmpty(str) || 0 == time || strIsEmpty(intervalChar)) {
            return;
        }
        this.mPrintStr = str;
        this.intervalTime = time;
        this.intervalChar = intervalChar;
    }

    /**
     * 开始打字
     */
    public void startPrint() {
        // 判空处理
        if (strIsEmpty(mPrintStr)) {
            if (!strIsEmpty(getText().toString())) {
                this.mPrintStr = getText().toString();
            } else {
                return;
            }
        }
        // 重置相关信息
        setText("");
        stopPrint();
        printProgress = 0;
        mTimer = new Timer();
        mTimer.schedule(new PrinterTimeTask(), intervalTime, intervalTime);
    }

    /**
     * 停止打字
     */
    public void stopPrint() {
        if (null != mTimer) {
            mTimer.cancel();
            mTimer = null;
        }
    }

    /**
     * 判断str是否为空
     *
     * @param str
     * @return
     */
    private boolean strIsEmpty(String str) {
        if (null != str && !"".equals(str)) {
            return false;
        } else {
            return true;
        }
    }

    /**
     * 打字计时器任务
     */
    class PrinterTimeTask extends TimerTask {

        @Override
        public void run() {
            // 需要刷新页面,必须在UI线程,使用post方法
            post(new Runnable() {
                @Override
                public void run() {
                    // 如果未显示完,继续显示
                    if (printProgress < mPrintStr.length()) {
                        printProgress++;
                        // (printProgress & 1) == 1 等价于printProgress%2!=0
                        setText(mPrintStr.substring(0, printProgress) + ((printProgress & 1) == 1 ? intervalChar : ""));
                    } else {
                        // 如果完成打字,显示完整文字
                        setText(mPrintStr);
                        stopPrint();
                    }
                }
            });
        }
    }
}

注释比较全,也比较简单,需要注意的就几点,首先需要注意的是在PrinterTimeTask中,在线程中执行操作时,要使用post方法,因为不能在子线程中直接更新UI,post方法用来处理这种需求(不了解的童鞋,可以看一下View的post方法,这里就不详细写了),然后在处理每次的显示的时候,为了更加像打字机的效果,在显示时做了一些处理,这里做的处理是当前显示的文字是奇数位时则在后边加上一个符号” _ “,当然也可以自己去设置,是偶数位时则不去处理.这样看起来就比较形象了.相关代码((printProgress & 1) == 1 ? intervalChar : “”)这里用了位运算,是因为效率应该会高一些,当然也可以用printProgress%2!=0来判断当前位置是奇数位还是偶数位,效果是一样的.

三、完整代码

MainActivity:

package com.example.junweiliu.printertextview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {
    /**
     * 打印view
     */
    private PrinterTextView mPrinterTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPrinterTextView = (PrinterTextView) findViewById(R.id.pt_my);
    }

    /**
     * 开始打印
     *
     * @param view
     */
    public void startPrint(View view) {
        mPrinterTextView.setPrintText("草原上有对狮子母子。小狮子问母狮子：“妈，幸福在哪里?”母狮子说：“幸福就在你的尾巴上。”\n" +
                "　　于是小狮子不断追着尾巴跑，但始终咬不到。母狮子笑道：“傻瓜!幸福不是这样得到的!只要你昂首向前走，幸福就会一直跟随着你!”。", 100, "|");
        mPrinterTextView.startPrint();

    }
}

布局文件activity_main:

<?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.example.junweiliu.printertextview.MainActivity">

    <!--android:text="某日,女秘书神色凝重地说：王总,我怀孕了。 王继续低头看文件,然后淡淡一笑:我早结扎了。 女秘书楞了一会媚笑道:我和您开玩笑呢! 王抬起头看了她一眼，喝了口茶说:我也是。"-->
    <com.example.junweiliu.printertextview.PrinterTextView
            android:id="@+id/pt_my"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#999999"
            android:textSize="15sp"
    />
    <Button
            android:id="@+id/btn_start"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_marginTop="16dp"
            android:onClick="startPrint"
            android:text="开始"
    />
</RelativeLayout>

源码地址

源码下载