常用控件应用之文本框（TextView）特效
1.TextView之跑马灯效果
android:ellipsize属性使用之跑马灯效果
android:ellipsize
设置当文字过长时,该控件该如何显示。有如下值设置：
"start"—–省略号显示在开头
"end"——省略号显示在结尾
"middle"—-省略号显示在中间
"marquee" ——以跑马灯的方式显示(动画横向向左移动)
布局文件中给TextView加入如下属性即可:
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:focusable="true"
android:focusableInTouchMode="true"
<!--
布局文件中设置如下（完整代码稍后给出）
-->
<TextView
android:id="@+id/marquee_effect"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"
android:singleLine="true"
android:text="@string/marquee_effect" />
如果一个页面想实现多个TextView同时跑马灯效果解决方案:给要跑动的textview加上如下代码就行了
textview.setSelected(true);
2.TextView之阴影效果（可在布局文件里加入如下属性进行设置也可通过程序设置）
android:shadowDx——设置阴影横向坐标开始位置(相对于文本内容)
android:shadowDy——设置阴影纵向坐标开始位置(相对于文本内容)
android:shadowRadius——设置阴影的半径
android:shadowColor——指定文本阴影的颜色
//关键代码（完整代码稍后给出） textview.setShadowLayer(2.5f, 15, -10, 0xff00ff00);
3.html标签设置样式效果
补充：
textView.setAutoLinkMask(Linkify.WEB_URLS);// 当文本内容中包含超链接格式的文本时,自动转换成超链接样式,点击会自动跳转到指定的网页
textView.setAutoLinkMask(Linkify.PHONE_NUMBERS);//自动转手机号码点击它可进入系统拨号界面
textView.setAutoLinkMask(Linkify.EMAIL_ADDRESSES);//自动转邮件地址点击它可发送邮件(要提前设置好自己的电子邮件)
textView.setAutoLinkMask(Linkify.MAP_ADDRESSES);//自动转街道地址点击它可查看位置(前提已安装了google地图)
textView.setAutoLinkMask(Linkify.ALL);//包括上面4种情况
关键代码（完整代码稍后给出）：
TextView tv = (TextView) findViewById(R.id.fromhtml_effect);
StringBuffer sb = new StringBuffer();
sb.append("<h1><font color='#ff0000'>Html标签方式:</font></h1>");
sb.append("<h6><b><i><font color='#00ff00'><a href=''>");
sb.append(getString(R.string.fromhtml_effect));
sb.append("</a></font></i></b></h6>");
tv.setText(Html.fromHtml(sb.toString()));
tv.setMovementMethod(LinkMovementMethod.getInstance());// 这句很重要,使超链接<a href>起作用
4.TextView之动画效果（rotate旋转、alpha透明度、scale缩放、translate移动）
实现动画需要在res/anim目录下新建对应的xml文件（稍后给出）
关键代码（完整代码稍后给出）：
TextView tv = null;
// TextView旋转 动画效果
tv = (TextView) findViewById(R.id.rotate);
Animation mAnimationRight = AnimationUtils.loadAnimation(
TextViewEffectActivity.this, R.anim.rotate);
tv.setAnimation(mAnimationRight);
// TextView透明度动画效果
tv = (TextView) findViewById(R.id.alpha);
mAnimationRight = AnimationUtils.loadAnimation(
TextViewEffectActivity.this, R.anim.alpha);
tv.setAnimation(mAnimationRight);
// TextView缩放动画效果
tv = (TextView) findViewById(R.id.scale);
mAnimationRight = AnimationUtils.loadAnimation(
TextViewEffectActivity.this, R.anim.scale);
tv.setAnimation(mAnimationRight);
// TextView移动动画效果
tv = (TextView) findViewById(R.id.translate);
mAnimationRight = AnimationUtils.loadAnimation(
TextViewEffectActivity.this, R.anim.translate);
tv.setAnimation(mAnimationRight);
5.TextView之霓虹灯效果
采用timer+TimerTask+Handler实现
主要用到SpannableStringBuilder对象
关键代码（完整代码稍后给出）：
// 霓虹灯效果(此段代码会使"光"变红色)
String wholeContent = "欢迎光临";
SpannableStringBuilder spannable = new SpannableStringBuilder(
wholeContent);
spannable.setSpan(new ForegroundColorSpan(Color.RED), 2,
3, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); // 设置指定位置文字的颜色(索引0开始)
6.TextView之包含图片的效果
实现步骤(1.构建ImageGetter;2.直接使用append进行追加)
关键代码（完整代码稍后给出）：
TextView tv = (TextView) findViewById(R.id.image_effect);
tv.setText(R.string.image_effect);
// 通过HTML标记获得res目录下指定的图片
ImageGetter imageGetter = new ImageGetter() {
@Override
public Drawable getDrawable(String source) {
int id = Integer.parseInt(source);
// 根据id从资源文件中获取图片对象
Drawable d = getResources().getDrawable(id);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
return d;
}
};
tv.append(Html.fromHtml("<img src='" + R.drawable.log + "'/>",
imageGetter, null));
上图：
目录结构如下：
完整代码：
1>清单文件AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.bravestarr.app.textvieweffect"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk android:minSdkVersion="7" />
<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".TextViewEffectActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
2>main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<!--
android:ellipsize属性使用之跑马灯效果
android:ellipsize
设置当文字过长时,该控件该如何显示。有如下值设置：
"start"—–省略号显示在开头
"end"——省略号显示在结尾
"middle"—-省略号显示在中间
"marquee" ——以跑马灯的方式显示(动画横向向左移动)
关键代码:
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:focusable="true"
android:focusableInTouchMode="true"
如果一个页面想实现多个TextView同时跑马灯效果解决方案:代码中给要跑动的textview加上textview.setSelected(true);就行了
-->
<TextView
android:id="@+id/marquee_effect"
android:layout_width="100dip"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:ellipsize="marquee"
android:focusable="true"
android:focusableInTouchMode="true"
android:marqueeRepeatLimit="marquee_forever"
android:singleLine="true"
android:text="@string/marquee_effect" />
<!--
TextView之阴影效果
android:shadowDx——设置阴影横向坐标开始位置(相对于文本内容)
android:shadowDy——设置阴影纵向坐标开始位置(相对于文本内容)
android:shadowRadius——设置阴影的半径
android:shadowColor——指定文本阴影的颜色
-->
<TextView
android:id="@+id/shadow_effect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true" />
<!-- html设置样式效果 -->
<TextView
android:id="@+id/fromhtml_effect"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true" />
<!-- 动画效果 -->
<TextView
android:id="@+id/alpha"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/alpha_animation_effect"
/>
<TextView
android:id="@+id/rotate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/rotate_animation_effect"/>
<TextView
android:id="@+id/scale"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/scale_animation_effect"/>
<TextView
android:id="@+id/translate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/translate_animation_effect"/>
<!-- 霓虹灯效果 -->
<TextView
android:id="@+id/neonlights_effect"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<!-- 包含图片的效果 -->
<TextView
android:id="@+id/image_effect"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
3>strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">TextView效果集锦</string>
<string name="marquee_effect">跑马灯效果</string>
<string name="shadow_effect">阴影效果</string>
<string name="fromhtml_effect">fromhtml设置效果</string>
<string name="alpha_animation_effect">文本透明度动画效果</string>
<string name="rotate_animation_effect">文本旋转动画效果</string>
<string name="scale_animation_effect">文本缩放动画效果</string>
<string name="translate_animation_effect">文本移动动画效果</string>
<string name="neonlights_effect">霓虹灯效果</string>
<string name="image_effect">包含图片的TextView效果</string>
</resources>
4>alpha.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="500"
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:repeatCount="10"/>
</set>
<!--
fromAlpha:开始时透明度
toAlpha： 结束时透明度
duration：动画持续时间
应用:
例1:淡出效果
android:fromAlpha="1.0"
android:toAlpha="0.0"
例2:淡入效果
android:fromAlpha="0.0"
android:toAlpha="1.0"
-->
5>rotate.xml
<?xml version="1.0" encoding="utf-8"?>
<set>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="500"
android:fromDegrees="0"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="10"
android:toDegrees="-90" />
</set>
<!--
fromDegrees 动画开始时的角度
toDegrees 动画结束时物件的旋转角度,正代表顺时针
pivotX 属性为动画相对于物件的X坐标的开始位置
pivotY 属性为动画相对于物件的Y坐标的开始位置
duration：动画持续时间
-->
6>scale.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<scale
android:interpolator= "@android:anim/decelerate_interpolator"
android:fromXScale="0.0"
android:toXScale="1.5"
android:fromYScale="0.0"
android:toYScale="1.5"
android:pivotX="50%"
android:pivotY="50%"
android:startOffset="0"
android:duration="5000"
android:repeatCount="3"
android:repeatMode="reverse"
/>
</set>
<!--
interpolator指定动画插入器，常见的有加速减速插入器accelerate_decelerate_interpolator，加速插入器accelerate_interpolator，减速插入器decelerate_interpolator。
fromXScale,fromYScale，动画开始前X,Y的缩放，0.0为不显示，1.0为正常大小
toXScale，toYScale，动画最终缩放的倍数，1.0为正常大小，大于1.0放大
pivotX，pivotY动画起始位置，相对于屏幕的百分比,两个都为50%表示动画从屏幕中间开始
startOffset，动画多次执行的间隔时间，如果只执行一次，执行前会暂停这段时间，单位毫秒
duration，一次动画效果消耗的时间，单位毫秒，值越小动画速度越快
repeatCount，动画重复的计数，动画将会执行该值+1次
repeatMode，动画重复的模式，reverse为反向，当第偶次执行时，动画方向会相反。restart为重新执行，方向不变
-->
7>translate.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="320"
android:toXDelta="0"
android:fromYDelta="480"
android:toYDelta="0"
android:duration="5000"
android:repeatCount="10" />
</set>
<!--
fromXDelta,fromYDelta起始时X，Y座标,屏幕右下角的座标是X:320,Y:480
toXDelta，toYDelta动画结束时X,Y的座标
-->
8>TextViewEffectActivity.java
package com.bravestarr.app.textvieweffect;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Timer;
import java.util.TimerTask;
import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.text.Html;
import android.text.Html.ImageGetter;
import android.text.method.LinkMovementMethod;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.TextView;
import com.bravestarr.app.utils.SpannableStringBuilderUtils;
/**
* @Author BraveStarr
* @QQ 1733259520
* @Blog ,http://blog.sina.com.cn/
* wanghubravestarr
*
*/
public class TextViewEffectActivity extends Activity {
private static final int[] colors = new int[] { Color.RED, Color.GRAY,
Color.GREEN, Color.LTGRAY, Color.BLUE };
private int currColor = 0;// 当前第一个文字的颜色
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
TextView tv = null;
// 跑马灯效果文本框
tv = (TextView) findViewById(R.id.marquee_effect);
tv.setTextSize(28);
tv.setTextColor(0xffd0eeee);
tv.setSelected(true);// 要实现界面上有多个跑马灯时需要加入这句
// 阴影效果
tv = (TextView) findViewById(R.id.shadow_effect);
tv.setTextSize(28);
tv.setTextColor(0xffd0eeee);
tv.setText(R.string.shadow_effect);
tv.setShadowLayer(2.5f, 15, -10, 0xff00ff00);
// HTML标签实现效果
tv = (TextView) findViewById(R.id.fromhtml_effect);
// 当文本内容中包含超链接格式的文本时,自动转换成超链接样式,点击会自动跳转到指定的网页,文本框还能实现自动转手机号码/邮件/地图
// Linkify.PHONE_NUMBERS为自动转手机号码点击它可进入系统拨号界面
// Linkify.EMAIL_ADDRESSES为自动转邮件地址点击它可发送邮件(要提前设置好自己的电子邮件)
// Linkify.MAP_ADDRESSES为自动转街道地址点击它可查看位置(前提已安装了google地图)
// Linkify.ALL包括WEB_URLS、EMAIL_ADDRESSES、PHONE_NUMBERS和MAP_ADDRESSES
// tv.setAutoLinkMask(Linkify.WEB_URLS);
StringBuffer sb = new StringBuffer();
sb.append("<h1><font color='#ff0000'>Html标签方式:</font></h1>");
sb.append("<h6><b><i><font color='#00ff00'><a href=''>");
sb.append(getString(R.string.fromhtml_effect));
sb.append("</a></font></i></b></h6>");
tv.setText(Html.fromHtml(sb.toString()));
tv.setMovementMethod(LinkMovementMethod.getInstance());// 这句很重要,使超链接<a href>起作用
// TextView旋转 动画效果
tv = (TextView) findViewById(R.id.rotate);
Animation mAnimationRight = AnimationUtils.loadAnimation(
TextViewEffectActivity.this, R.anim.rotate);
tv.setAnimation(mAnimationRight);
// TextView透明度动画效果
tv = (TextView) findViewById(R.id.alpha);
mAnimationRight = AnimationUtils.loadAnimation(
TextViewEffectActivity.this, R.anim.alpha);
tv.setAnimation(mAnimationRight);
// TextView缩放动画效果
tv = (TextView) findViewById(R.id.scale);
mAnimationRight = AnimationUtils.loadAnimation(
TextViewEffectActivity.this, R.anim.scale);
tv.setAnimation(mAnimationRight);
// TextView移动动画效果
tv = (TextView) findViewById(R.id.translate);
mAnimationRight = AnimationUtils.loadAnimation(
TextViewEffectActivity.this, R.anim.translate);
tv.setAnimation(mAnimationRight);
// 霓虹灯效果,延时1秒转第一次,从此以后每隔1秒又开始执行执行
timer.schedule(task_neon, 1000, 1000);
// 包含图片的效果(1.构建ImageGetter;2.直接使用append进行追加)
tv = (TextView) findViewById(R.id.image_effect);
tv.setText(R.string.image_effect);
// 通过HTML标记获得res目录下指定的图片
ImageGetter imageGetter = new ImageGetter() {
@Override
public Drawable getDrawable(String source) {
int id = Integer.parseInt(source);
// 根据id从资源文件中获取图片对象
Drawable d = getResources().getDrawable(id);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
return d;
}
};
tv.append(Html.fromHtml("<img src='" + R.drawable.log + "'/>",
imageGetter, null));
}
Timer timer = new Timer();
TimerTask task_neon = new TimerTask() {
public void run() {
Message message = new Message();
message.what = 1;
handler.sendMessage(message);
}
};
final Handler handler = new Handler() {
public void handleMessage(Message msg) {
switch (msg.what) {
case 1:
// 霓虹灯效果
TextView tv = (TextView) findViewById(R.id.neonlights_effect);
String neontext = getString(R.string.neonlights_effect);
int len = neontext.length();
int colorsize = colors.length;
List<Map<String, Object>> data = new ArrayList<Map<String, Object>>();
for (int i = 0; i < len; i++) {
int index = currColor + i;// 颜色索引
if (index >= colorsize)
index = index % colorsize;
Map<String, Object> target = new HashMap<String, Object>();
target.put("content", neontext.substring(i, i + 1));
target.put("color", colors[index]);
data.add(target);
}
currColor++;
if (currColor == colorsize)
currColor = 0;
tv.setText(SpannableStringBuilderUtils
.highlight(neontext, data));
break;
}
super.handleMessage(msg);
}
};
protected void onDestroy() {
if (timer != null) {
timer.cancel();
timer = null;
}
super.onDestroy();
}
}
9>SpannableStringBuilderUtils.java
package com.bravestarr.app.utils;
import java.util.List;
import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;
import android.text.Spannable;
import android.text.SpannableStringBuilder;
import android.text.style.ForegroundColorSpan;
/**
* @Author BraveStarr
* @QQ 1733259520
* @Blog ,http://blog.sina.com.cn/wanghubravestarr
*
* SpannableStringBuilder助手类
*/
public class SpannableStringBuilderUtils {
/**
* 指定内容高亮显示(此方法缺点:变色目标文字有多处匹配时效果不好)
* @param wholeContent 文本内容
* @param data Map<String, Object>数组包含"content"和"color"字段
* @return
*
* 如何使用
*
* String content = "文本框局部改变颜色"
* List<Map<String, Object>> data = new ArrayList<Map<String,Object>>();
Map<String, Object> target = null;
target = new HashMap<String, Object>();
target.put("content", "改变");//指定要改变颜色的内容
target.put("color", Color.RED);//指定颜色
data.add(target);
textview.setText(highlight(content, data));
*/
public static SpannableStringBuilder highlight(String wholeContent,
List<Map<String, Object>> data) {
SpannableStringBuilder spannable = new SpannableStringBuilder(
wholeContent);
for (Map<String, Object> targetdata : data) {
Pattern p = Pattern.compile(targetdata.get("content").toString());
Matcher m = p.matcher(wholeContent);
while (m.find()) {
spannable.setSpan(
new ForegroundColorSpan(Integer.valueOf(targetdata.get("color").toString())),
m.start(), m.end(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
}
}
return spannable;
}
/**
*
* @param wholeContent 文本内容
* @param data Map<String, Object>数组包含"start"、"end"和"color"字段
* @return
* 如何使用
*
* String content = "文本框局部改变颜色"
* List<Map<String, Object>> data = new ArrayList<Map<String,Object>>();
Map<String, Object> target = new HashMap<String, Object>();
target.put("start", "5");//指定要改变颜色的起始位置
target.put("end", "7");//指定要改变颜色的结束位置
target.put("color", Color.RED);//指定颜色
data.add(target);
textview.setText(subHighlight(content, data));
*/
public static SpannableStringBuilder subHighlight(String wholeContent,
List<Map<String, Object>> data) {
SpannableStringBuilder spannable = new SpannableStringBuilder(
wholeContent);
for (Map<String, Object> targetdata : data) {
int color = Integer.valueOf(targetdata.get("color").toString());
int start = Integer.valueOf(targetdata.get("start").toString());
int end = Integer.valueOf(targetdata.get("end").toString());
spannable.setSpan(new ForegroundColorSpan(color), start,
end, Spannable.SPAN_EXCLUSIVE_INCLUSIVE); // 设置指定位置文字的颜色(索引0开始)
}
return spannable;
}
}
附件下载：
apk安装包下载
源码打包下载
补充：连续动画实现，比如一个文本框在屏幕最底部，然后向上冒出，停留一会后，再向下移出屏幕
关键代码如下：
1.给指定的文本框设置内容（含图片）
|
2.
private TextView tip;
private int currStatus;//当前状态，UP,STAY ，或DOWN
private static final int UP = 1;//向上移动状态
private static final int STAY =2;//停留状态
private static final int DOWN = 3;//向下移动状态
private static final int UP_TIME = 2*1000;//向上移动用时
private static final int STAY_TIME = 3*1000;//到达目标后停留用时
private static final int DOWN_TIME = 2*1000;//向下移动用时
private int time;//（某）动画的运行时间
/**
* 更新移动的当前状态
*/
private void updateCurrStatus(){
if(currStatus<3){
currStatus++;
}else{
currStatus = 1;
}
}
/**
* 移动动画处理
* @param StartX
* @param StartY
* @param EndX
* @param EndY
*/
private void moveTip(int StartX,int StartY,int EndX,int EndY){
TranslateAnimation translateAnimation = new TranslateAnimation(StartX,EndX,StartY,EndY);
translateAnimation.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
updateCurrStatus();
//在动画结束时，重新启动动画
switch(currStatus){
case UP:
time=STAY_TIME;
//此处的68为tip文本框的背景图的高
moveTip(0, -68, 0, -68);
break;
case STAY:
time = DOWN_TIME;
moveTip(0, -68, 0, 0);
break;
case DOWN:
break;
}
}
});
translateAnimation.setDuration(time);
tip.startAnimation(translateAnimation);
}
3.（onCreate（）方法中）启动动画时调用如下代码
|
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
