Android模仿打字机效果的自定义View实现

最新推荐文章于 2024-08-27 09:28:29 发布
最新推荐文章于 2024-08-27 09:28:29 发布
阅读量645 收藏 1
点赞数 1
分类专栏： 打字机效果 文章标签： 打字机效果

一、前言

         在做splash界面的时候，需要做类似于打字机打字的效果，字一个一个地蹦出来，显示每一个字都带有打字的声音。


二、效果演示

         本例自定义View的演示效果如下（PS：一直不知道在Android上怎么录制gif格式的动画，索性在PC上跑Genymotion Android模拟器，然后用LICEcap录屏就可以了。）。





三、实现原理：

         这个其实不难实现，通过一个定时器不断调用TextView的setText就行了，在setText的时候播放打字的音效。具体代码如下：

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. import java.util.Timer;  
  2.     import java.util.TimerTask;  
  3.       
  4.     import android.content.Context;  
  5.     import android.media.MediaPlayer;  
  6.     import android.text.TextUtils;  
  7.     import android.util.AttributeSet;  
  8.     import android.widget.TextView;  
  9.       
  10.     import com.uperone.typetextview.R;  
  11.       
  12.     /** 
  13.      * 模拟打字机效果 
  14.      *  
  15.      * */  
  16.     public class TypeTextView extends TextView {  
  17.         private Context mContext = null;  
  18.         private MediaPlayer mMediaPlayer = null;  
  19.         private String mShowTextString = null;  
  20.         private Timer mTypeTimer = null;  
  21.         private OnTypeViewListener mOnTypeViewListener = null;  
  22.         private static final int TYPE_TIME_DELAY = 80;  
  23.         private int mTypeTimeDelay = TYPE_TIME_DELAY; // 打字间隔  
  24.           
  25.         public TypeTextView(Context context, AttributeSet attrs, int defStyle) {  
  26.             super(context, attrs, defStyle);  
  27.             initTypeTextView( context );  
  28.         }  
  29.       
  30.         public TypeTextView(Context context, AttributeSet attrs) {  
  31.             super(context, attrs);  
  32.             initTypeTextView( context );  
  33.         }  
  34.       
  35.         public TypeTextView(Context context) {  
  36.             super(context);  
  37.             initTypeTextView( context );  
  38.         }  
  39.           
  40.         public void setOnTypeViewListener( OnTypeViewListener onTypeViewListener ){  
  41.             mOnTypeViewListener = onTypeViewListener;  
  42.         }  
  43.           
  44.         public void start( final String textString ){  
  45.             start( textString, TYPE_TIME_DELAY );  
  46.         }  
  47.           
  48.         public void start( final String textString, final int typeTimeDelay ){  
  49.             if( TextUtils.isEmpty( textString ) || typeTimeDelay < 0 ){  
  50.                 return;  
  51.             }  
  52.             post( new Runnable( ) {  
  53.                 @Override  
  54.                 public void run() {  
  55.                     mShowTextString = textString;  
  56.                     mTypeTimeDelay = typeTimeDelay;  
  57.                     setText( "" );  
  58.                     startTypeTimer( );  
  59.                     if( null != mOnTypeViewListener ){  
  60.                         mOnTypeViewListener.onTypeStart( );  
  61.                     }  
  62.                 }  
  63.             });  
  64.         }  
  65.           
  66.         public void stop( ){  
  67.             stopTypeTimer( );  
  68.             stopAudio();  
  69.         }  
  70.           
  71.         private void initTypeTextView( Context context ){  
  72.             mContext = context;  
  73.         }  
  74.           
  75.         private void startTypeTimer( ){  
  76.             stopTypeTimer( );  
  77.             mTypeTimer = new Timer( );  
  78.             mTypeTimer.schedule( new TypeTimerTask(), mTypeTimeDelay );  
  79.         }  
  80.           
  81.         private void stopTypeTimer( ){  
  82.             if( null != mTypeTimer ){  
  83.                 mTypeTimer.cancel( );  
  84.                 mTypeTimer = null;  
  85.             }  
  86.         }  
  87.           
  88.         private void startAudioPlayer() {  
  89.             stopAudio();  
  90.             playAudio( R.raw.type_in );  
  91.         }  
  92.           
  93.         private void playAudio( int audioResId ){  
  94.             try{  
  95.                 stopAudio( );  
  96.                 mMediaPlayer = MediaPlayer.create( mContext, audioResId );  
  97.                 mMediaPlayer.start( );  
  98.             }catch( Exception e ){  
  99.                 e.printStackTrace();  
  100.             }  
  101.         }  
  102.           
  103.         private void stopAudio( ){  
  104.             if( mMediaPlayer != null && mMediaPlayer.isPlaying( ) ){  
  105.                 mMediaPlayer.stop( );  
  106.                 mMediaPlayer.release( );  
  107.                 mMediaPlayer = null;  
  108.             }  
  109.         }  
  110.           
  111.         class TypeTimerTask extends TimerTask{  
  112.             @Override  
  113.             public void run() {  
  114.                 post(new Runnable( ) {  
  115.                     @Override  
  116.                     public void run() {  
  117.                         if( getText( ).toString( ).length( ) < mShowTextString.length( ) ){  
  118.                             setText( mShowTextString.substring(0, getText( ).toString( ).length( ) + 1 ) );  
  119.                             startAudioPlayer();  
  120.                             startTypeTimer( );  
  121.                         }else{  
  122.                             stopTypeTimer( );  
  123.                             if( null != mOnTypeViewListener ){  
  124.                                 mOnTypeViewListener.onTypeOver( );  
  125.                             }  
  126.                         }  
  127.                     }  
  128.                 });  
  129.             }  
  130.         }  
  131.           
  132.         public interface OnTypeViewListener{  
  133.             public void onTypeStart( );  
  134.             public void onTypeOver( );  
  135.         }  
  136.     }  

三、实现原理：

         这个其实不难实现，通过一个定时器不断调用TextView的setText就行了，在setText的时候播放打字的音效。具体代码如下：

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. import java.util.Timer;  
  2.     import java.util.TimerTask;  
  3.       
  4.     import android.content.Context;  
  5.     import android.media.MediaPlayer;  
  6.     import android.text.TextUtils;  
  7.     import android.util.AttributeSet;  
  8.     import android.widget.TextView;  
  9.       
  10.     import com.uperone.typetextview.R;  
  11.       
  12.     /** 
  13.      * 模拟打字机效果 
  14.      *  
  15.      * */  
  16.     public class TypeTextView extends TextView {  
  17.         private Context mContext = null;  
  18.         private MediaPlayer mMediaPlayer = null;  
  19.         private String mShowTextString = null;  
  20.         private Timer mTypeTimer = null;  
  21.         private OnTypeViewListener mOnTypeViewListener = null;  
  22.         private static final int TYPE_TIME_DELAY = 80;  
  23.         private int mTypeTimeDelay = TYPE_TIME_DELAY; // 打字间隔  
  24.           
  25.         public TypeTextView(Context context, AttributeSet attrs, int defStyle) {  
  26.             super(context, attrs, defStyle);  
  27.             initTypeTextView( context );  
  28.         }  
  29.       
  30.         public TypeTextView(Context context, AttributeSet attrs) {  
  31.             super(context, attrs);  
  32.             initTypeTextView( context );  
  33.         }  
  34.       
  35.         public TypeTextView(Context context) {  
  36.             super(context);  
  37.             initTypeTextView( context );  
  38.         }  
  39.           
  40.         public void setOnTypeViewListener( OnTypeViewListener onTypeViewListener ){  
  41.             mOnTypeViewListener = onTypeViewListener;  
  42.         }  
  43.           
  44.         public void start( final String textString ){  
  45.             start( textString, TYPE_TIME_DELAY );  
  46.         }  
  47.           
  48.         public void start( final String textString, final int typeTimeDelay ){  
  49.             if( TextUtils.isEmpty( textString ) || typeTimeDelay < 0 ){  
  50.                 return;  
  51.             }  
  52.             post( new Runnable( ) {  
  53.                 @Override  
  54.                 public void run() {  
  55.                     mShowTextString = textString;  
  56.                     mTypeTimeDelay = typeTimeDelay;  
  57.                     setText( "" );  
  58.                     startTypeTimer( );  
  59.                     if( null != mOnTypeViewListener ){  
  60.                         mOnTypeViewListener.onTypeStart( );  
  61.                     }  
  62.                 }  
  63.             });  
  64.         }  
  65.           
  66.         public void stop( ){  
  67.             stopTypeTimer( );  
  68.             stopAudio();  
  69.         }  
  70.           
  71.         private void initTypeTextView( Context context ){  
  72.             mContext = context;  
  73.         }  
  74.           
  75.         private void startTypeTimer( ){  
  76.             stopTypeTimer( );  
  77.             mTypeTimer = new Timer( );  
  78.             mTypeTimer.schedule( new TypeTimerTask(), mTypeTimeDelay );  
  79.         }  
  80.           
  81.         private void stopTypeTimer( ){  
  82.             if( null != mTypeTimer ){  
  83.                 mTypeTimer.cancel( );  
  84.                 mTypeTimer = null;  
  85.             }  
  86.         }  
  87.           
  88.         private void startAudioPlayer() {  
  89.             stopAudio();  
  90.             playAudio( R.raw.type_in );  
  91.         }  
  92.           
  93.         private void playAudio( int audioResId ){  
  94.             try{  
  95.                 stopAudio( );  
  96.                 mMediaPlayer = MediaPlayer.create( mContext, audioResId );  
  97.                 mMediaPlayer.start( );  
  98.             }catch( Exception e ){  
  99.                 e.printStackTrace();  
  100.             }  
  101.         }  
  102.           
  103.         private void stopAudio( ){  
  104.             if( mMediaPlayer != null && mMediaPlayer.isPlaying( ) ){  
  105.                 mMediaPlayer.stop( );  
  106.                 mMediaPlayer.release( );  
  107.                 mMediaPlayer = null;  
  108.             }  
  109.         }  
  110.           
  111.         class TypeTimerTask extends TimerTask{  
  112.             @Override  
  113.             public void run() {  
  114.                 post(new Runnable( ) {  
  115.                     @Override  
  116.                     public void run() {  
  117.                         if( getText( ).toString( ).length( ) < mShowTextString.length( ) ){  
  118.                             setText( mShowTextString.substring(0, getText( ).toString( ).length( ) + 1 ) );  
  119.                             startAudioPlayer();  
  120.                             startTypeTimer( );  
  121.                         }else{  
  122.                             stopTypeTimer( );  
  123.                             if( null != mOnTypeViewListener ){  
  124.                                 mOnTypeViewListener.onTypeOver( );  
  125.                             }  
  126.                         }  
  127.                     }  
  128.                 });  
  129.             }  
  130.         }  
  131.           
  132.         public interface OnTypeViewListener{  
  133.             public void onTypeStart( );  
  134.             public void onTypeOver( );  
  135.         }  
  136.     }  

四、使用说明：

1. 在xml文件中定义：

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <com.uperone.typetext.view.TypeTextView  
  2.             android:id="@+id/typeTxtId"  
  3.             android:layout_width="fill_parent"  
  4.             android:layout_height="wrap_content"  
  5.             android:layout_centerVertical="true" />  


2. 在代码中实例化：


[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. mTypeTextView = ( TypeTextView )findViewById(R.id.typeTxtId);  
  2.         mTypeTextView.setOnTypeViewListener( new OnTypeViewListener( ) {  
  3.             @Override  
  4.             public void onTypeStart() {  
  5.                 print( "onTypeStart" );  
  6.             }  
  7.               
  8.             @Override  
  9.             public void onTypeOver() {  
  10.                 print( "onTypeOver" );  
  11.             }  
  12.         });   

 3.  调用start方法：


[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. mTypeTextView.start( TEST_DATA );  

五、下载地址

         我将这个demo上传到github了，可以在这里下载，随便改。TypeTextView



三、实现原理：

         这个其实不难实现，通过一个定时器不断调用TextView的setText就行了，在setText的时候播放打字的音效。具体代码如下：

[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. import java.util.Timer;  
  2.     import java.util.TimerTask;  
  3.       
  4.     import android.content.Context;  
  5.     import android.media.MediaPlayer;  
  6.     import android.text.TextUtils;  
  7.     import android.util.AttributeSet;  
  8.     import android.widget.TextView;  
  9.       
  10.     import com.uperone.typetextview.R;  
  11.       
  12.     /** 
  13.      * 模拟打字机效果 
  14.      *  
  15.      * */  
  16.     public class TypeTextView extends TextView {  
  17.         private Context mContext = null;  
  18.         private MediaPlayer mMediaPlayer = null;  
  19.         private String mShowTextString = null;  
  20.         private Timer mTypeTimer = null;  
  21.         private OnTypeViewListener mOnTypeViewListener = null;  
  22.         private static final int TYPE_TIME_DELAY = 80;  
  23.         private int mTypeTimeDelay = TYPE_TIME_DELAY; // 打字间隔  
  24.           
  25.         public TypeTextView(Context context, AttributeSet attrs, int defStyle) {  
  26.             super(context, attrs, defStyle);  
  27.             initTypeTextView( context );  
  28.         }  
  29.       
  30.         public TypeTextView(Context context, AttributeSet attrs) {  
  31.             super(context, attrs);  
  32.             initTypeTextView( context );  
  33.         }  
  34.       
  35.         public TypeTextView(Context context) {  
  36.             super(context);  
  37.             initTypeTextView( context );  
  38.         }  
  39.           
  40.         public void setOnTypeViewListener( OnTypeViewListener onTypeViewListener ){  
  41.             mOnTypeViewListener = onTypeViewListener;  
  42.         }  
  43.           
  44.         public void start( final String textString ){  
  45.             start( textString, TYPE_TIME_DELAY );  
  46.         }  
  47.           
  48.         public void start( final String textString, final int typeTimeDelay ){  
  49.             if( TextUtils.isEmpty( textString ) || typeTimeDelay < 0 ){  
  50.                 return;  
  51.             }  
  52.             post( new Runnable( ) {  
  53.                 @Override  
  54.                 public void run() {  
  55.                     mShowTextString = textString;  
  56.                     mTypeTimeDelay = typeTimeDelay;  
  57.                     setText( "" );  
  58.                     startTypeTimer( );  
  59.                     if( null != mOnTypeViewListener ){  
  60.                         mOnTypeViewListener.onTypeStart( );  
  61.                     }  
  62.                 }  
  63.             });  
  64.         }  
  65.           
  66.         public void stop( ){  
  67.             stopTypeTimer( );  
  68.             stopAudio();  
  69.         }  
  70.           
  71.         private void initTypeTextView( Context context ){  
  72.             mContext = context;  
  73.         }  
  74.           
  75.         private void startTypeTimer( ){  
  76.             stopTypeTimer( );  
  77.             mTypeTimer = new Timer( );  
  78.             mTypeTimer.schedule( new TypeTimerTask(), mTypeTimeDelay );  
  79.         }  
  80.           
  81.         private void stopTypeTimer( ){  
  82.             if( null != mTypeTimer ){  
  83.                 mTypeTimer.cancel( );  
  84.                 mTypeTimer = null;  
  85.             }  
  86.         }  
  87.           
  88.         private void startAudioPlayer() {  
  89.             stopAudio();  
  90.             playAudio( R.raw.type_in );  
  91.         }  
  92.           
  93.         private void playAudio( int audioResId ){  
  94.             try{  
  95.                 stopAudio( );  
  96.                 mMediaPlayer = MediaPlayer.create( mContext, audioResId );  
  97.                 mMediaPlayer.start( );  
  98.             }catch( Exception e ){  
  99.                 e.printStackTrace();  
  100.             }  
  101.         }  
  102.           
  103.         private void stopAudio( ){  
  104.             if( mMediaPlayer != null && mMediaPlayer.isPlaying( ) ){  
  105.                 mMediaPlayer.stop( );  
  106.                 mMediaPlayer.release( );  
  107.                 mMediaPlayer = null;  
  108.             }  
  109.         }  
  110.           
  111.         class TypeTimerTask extends TimerTask{  
  112.             @Override  
  113.             public void run() {  
  114.                 post(new Runnable( ) {  
  115.                     @Override  
  116.                     public void run() {  
  117.                         if( getText( ).toString( ).length( ) < mShowTextString.length( ) ){  
  118.                             setText( mShowTextString.substring(0, getText( ).toString( ).length( ) + 1 ) );  
  119.                             startAudioPlayer();  
  120.                             startTypeTimer( );  
  121.                         }else{  
  122.                             stopTypeTimer( );  
  123.                             if( null != mOnTypeViewListener ){  
  124.                                 mOnTypeViewListener.onTypeOver( );  
  125.                             }  
  126.                         }  
  127.                     }  
  128.                 });  
  129.             }  
  130.         }  
  131.           
  132.         public interface OnTypeViewListener{  
  133.             public void onTypeStart( );  
  134.             public void onTypeOver( );  
  135.         }  
  136.     }  
曦德1
关注
专栏目录
Android打字机效果。TextView+Rxjava 逐字显示
chen_keai的博客
03-28 1797
android逐字显示 ！是开眼项目里的 感谢开源大神 https://github.com/YoloHuang 这是原作者的gitgay主页 ，我学习安卓也有快一年了 一直停留在基础基础基础 部分，最近确实很无聊就去找大神的作品复刻一份 目前项目完成度--50% 我也要成为路飞一样的皮卡丘 好了废话不多说 先上普通模式的用普通线程的gif图 做的效果------------------...
Android仿打字机打字效果
冷不冷的博客
12-29 3367
最近不太忙,看了看JS方面的知识,偶然看到一个打字机打字的效果,感觉挺棒的,就打算用android搞一个试试.为了不造重复的轮子,先在度娘上找了找,果然有前辈已经写过这方面的文章.所以参考了一下,并且加入了一些自己的想法,做了一些优化.先来看一下效果吧:图片可能有点掉帧,实际效果更好一些.一、简单分析看到这个效果,想一想其实并不太难,做一个定时器,然后一点一点的把文字显示出来就可以了,为了更加像打字
推荐项目：TypeWriterView——复古打字机效果的Android库
最新发布
gitblog_00535的博客
08-27 953
推荐项目：TypeWriterView——复古打字机效果的Android库 typewriterviewAndroid library for typewriter like effects项目地址:https://gitcode.com/gh_mirrors/ty/typewriterview 在数字化时代追寻经典魅力，TypeWriterView以其独特的复古情怀，为Android应用开发注...
Android 打字机效果
weixin_33910759的博客
12-16 354
效果图如下：会有打字声音的哦！关键代码分析：private void initView() { release(); mAnimatorTypeText = new ValueAnimator(); mAnimatorTypeText.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { ...
Android自定义View实现打字机效果
09-01
最近在做Android开发的时候，需要做类似于打字机打字的效果，字一个一个地蹦出来，显示每一个字都带有打字的声音。现在分享给大家，有需要的可以参考借鉴。
Android仿打字机打字效果源码
12-30
http://blog.csdn.net/u013904672/article/details/53932003 配套资源
Android 仿业问 打字机效果.zip
09-23
在Android开发中，实现独特的用户界面效果可以提升应用的用户体验，而“打字机效果”是一种常见的动画效果，常用于输入框（EditText）或者文本显示，给人一种复古、经典的打字机输入的感觉。这个开源项目“Android ...
Android开源项目库汇总
opendigg的博客
05-02 4812
最近做了一个Android开源项目库汇总，里面集合了OpenDigg 上的优质的Android开源项目库，方便移动开发人员便捷的找到自己需要的项目工具等，感兴趣的可以到GitHub上给个star。抽屉菜单 MaterialDrawer ★7337 - 安卓抽屉效果实现方案 Side-Menu.Android ★3865 - 创意边侧菜单 FlowingDrawer ★1744 - 向右滑动流动抽
GitHub 上受欢迎的 Android UI Library 整理二
Mob_com的博客
06-11 3880
通知 https://github.com/Tapadoo/Alerter ★2528 - 克服Toast和Snackbar的限制 https://github.com/wenmingvs/NotifyUtil ★920 - 高仿淘宝微信等热门APP通知视图 https://github.com/halysongoncalves/Pugnotification ★683 - 通过一行代码实现通知...
Android 各类优秀依赖库 等各位砖友来搬
as89751的博客
09-03 2945
有很多类型的开源库 希望能够帮助到您 抽屉菜单 MaterialDrawer ★7337 - 安卓抽屉效果实现方案 Side-Menu.Android ★3865 - 创意边侧菜单 FlowingDrawer ★1744 - 向右滑动流动抽屉效果 SlidingRootNav ★1338 - 仿DrawerLayout的ViewGroup FantasySlide ★1049...
Android使用Kotlin加协程实现文本打字机效果
Mark_CHYL的博客
11-29 850
文字现在效果自己脑补：头疼，产品提了个需求，要求富文本展示，欧克好了！过了几天又要求实现打字机效果。
Android Studio 实现打字效果
深柒的博客
06-23 1485
所谓的打字效果就是将一个字符串一个一个的字符输出到屏幕上，实现代码如下： import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.os.Handler; import android.os.Looper; import android.os.Message; import android.widget.TextView; import java.util.Timer; impo.
Android打字机动画,Android 打字机效果
weixin_36441329的博客
05-28 453
效果图如下：会有打字声音的哦！关键代码分析：private void initView() {release();mAnimatorTypeText = new ValueAnimator();mAnimatorTypeText.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {@Overridepublic void on...
Android最实用TextView文字逐个打出效果
薄荷记账
12-02 4957
对于文字逐个打出效果，我们一下子想到的做法可能都是弄一个for循环，不断更改文本内容。 这法子表面看起来可以，但实际实用起来问题多多，比如对于多行居中对齐的文本，打出效果就不是渐进出来，因为受到对齐和换行的影响，随着文字增多，文本布局会不断变化。
Android打字机动画,Android自定义View实现打字机效果
weixin_36073392的博客
05-28 400
一、先来看看效果演示二、实现原理：这个其实不难实现，通过一个定时器不断调用TextView的setText就行了，在setText的时候播放打字的音效。具体代码如下：import java.util.Timer;import java.util.TimerTask;import android.content.Context;import android.media.MediaPlayer;imp...
移动开发----Android模仿打字机效果的自定义View实现
Wayne的博客
07-14 1521
前言   在做splash界面的时候，需要做类似于打字机打字的效果，字一个一个地蹦出来，显示每一个字都带有打字的声音。 效果演示 实现原理：   这个其实不难实现，通过一个定时器不断调用TextView的setText就行了，在setText的时候播放打字的音效。具体代码如下： import java.util.Timer; import java.util.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值