【移动应用开发技术】教你如何实现 Android TextView 文字轮播效果

【移动应用开发技术】教你如何实现AndroidTextView文字轮播效果

效果图：实现思路：1.ViewAnimator思路使用ViewAnimator自身特性，对期中的子view实现动画切换2.自定义viewGroup思路在这个思路下，我们自定义一个容器，继承FrameLayout，根据数据数量自己new相应数量的itemView出来加入FrameLayout，动画是通过对当前itemView做一个出去的佛纳甘话，同时对下一个itemView做一个进入动画，使用handle实现延迟轮换3.ViewFlipper思路ViewFlipper思路和ViewAnimator一样，不过ViewFlipper使用上更灵活，这里我们根据数据流量动态往ViewFlipper里添加itemView4.自定义textView思路其实这个思路也好理解，我们继承textView，然后在onDraw绘制中自己话文字，自己做动画，动画的思路是先把上一个文字上移到顶，然后再绘制下一个文字，从下面开始一直移动到中间ViewAnimator思路ViewAnimator是个viewGroup，可以实现动画切换其中子view的效果。在xml布局种，我们把ViewAnimator当一个容器，里面写轮播的view，写多少个view就有多少个轮播，然后设置切换的动画，用handle做定时延迟轮播，调ViewAnimator.onNext就可以切换到下一个view1.先在layoutxml中声明布局层级结构：<ViewAnimator

android:layout_width="match_parent"

android:layout_height="200dp">

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="欢迎"/>

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="测试"/>

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="本程序"/>

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="!!!!!"/>

<TextView

android:layout_width="match_parent"

android:layout_height="match_parent"

android:text="hello,world"/>

</ViewAnimator>2.代码种设置切换动画viewAnimator.setOutAnimation(this,R.anim.slide_out_up);

viewAnimator.setInAnimation(this,R.anim.slide_in_down);3.handle延迟循环显示下一个publicvoidshowNext(){

viewAnimator.showNext();

}

publicvoidshowPrevious(){

viewAnimator.showPrevious();

}

Handlerhandler=newHandler(){

@Override

publicvoidhandleMessage(Messagemsg){

super.handleMessage(msg);

if(autoPlayFlag){

showNext();

}

handler.sendMessageDelayed(newMessage(),TIME_INTERVAL);

}

};我们在需要的位置发送handle事件就可以了使用ViewAnimator有点和确定同样明显自定义viewGroup思路在这个思路下，我们自定义一个容器，继承FrameLayout，根据数据数量自己new相应数量的itemView出来加入FrameLayout，动画是通过对当前itemView做一个出去的佛纳甘话，同时对下一个itemView做一个进入动画，使用handle实现延迟轮换1.在设置数据时添加相应数量的itemView进去publicvoidsetNoticeList(List<String>list){

//创建TextView

for(inti=0;i<list.size();i++){

TextViewtextView=createTextView(list.get(i));

mNoticeList.add(textView);

addView(textView);

}

//显示第一条公告

mCurrentNotice=0;

mNoticeList.get(mCurrentNotice).setVisibility(VISIBLE);

//启动轮播

start();

}

privateTextViewcreateTextView(Stringtext){

if(mLayoutParams==null){

mLayoutParams=newLayoutParams(

LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);

mLayoutParams.gravity=Gravity.CENTER_VERTICAL;

}

TextViewtextView=newTextView(getContext());

textView.setLayoutParams(mLayoutParams);

textView.setSingleLine();

textView.setEllipsize(TextUtils.TruncateAt.END);

textView.setTextColor(mTextColor);

textView.setVisibility(GONE);

textView.setText(text);

//如果有设置字体大小，如果字体大小为null。

if(mTextSize>0){

textView.setTextSize(TypedValue.COMPLEX_UNIT_PX,mTextSize);

}

returntextView;

}2.在handle里面启动itemView切换的动画classNoticeRunnableimplementsRunnable{

@Override

publicvoidrun(){

//隐藏当前的textView

TextViewcurrentView=mNoticeList.get(mCurrentNotice);

currentView.setVisibility(GONE);

if(mExitAnimSet!=null){

currentView.startAnimation(mExitAnimSet);

}

mCurrentNotice++;

if(mCurrentNotice>=mNoticeList.size()){

mCurrentNotice=0;

}

//显示下一个TextView

TextViewnextView=mNoticeList.get(mCurrentNotice);

nextView.setVisibility(VISIBLE);

if(mEnterAnimSet!=null){

nextView.startAnimation(mEnterAnimSet);

}

mHandler.postDelayed(this,mNoticeDuration);

}

}

privatevoidcreateEnterAnimation(){

mEnterAnimSet=newAnimationSet(false);

TranslateAnimationtranslateAnimation=

newTranslateAnimation(0,0,0,0,TranslateAnimation.RELATIVE_TO_PARENT,1f,

TranslateAnimation.RELATIVE_TO_SELF,0f);

AlphaAnimationalphaAnimation=newAlphaAnimation(0f,1f);

mEnterAnimSet.addAnimation(translateAnimation);

mEnterAnimSet.addAnimation(alphaAnimation);

mEnterAnimSet.setDuration(DEFAULT_ANIMATION_DURATION);

}

privatevoidcreateExitAnimation(){

mExitAnimSet=newAnimationSet(false);

TranslateAnimationtranslateAnimation=

newTranslateAnimation(0,0,0,0,TranslateAnimation.RELATIVE_TO_SELF,0f,

TranslateAnimation.RELATIVE_TO_PARENT,-1f);

AlphaAnimationalphaAnimation=newAlphaAnimation(1f,0f);

mExitAnimSet.addAnimation(translateAnimation);

mExitAnimSet.addAnimation(alphaAnimation);

mExitAnimSet.setDuration(DEFAULT_ANIMATION_DURATION);

}这样写最练手，但是我是不推荐这样干的，基础差一些的容易出问题，而且google给我们提供了一些实现，我们何必非的自己实现呢，这样写会花点时间ViewFlipper思路ViewFlipper思路像是上面1和2的结合，ViewFlipper对动画的控制更优秀一些，我们往ViewFlipper里面动态添加itemView，基本都是这个思路，区别是使用的容器不同这里推荐一个成熟的库：这个库非常完善了，也能满足大家的常用需求，是可以拿来直接用的，大家看图就明白了他这里自定义了一个ViewGroup继承自RelativeLayout，在view初始化时添加了一个ViewFlipper进来，之后操作的都是这个ViewFlipper了1.自定义ViewGroup初始化时添加了ViewFlipper/**初始化控件*/

privatevoidinit(Contextcontext,AttributeSetattrs,intdefStyleAttr){

mViewFlipper=newViewFlipper(getContext());//new一个ViewAnimator

mViewFlipper.setLayoutParams(newLayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.MATCH_PARENT));

addView(mViewFlipper);

startViewAnimator();

//设置点击事件

mViewFlipper.setOnClickListener(newOnClickListener(){

@Override

publicvoidonClick(Viewv){

intposition=mViewFlipper.getDisplayedChild();//当前显示的子视图的索引位置

if(mListener!=null){

mListener.onItemClick(mDatas.get(position),position);

}

}

});2.根据数据添加itemView/**设置数据集合*/

publicvoidsetDatas(List<String>datas){

this.mDatas=datas;

if(DisplayUtils.notEmpty(mDatas)){

mViewFlipper.removeAllViews();

for(inti=0;i<mDatas.size();i++){

TextViewtextView=newTextView(getContext());

textView.setText(mDatas.get(i));

//任意设置你的文字样式，在这里

textView.setSingleLine(isSingleLine);

textView.setTextColor(mTextColor);

textView.setTextSize(mTextSize);

textView.setGravity(mGravity);

mViewFlipper.addView(textView,i);//添加子view,并标识子view位置

}

}

}3.添加动画/**

*设置进入动画和离开动画

*

*@paraminAnimResId进入动画的resID

*@paramoutAnimResID离开动画的resID

*/

privatevoidsetInAndOutAnimation(@AnimResintinAnimResId,@AnimResintoutAnimResID){

AnimationinAnim=AnimationUtils.loadAnimation(getContext(),inAnimResId);

inAnim.setDuration(animDuration);

mViewFlipper.setInAnimation(inAnim);

AnimationoutAnim=AnimationUtils.loadAnimation(getContext(),outAnimResID);

outAnim.setDuration(animDuration);

mViewFlipper.setOutAnimation(outAnim);

}之后就是用handle来做延迟循环，上面复制好几遍了，这里是在不想再复制了，打个源码很简单，大家直接看。吐槽下：这个库多了一道手，多加了一个视图层级出来，其实没必要在顶层加一个viewGroup了，直接继承ViewFlipper可好自定义textView思路不继承textView我们直接继承view都可以，只要不支持wrap_content就好办。核心就是在onDraw中实现绘制的动画。例子这里没有使用ValueAnimator动画，而是1个px变化就重绘一次，性能上欠考虑。1.根据文字，确定文字出屏幕的零界点//获取文字矩阵的尺寸

RectindexBound=newRect();

mPaint.getTextBounds(text,0,text.length(),indexBound);

//文字居中绘制Y的坐标

my=mHeight/2