垂直跑马灯&水平跑马灯

字体滚动效果

最近在项目中遇见了字体水平滚动&字体垂直滚动效果，借此与大家分享

  
  

   
   ㈠字体水平滚动【俗称的跑马灯效果】
  
  

  
  

   
   1、首先请看效果图：
  
  
《跑马灯效果》
2、代码实现：
<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ellipsize="marquee"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:marqueeRepeatLimit="marquee_forever"
        android:singleLine="true"
        android:textSize="30sp"
        android:textColor="@android:color/black"
        android:text="过去对错已不再重要"
        />
   
   

    
    执行步骤：
   
   

   
   

    
    1、ellipsize设置为marquee【跑马灯样式】
   
   

   
   

    
    2、设置获取焦点【这个不设置不会动】
   
   

   
   

    
    3、设置marqueeRepeatLimit播放模式marquee_forever为循环播放【依情况设置】
   
   
   
   

    
    4、singleLine设置为单行显示【如果需要】
   
   
   
   

    
    ㈡字体垂直滚动【俗称的垂直跑马灯效果】
   
   

   
   

    
    1、首先请看效果图：
   
   

《垂直切换文字效果图》
2、代码实现：
public class VerticalSlidingView extends TextSwitcher implements ViewSwitcher.ViewFactory {
    private static final String[] textContents = new String[]{"日照香炉生紫烟","遥看瀑布挂前川","飞流直下三千尺","疑似迎合落九天"};
    public static final int MSG_START_SLIP = 1;
    private Handler mHandler;
    private int num;
    private static final int TIME = 2 * 1000;
    private Handler.Callback mCallBack = new Handler.Callback(){
        @Override
        public boolean handleMessage(Message message) {
            switch (message.what){
                case MSG_START_SLIP:
                    mHandler.sendEmptyMessageDelayed(MSG_START_SLIP , TIME);
                    if(num <= textContents.length -1) {
                        setText(textContents[num++]);
                    }else{
                        num = 0;
                    }
                    break;
            }
            return false;
        }
    };

    public VerticalSlidingView(Context context){
        this(context,null);
    }

    public VerticalSlidingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mHandler = new Handler(mCallBack);
        initView();
    }

    @Override
    public View makeView() {
       TextView textView = (TextView) LayoutInflater.from(getContext()).inflate(R.layout.swith_text_view , null);
        return textView;
    }

    private void initView(){
        setFactory(this);
        /*TextView textView1 = new TextView(getContext());
        ViewGroup.LayoutParams params1 = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT , ViewGroup.LayoutParams.WRAP_CONTENT);
        textView1.setTextSize(20);
        textView1.setTextColor(Color.RED);
        textView1.setLayoutParams(params1);
        addView(textView1 , 0);
        TextView textView2 = new TextView(getContext());
        ViewGroup.LayoutParams params2 = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT , ViewGroup.LayoutParams.WRAP_CONTENT);
        textView2.setTextSize(30);
        textView2.setTextColor(Color.BLACK);
        textView2.setLayoutParams(params2);
        addView(textView2 , 1);*/
        Animation animationIn = loadAnimation(getContext() , R.anim.slide_in_top);
        Animation animationOut = AnimationUtils.loadAnimation(getContext() , R.anim.slide_out_top);
        setInAnimation(animationIn);
        setOutAnimation(animationOut);
        mHandler.sendEmptyMessageDelayed(MSG_START_SLIP,TIME);
        if(num <= textContents.length - 1) {
            setText(textContents[num++]);
        }else{
            num = 0;
        }
    }
}

 
 

  
  以上实现是不是比较简单，基本重要步骤如下：
 
 
    
    

     
     1、
     
     先设置一个只有TextView的布局，这个主要为setFactory(this)这个调用的，如果设置了这个程序会自动的去走ViewFactory中的makeView获得一个TextView对象。
    
    
    
    

     
     2、设置setOutAnimation以及setInAnimation两个切换动画。
    
    
    
    

     
     3、调用TextSwitcher的setText()来进行切换，这个源码中会自动调用getNextView来进行动画文字的切换。
    
    
    
    

     
     4、如果想要实现自动文字切换需要一个定时器【我使用的是Handler】。
    
    
***************************************************************************
  
  

   
   也许有人疑问我注释的那段代码是干吗的？这个是我在项目中遇到的一个需求，要求两个文字垂直切换时，布局位置改动，这样上面我们讲解的方法就不合适了。就必须换另一种方法。
  
  
  
  

   
   先看每次切换时，字体颜色大小改变效果图：
  
  

《垂直切换字体颜色大小改变效果图》
代码上面也有我就不复制了，直接上步骤：
1、首先不设置setFactory,这样makeView()这个方法也就无法调用了，故makeView可以return null；
2、一定要初始化两个TextView不然系统会报错，然后addView(view , index)【index 通常是0,1】
3、如果是要改变TextView切换的margin则修改
LinearLayout.LayoutParams params1 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT , LinearLayout.LayoutParams.WRAP_CONTENT);
        params1.setMargins();
 4、如果在更新数据时发现布局混乱了，则可以试用这个方法：
removeAllView()然后再addView()【在更新地方设置】
这里我一个疑问，因为每次文字切换时，都会调用getNextView按理说这里可以修改下一个展示View的布局格式，但是我尝试了不行。不知各位是否有idea，也请你们告诉我，互相学习！！！