Android自定義View實現(xiàn)縱向跑馬燈效果詳解

更新時間：2016年11月06日 14:13:28 作者：偽文藝大叔

對于跑馬燈效果在我們?nèi)粘Ｊ褂玫腶pp中還是很常見的，比如外賣app的商家公告就使用了此效果，但是它是橫向滾動的，橫向滾動多適用于單條信息；但凡涉及到多條信息的滾動展示，用縱向滾動效果會有更好的用戶體驗，今天我們通過自定義View來看看如何實現(xiàn)縱向跑馬燈效果。

首先看看效果圖(錄制的gif有點卡，真實的效果還是很流暢的)

實現(xiàn)思路

通過上面的gif圖可以得出結(jié)論，其實它就是同時繪制兩條文本信息，然后通過動畫不斷的改變兩條文本信息距離頂部的高度，以此來實現(xiàn)滾動的效果。

具體實現(xiàn)

首先定義一些要用到的屬性

<declare-styleable name="MarqueeViewStyle">  
<attr name="textSize" format="dimension" />  
<attr name="textColor" format="color" />  
<attr name="paddingLeft" format="dimension" />  
<attr name="paddingTop" format="dimension" />  
<attr name="paddingBottom" format="dimension" />  
<attr name="paddingTopBottom" format="dimension"/>  
<attr name="startDelayTime" format="integer"/> 動畫開始延遲時間
<attr name="reRepeatDelayTime" format="integer"/> 動畫重復延遲時間 
<attr name="itemAnimationTime" format="integer"/> 單個動畫的執(zhí)行時間
</declare-styleable>

接下來解析屬性值

private void init(Context context, AttributeSet attrs) {  
 TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MarqueeViewStyle);  
 mTextColor = typedArray.getColor(R.styleable.MarqueeViewStyle_textColor, Color.BLACK);  
 mTextSize = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_textSize, 45);  

 mPaddingLeft = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_paddingLeft, 15);  
 mPaddingTop = mPaddingBottom = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_paddingTopBottom, 25);  
 mPaddingTop = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_paddingTop, mPaddingTop);  
 mPaddingBottom = typedArray.getDimensionPixelSize(R.styleable.MarqueeViewStyle_paddingBottom, mPaddingBottom);  

 itemAnimationTime = typedArray.getInteger(R.styleable.MarqueeViewStyle_itemAnimationTime, 1000);  
 reRepeatDelayTime = typedArray.getInteger(R.styleable.MarqueeViewStyle_reRepeatDelayTime, 1000);  
 startDelayTime = typedArray.getInteger(R.styleable.MarqueeViewStyle_startDelayTime, 500);  
 typedArray.recycle();  

  mPaint = new Paint();  
  mPaint.setAntiAlias(true);  
  mPaint.setTextSize(mTextSize);  
  mPaint.setColor(mTextColor);  
  mPaint.setTextAlign(Paint.Align.LEFT);}

重寫onMeasure方法

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
  if(mTextArray == null || mTextArray.length == 0) {   
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
  } else {    
    int width = MeasureSpec.getSize(widthMeasureSpec);  
    int height = MeasureSpec.getSize(heightMeasureSpec);   
    ViewGroup.LayoutParams lp = getLayoutParams();    
    setMeasuredDimension(getViewWidth(lp, width), getViewHeight(lp, height));  
  }
}

數(shù)據(jù)為空時調(diào)用父類的方法，設置數(shù)據(jù)以后根據(jù)不同的布局計算寬高。

設置數(shù)據(jù)

public void setTextArray(String[] textArray) {  
  if(textArray == null || textArray.length <= 1) return;  
  mTextArray = textArray;  
  initTextRect();  
  setTextCurrentOrNextStatus(0, 1, true);  
  startAnimation();}

initTextRect()方法是計算出單個文本的高度和數(shù)組中最大文本的寬度，文本的高度用來計算繪制文本時的位置，文本的最大寬度在onMeasure()方法的時候會用到。

setTextCurrentOrNextStatus()方法設置當前的position，文本以及下一個position，文本。還有文本距離頂部的初始化高度。

startAnimation() 方法開始執(zhí)行動畫。

動畫實現(xiàn)

private void startAnimation() {  
 va = ValueAnimator.ofFloat(0, 1);  
 va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {    
 @Override    
 public void onAnimationUpdate(ValueAnimator animation) {  
   mProgress = (float) animation.getAnimatedValue();      
.   int moveOffset = (int) (mTextMoveOffset * mProgress); 
   mCurrentTextMoveMarginTop = mCurrentTextInitMarginTop - moveOffset;      
   mNextTextMoveMarginTop = mNextTextInitMarginTop - moveOffset;      
   postInvalidate();    
 }  
 });  

 va.addListener(new AnimatorListenerAdapter() {    
   @Override    
   public void onAnimationRepeat(Animator animation) {   
    va.pause();        
    setTextCurrentOrNextStatus(mNextTextPosition, mNextTextPosition + 1, false);      
    handler.postDelayed(new Runnable() {        
     @Override        
     public void run() {          
      va.resume();        
     } 
    }, reRepeatDelayTime);    
   }  
 });  
 va.setRepeatCount(-1);  
 va.setDuration(itemAnimationTime);  
 va.setStartDelay(startDelayTime);  
 va.start();
}

va.setRepeatCount(-1); 設置動畫無限重復

onAnimationUpdate() 方法得到動畫執(zhí)行的進度，計算出text距離頂部的距離，調(diào)用postInvalidate()方法刷新界面。

onAnimationRepeat() 方法，通過handler延遲reRepeatDelayTime時間，再重新執(zhí)行動畫。

繪制

protected void onDraw(Canvas canvas) {  
 if(mTextArray == null || mTextArray.length == 0) {   
  super.onDraw(canvas);  
 } else {    
  canvas.drawText(mCurrentText, mPaddingLeft, mCurrentTextMoveMarginTop, mPaint);  
  canvas.drawText(mNextText, mPaddingLeft, mNextTextMoveMarginTop, mPaint);  
 }
}

總結(jié)

到這里所有的代碼已經(jīng)分析完畢，其實實現(xiàn)這個效果還有很多種方法，通過繼承ViewGroup等等都可以實現(xiàn)，大家有興趣可以自己嘗試。希望本文的內(nèi)容對大家的學習或者工作能有所幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: