android 逐字动画,Android实现文本逐字显示View(类似rpg游戏人物对话,文本逐字显示)...
前面好多篇文章都是Android Studio、源码编译、ndk等相关教程,今天敲一敲代码,不然都生锈了哈_。
来个古装动画美图,缓解大家疲劳的眼睛...(话说有木有人知道这是谁???)
Paste_Image.png
这是一个类似rpg游戏人物对话,文本逐字显示的view,先上效果图,不然大家都没有兴趣看下去,嘿嘿。
Demo地址:github(喜欢的可以运行看看)
showText3.gif
注:我录制的gif是不是很清晰,想知道我用的是什么工具制作的吗?_ (评论中有方法喔)
思路:想让汉字、英文、数字、符号等逐个显示,首先想到的是字符串处理,写一个工具类拆分汉字、英文、数字、符号等,然后就是应用到Android的View上了,View上的实现其实很low,就是先使用工具类拆分一篇文本,然后将使用递归每隔300毫秒(时间可以修改)将文本画到View的Canvas上;大体思路就是这样。
注:不知道有没有已经造好轮子,我在网上没找到类似的。如果大家看过类似的又比较优秀的实现,麻烦在评论里发给我哈。
1.首先写字符串工具类XTextUtils.java,拆分字符串,代码如下:
/**
* Created by zhangyipeng on 16/3/16.
*/
public class XTextUtils {
private static final String TAG = "XTextUtils";
public static ArrayList getContentList(String content) {
ArrayList list = new ArrayList<>();
String s = "";
String n = "";
int sn = 0;
content+=" ";
int len = (content).length();
for (int i = 0; i < len; i++) {
char c = content.charAt(i);
char c_1 = ' ';
if(i>=1) {
c_1 = content.charAt(i - 1);
}
if (isEnglish(c + "") || (isEnglish(c_1+"") && (c+"").equals("'"))) {
s += c;
sn = 1;
}else if (isNumber(c + "") || (isNumber(c_1+"") && (c+"").equals("."))) {
n += c;
sn = 2;
} else {
if (!s.equals("") && !n.equals("") & sn==1) {
list.add(n+s);
}else if (!s.equals("") && !n.equals("") & sn==2) {
list.add(s+n);
}else if (!s.equals("") && n.equals("")) {
list.add(s);
}else if (!n.equals("") && s.equals("")) {
list.add(n);
}
list.add(c + "");
sn = 0;
n = "";
s = "";
}
}
return list;
}
public static boolean isEnglish(String s) {
Pattern p = Pattern.compile("^[a-zA-Z]*$");
Matcher m = p.matcher(s);
if (m.matches()) {
return true;
} else {
return false;
}
}
public static boolean isNumber(String s) {
Pattern p = Pattern.compile("^[0-9]*$");
Matcher m = p.matcher(s);
if (m.matches()) {
return true;
} else {
return false;
}
}
public static boolean isChinese(String s) {
Pattern p = Pattern.compile("^[\\u4E00-\\u9FA5\\uF900-\\uFA2D]*$");
Matcher m = p.matcher(s);
if (m.matches()) {
return true;
} else {
return false;
}
}
}
我们使用网上的任意一篇文章测试,这个工具类,效果如下图:
胡|歌|,|1982|年|9|月|20|日|出|生|于|上|海|市|徐|汇|区|,|中|国|内|地|演|员|、|歌|手|、|制|片|人|。|1996|年|,|14|岁|的|胡|歌|便|成|为|上|海|教|育|电|视|台|的|小|主|持|人|,|2001|年|考|入|上|海|戏|剧|学|院|表|演|系|。|2005|年|因|在|电|视|剧|《|仙|剑|奇|侠|传|》|中|成|功|塑|造|了|豪|爽|深|情|的|“|李|逍|遥|”|一|角|而|成|名|,|并|演|唱|插|曲|《|六|月|的|雨|》|《|逍|遥|叹|》|。|2009|年|在|“|80|后|新|生|代|娱|乐|大|明|星|”|评|选|中|获|封|“|四|大|小|生|”|之|一|。|
|First| |Flight|
|Mr|.| |Johnson| |had| |never| |been| |up| |in| |an| |aerophane| |before| |and| |he| |had| |read| |a| |lot| |about| |air| |accidents|,| |so| |one| |day| |when| |a| |friend| |offered| |to| |take| |him| |for| |a| |ride| |in| |his| |own| |small| |phane|,| |Mr|.| |Johnson| |was| |very| |worried| |about| |accepting|.| |Finally|,| |however|,| |his| |friend| |persuaded| |him| |that| |it| |was| |very| |safe|,| |and| |Mr|.| |Johnson| |boarded| |the| |plane|.|
|His| |friend| |started| |the| |engine| |and| |began| |to| |taxi| |onto| |the| |runway| |of| |the| |airport|.| |Mr|.| |Johnson| |had| |heard| |that| |the| |most| |dangerous| |part| |of| |a| |flight| |were| |the| |take|-|off| |and| |the| |landing|,| |so| |he| |was| |extremely| |frightened| |and| |closed| |his| |eyes|.|
|After| |a| |minute| |or| |two| |he| |opened| |them| |again|,| |looked| |out| |of| |the| |window| |of| |the| |plane|,| |and| |said| |to| |his| |friend|,| |"|Look| |at| |those| |people| |down| |there|.| |They| |look| |as| |small| |as| |ants|,| |don't| |they|?|"|
|"|Those| |are| |ants|,|"| |answered| |his| |friend|.| |"|We're| |still| |on| |the| |ground|.|"| |
Paste_Image.png
2.好了下面开始自定义View类的coding了,代码如下:
注:如果直接使用canvas.drawText()的话,很难根据屏幕的宽度自动换行,还好Andorid为我们提供了StaticLayout类,使用它可以轻松的实现文本自动换行,以及行间距、对其方式(居左对齐、居中对其、居右对齐)等。
/**
* Created by zhangyipeng on 16/3/16.
*/
public class XTextView extends View {
private TextPaint textPaint;
private float density;
private String textContent;
private int textColor;
private String textAlignment;
private float textSize;
private float textSpacingAdd;
private float textSpacingMult;
public XTextView(Context context) {
this(context, null, 0);
}
public XTextView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public XTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.XTextView);
textContent = a.getString(R.styleable.XTextView_textContent);
textColor = a.getColor(R.styleable.XTextView_textColor, Color.BLACK);
textAlignment = a.getString(R.styleable.XTextView_textXAlignment);
textSize = a.getDimension(R.styleable.XTextView_textSize, 20);
textSpacingAdd = a.getFloat(R.styleable.XTextView_textSpacingAdd, 0.0F);
textSpacingMult = a.getFloat(R.styleable.XTextView_textSpacingMult, 1.0F);
init();
}
public void setTextSize(float textSize) {
this.textSize = textSize;
}
public void setTextSpacingAdd(float textSpacingAdd) {
this.textSpacingAdd = textSpacingAdd;
}
public void setTextSpacingMult(float textSpacingMult) {
this.textSpacingMult = textSpacingMult;
}
public void setTextColor(int textColor) {
this.textColor = textColor;
}
public void setTextAlignment(String textAlignment) {
this.textAlignment = textAlignment;
}
public void setTextContent(final String content) {
new Thread(){
@Override
public void run() {
super.run();
contents = XTextUtils.getContentList(content);
}
}.run();
}
private ArrayList contents;
private void init() {
density = getResources().getDisplayMetrics().density;
textPaint = new TextPaint();
textPaint.setColor(textColor);
textPaint.setTextSize(textSize);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
drawText(canvas);
}
private int cnt = 0;
private String totalText = "";
private void drawText(Canvas canvas) {
if (cnt >= contents.size()) {
return;
}
totalText += contents.get(cnt);
StaticLayout layout = null;
if (textAlignment.equals("normal")) {
//textPaint(TextPaint 类型)设置了字符串格式及属性的画笔,240为设置画多宽后换行,后面的参数是对齐方式及行间距
layout = new StaticLayout(totalText, textPaint, getWidth() - (int) (20 * density), Layout.Alignment.ALIGN_NORMAL, textSpacingMult, textSpacingAdd, true);
} else if (textAlignment.equals("center")) {
layout = new StaticLayout(totalText, textPaint, getWidth() - (int) (20 * density), Layout.Alignment.ALIGN_CENTER, textSpacingMult, textSpacingAdd, true);
} else if (textAlignment.equals("opposite")) {
layout = new StaticLayout(totalText, textPaint, getWidth() - (int) (20 * density), Layout.Alignment.ALIGN_OPPOSITE, textSpacingMult, textSpacingAdd, true);
}
//从 (10,10)的位置开始绘制
canvas.translate(10 * density, 10 * density);
layout.draw(canvas);
cnt++;
startText();
}
public void startText() {
if (cnt != contents.size()) {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
invalidate();
}
}, time);
}
}
private long time = 200;
public void setDelayPlayTime(long time) {
this.time = time;
}
}
3.接下来就是调用了,运行了,如下图
layout文件如下
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.zhangyipeng.graduallyshowtext.TargetActivity">
android:id="@+id/xtv"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:textXAlignment="normal"
app:textColor="#ff003b"
app:textSize="20sp"
app:textContent="你好"
app:textSpacingMult="1.5"
app:textSpacingAdd="0.0"
/>
Paste_Image.png
4.运行效果如下(再贴一次哈):
showText3.gif
Demo地址:github
android 逐字动画,Android实现文本逐字显示View(类似rpg游戏人物对话,文本逐字显示)...相关推荐
- com.android.rrpgdemo,Android实现文本逐字显示View(类似rpg游戏人物对话,文本逐字显示)...
8种机械键盘轴体对比 本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 前面好多篇文章都是Android Studio.源码编译.ndk等相关教程,今天敲一敲代码,不然都生锈了哈^_^. 来个 ...
- android 字体 动画,android 对绘制的文本添加动画
场景: 存在较多绘制内容的区域需要某些动画效果, 需要尽量少修改视图的绘制方法,做到动画与绘制分离. 看个简单例子: image 我在一个视图上绘制了一行文字,先看一下绘制部分的代码: public ...
- android decorview动画,Android窗口机制(二)Window,PhoneWindow,DecorView,setContentView源码理解...
Android窗口机制系列 前篇文章中出现了PhoneWindow,DecorView这些类,如果是第一次见过的话,肯定会觉得陌生.这篇文章主要跟大家讲解Window,PhoneWindow,Deco ...
- android打印动画,Android实用View系列------TextView实现打印机效果
在审美疲劳的今天,如何能开发出一款应用让用户耳目一新呐,适当的动画特效能为你的APP加分不少,这一点在海外的APP上表现颇为明显.今天为大家带来一篇实用的自定义view,就是是TextView实现文字 ...
- android 飞机动画,Android实现纸飞机的简单操作
在项目中,我们要求做一个纸飞机的功能:就是当打开这个界面时,会有4架纸飞机从屏幕左侧飞入,然后到达自己的位置坐上下浮动,同时云彩也不断地从屏幕右侧飘到屏幕左侧.当你点击其中一个纸飞机时,这个纸飞机先向 ...
- android 揭示动画,Android进阶设计 | 使用揭露动画(Reveal Effect)做一个丝滑的Activity转场动画...
提笔之际(附总体思路) 最近跟几个小伙伴在实践一个项目,考虑到界面效果,我们决定使用揭露动画作为Activity的转场动画. 这里主要是我负责这部分的实现. 话说之前是没接触过的,关于具体的实现跟大体 ...
- android scrollview 动画,Android ScrollView实现下拉弹回动画效果
这里设计一个自定义View,继承了ScrollView,实现可以下拉里面的内容,松手后画面弹回,这个自定义的View可以当做ScrollView来使用. 一般设计时的应用效果: 一.自定义View的设 ...
- android togglebutton 动画,Android控件笔记——多状态按钮ToggleButton
1.什么是ToggleButton: ToggleButton有两种状态:选中状态和未选中状态,并且需要为不同的状态设置不同的显示文本. 2.ToggleButton属性: android:check ...
- android偏移动画,Android新手开发之旅-Android动画之位移动画
本帖最后由 liu 于 2018-12-27 16:02 编辑 TranslateAnimation位移动画 实现有两种方式: 一.xml+java代码 在res下新建anim文件夹,在res/ani ...
最新文章
- 程序员 专属的新年祝福原来是这样的! (附中奖名单)
- Linux下通过txt文件导入数据到MySQL数据库
- python可以做什么有趣的东西-Python 里itchat 模块能实现什么有趣的东西?
- linux命令之修改系统允许进程打开文件描述符限制-ulimit
- Elasticsearch 简介
- golang字符串类型及使用细节
- RDD基本转换操作:zipWithIndex、zipWithUniqueId
- bzoj3626:[LNOI2014]LCA
- Struts 2读书笔记-----使用Struts 2的输入校验
- Qt部件学习之-烧鹅
- Bailian2888 字符串中的数字【字符串】
- 结束SpringMVC
- 新产品、新团队、新技术
- $(document).ready(function(){}),$().ready(function(){})和$(function(){})三个有区别么
- 十年,MongoDB从一片小绿叶长成一颗大树
- 2021ACA世界大赛中国赛区完美收官,创意设计收获百万级关注
- python英文字符频率统计_Python中怎样统计英文文本中的字母频次?
- QTextEdit设计的几个知识点
- connection activation faild
- 【数论】狄利克雷卷积
热门文章
- STM32F10xxx中文板参考手册PDF(内有英文版链接)
- 外媒:英特尔计划拍卖8500项专利 包括部分5G蜂窝标准专利
- Java学习:IO流篇(多种流的总结)
- 2021年中式烹调师(初级)考试题及中式烹调师(初级)作业模拟考试
- oracle中把一个表中的数据更新到新表中
- 用了VS2022,你可能再也回不去旧版!
- HttpClient 模拟登录手机版新浪微博
- Leetcode 417 题 太平洋大西洋水流问题
- ********随便看看**********
- EDAS发布单工作原理及问题排查