Android跑馬燈MarqueeView源碼解析

更新時(shí)間：2020年07月29日 13:29:19 投稿：lijiao

這篇文章主要為大家詳細(xì)介紹了Android跑馬燈MarqueeView源碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

跑馬燈效果，大家可以去原作者頁面瀏覽

下面看自定義控件的代碼

public class MarqueeView extends ViewFlipper {

 private Context mContext;
 private List<String> notices;
 private boolean isSetAnimDuration = false;
 private OnItemClickListener onItemClickListener;

 private int interval = 2000;
 private int animDuration = 500;
 private int textSize = 14;
 private int textColor = 0xffffffff;

 private int gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;
 private static final int TEXT_GRAVITY_LEFT = 0, TEXT_GRAVITY_CENTER = 1, TEXT_GRAVITY_RIGHT = 2;

 public MarqueeView(Context context, AttributeSet attrs) {
  super(context, attrs);
  init(context, attrs, 0);
 }

 private void init(Context context, AttributeSet attrs, int defStyleAttr) {
  this.mContext = context;
  if (notices == null) {
   notices = new ArrayList<>();
  }

  TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MarqueeViewStyle, defStyleAttr, 0);
  interval = typedArray.getInteger(R.styleable.MarqueeViewStyle_mvInterval, interval);
  isSetAnimDuration = typedArray.hasValue(R.styleable.MarqueeViewStyle_mvAnimDuration);
  animDuration = typedArray.getInteger(R.styleable.MarqueeViewStyle_mvAnimDuration, animDuration);
  if (typedArray.hasValue(R.styleable.MarqueeViewStyle_mvTextSize)) {
   textSize = (int) typedArray.getDimension(R.styleable.MarqueeViewStyle_mvTextSize, textSize);
   textSize = DisplayUtil.px2sp(mContext, textSize);
  }
  textColor = typedArray.getColor(R.styleable.MarqueeViewStyle_mvTextColor, textColor);
  int gravityType = typedArray.getInt(R.styleable.MarqueeViewStyle_mvGravity, TEXT_GRAVITY_LEFT);
  switch (gravityType) {
   case TEXT_GRAVITY_CENTER:
    gravity = Gravity.CENTER;
    break;
   case TEXT_GRAVITY_RIGHT:
    gravity = Gravity.RIGHT | Gravity.CENTER_VERTICAL;
    break;
  }
  typedArray.recycle();

  setFlipInterval(interval);

  Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_in);
  if (isSetAnimDuration) animIn.setDuration(animDuration);
  setInAnimation(animIn);

  Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_out);
  if (isSetAnimDuration) animOut.setDuration(animDuration);
  setOutAnimation(animOut);
 }

 // 根據(jù)公告字符串啟動(dòng)輪播
 public void startWithText(final String notice) {
  if (TextUtils.isEmpty(notice)) return;
  getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
   @Override
   public void onGlobalLayout() {
    getViewTreeObserver().removeGlobalOnLayoutListener(this);
    startWithFixedWidth(notice, getWidth());
   }
  });
 }

 // 根據(jù)公告字符串列表啟動(dòng)輪播
 public void startWithList(List<String> notices) {
  setNotices(notices);
  start();
 }

 // 根據(jù)寬度和公告字符串啟動(dòng)輪播
 private void startWithFixedWidth(String notice, int width) {
  int noticeLength = notice.length();
  int dpW = DisplayUtil.px2dip(mContext, width);
  int limit = dpW / textSize;
  if (dpW == 0) {
   throw new RuntimeException("Please set MarqueeView width !");
  }

  if (noticeLength <= limit) {
   notices.add(notice);
  } else {
   int size = noticeLength / limit + (noticeLength % limit != 0 ? 1 : 0);
   for (int i = 0; i < size; i++) {
    int startIndex = i * limit;
    int endIndex = ((i + 1) * limit >= noticeLength ? noticeLength : (i + 1) * limit);
    notices.add(notice.substring(startIndex, endIndex));
   }
  }
  start();
 }

 // 啟動(dòng)輪播
 public boolean start() {
  if (notices == null || notices.size() == 0) return false;
  removeAllViews();

  for (int i = 0; i < notices.size(); i++) {
   final TextView textView = createTextView(notices.get(i), i);
   final int finalI = i;
   textView.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
     if (onItemClickListener != null) {
      onItemClickListener.onItemClick(finalI, textView);
     }
    }
   });
   addView(textView);
  }

  if (notices.size() > 1) {
   startFlipping();
  }
  return true;
 }

 // 創(chuàng)建ViewFlipper下的TextView
 private TextView createTextView(String text, int position) {
  TextView tv = new TextView(mContext);
  tv.setGravity(gravity);
  tv.setText(text);
  tv.setTextColor(textColor);
  tv.setTextSize(textSize);
  tv.setTag(position);
  return tv;
 }

 public int getPosition() {
  return (int) getCurrentView().getTag();
 }

 public List<String> getNotices() {
  return notices;
 }

 public void setNotices(List<String> notices) {
  this.notices = notices;
 }

 public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
  this.onItemClickListener = onItemClickListener;
 }

 public interface OnItemClickListener {
  void onItemClick(int position, TextView textView);
 }

}

跑馬燈view是繼承ViewFlipper，可以看到他的結(jié)構(gòu)體

其實(shí)ViewFlipper工作機(jī)制很簡單，如上圖，就是將添加到ViewFlipper中的子View按照順序定時(shí)的顯示是其中一個(gè)子View，其他的子View設(shè)置為Gone狀態(tài)

private Context mContext;
 private List<String> notices;
 private boolean isSetAnimDuration = false;
 private OnItemClickListener onItemClickListener;

 private int interval = 2000;
 private int animDuration = 500;
 private int textSize = 14;
 private int textColor = 0xffffffff;

 private int gravity = Gravity.LEFT | Gravity.CENTER_VERTICAL;
 private static final int TEXT_GRAVITY_LEFT = 0, TEXT_GRAVITY_CENTER = 1, TEXT_GRAVITY_RIGHT = 2;

看出view的一些屬性，上下文，集合，是否動(dòng)畫延遲，點(diǎn)擊事件，跑馬燈的時(shí)間間隔，動(dòng)畫延遲時(shí)間，字體大小顏色，設(shè)置位置在靠左垂直中間對齊，文字的位置常量。

修改MarqueeView的構(gòu)造方法，我們可以在右鍵generate快速生成。

<declare-styleable name="MarqueeViewStyle">
  <attr name="mvInterval" format="integer|reference"/>
  <attr name="mvAnimDuration" format="integer|reference"/>
  <attr name="mvTextSize" format="dimension|reference"/>
  <attr name="mvTextColor" format="color|reference"/>
  <attr name="mvGravity">
   <enum name="left" value="0"/>
   <enum name="center" value="1"/>
   <enum name="right" value="2"/>
  </attr>
 </declare-styleable>

TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MarqueeViewStyle, defStyleAttr, 0);

首先獲取屬性集合，獲取一個(gè)mv的間隔，默認(rèn)值2000

isSetAnimDuration = typedArray.hasValue(R.styleable.MarqueeViewStyle_mvAnimDuration);

是否設(shè)置動(dòng)畫時(shí)間的延遲

if (typedArray.hasValue(R.styleable.MarqueeViewStyle_mvTextSize)) {
   textSize = (int) typedArray.getDimension(R.styleable.MarqueeViewStyle_mvTextSize, textSize);
   textSize = DisplayUtil.px2sp(mContext, textSize);
  }

假如設(shè)置有自定義文字大小，就獲取然后px轉(zhuǎn)成sp
獲取控件位置，自由設(shè)置
在后面要回收

typedArray.recycle();

setFlipInterval(interval);設(shè)置滾屏間隔，單位毫秒

Animation animIn = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_in);
  if (isSetAnimDuration) animIn.setDuration(animDuration);
  setInAnimation(animIn);

  Animation animOut = AnimationUtils.loadAnimation(mContext, R.anim.anim_marquee_out);
  if (isSetAnimDuration) animOut.setDuration(animDuration);
  setOutAnimation(animOut);

一進(jìn)一出的動(dòng)畫效果

// 根據(jù)公告字符串啟動(dòng)輪播
public void startWithText(final String notice)
暴露個(gè)公共方法，里面有測量view的getViewTreeObserver方法，里面內(nèi)部類調(diào)用了startWithFixedWidth(notice, getWidth());方法

 // 根據(jù)寬度和公告字符串啟動(dòng)輪播
 private void startWithFixedWidth(String notice, int width) {
  int noticeLength = notice.length();
  int dpW = DisplayUtil.px2dip(mContext, width);
  int limit = dpW / textSize;
  if (dpW == 0) {
   throw new RuntimeException("Please set MarqueeView width !");
  }

  if (noticeLength <= limit) {
   notices.add(notice);
  } else {
   int size = noticeLength / limit + (noticeLength % limit != 0 ? 1 : 0);
   for (int i = 0; i < size; i++) {
    int startIndex = i * limit;
    int endIndex = ((i + 1) * limit >= noticeLength ? noticeLength : (i + 1) * limit);
    notices.add(notice.substring(startIndex, endIndex));
   }
  }
  start();
 }

轉(zhuǎn)換得到一個(gè)dp的寬度，限制字?jǐn)?shù)長度大小。假如字符串小于直接add。假如過長取余得到行數(shù)。然后循環(huán)，獲取那行的頭尾，末尾假如2行字?jǐn)?shù)還是比總體長度大就取總體長度，假如小于總體長度，就取那行的末尾下表。
然后開始播放

 // 啟動(dòng)輪播
 public boolean start() {
  if (notices == null || notices.size() == 0) return false;
  removeAllViews();

  for (int i = 0; i < notices.size(); i++) {
   final TextView textView = createTextView(notices.get(i), i);
   final int finalI = i;
   textView.setOnClickListener(new OnClickListener() {
    @Override
    public void onClick(View v) {
     if (onItemClickListener != null) {
      onItemClickListener.onItemClick(finalI, textView);
     }
    }
   });
   addView(textView);
  }

  if (notices.size() > 1) {
   startFlipping();
  }
  return true;
 }

創(chuàng)建部署每行的tv

 // 創(chuàng)建ViewFlipper下的TextView
 private TextView createTextView(String text, int position) {
  TextView tv = new TextView(mContext);
  tv.setGravity(gravity);
  tv.setText(text);
  tv.setTextColor(textColor);
  tv.setTextSize(textSize);
  tv.setTag(position);
  return tv;
 }

然后將所有的textview add起來，然后開始播放。后面就是做個(gè)點(diǎn)擊回調(diào)，然后set get這個(gè)公告的集合。
最后不要忘了在布局頂層加入

xmlns:app="http://schemas.android.com/apk/res-auto"

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Android 6.0動(dòng)態(tài)權(quán)限及跳轉(zhuǎn)GPS設(shè)置界面的方法
今天小編就為大家分享一篇Android 6.0動(dòng)態(tài)權(quán)限及跳轉(zhuǎn)GPS設(shè)置界面的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-07-07
Android Studio+Servlet+MySql實(shí)現(xiàn)登錄注冊
對于大多數(shù)的APP都有登錄注冊這個(gè)功能，本文就來介紹一下Android Studio+Servlet+MySql實(shí)現(xiàn)登錄注冊，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
Android中FlowLayout組件實(shí)現(xiàn)瀑布流效果
大家好，本篇文章主要講的是Android中FlowLayout組件實(shí)現(xiàn)瀑布流效果，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下
2022-01-01
Android Studio里如何使用lambda表達(dá)式
這篇文章主要介紹了Android Studio里如何使用lambda表達(dá)式,需要的朋友可以參考下
2017-05-05
android基本控件ToggleButton&Switch使用指南
本文給大家匯總介紹了android的2個(gè)基本控件ToggleButton和Switch的使用方法，非常的詳細(xì)，有需要的小伙伴可以參考下。
2016-01-01
Android編程實(shí)用技術(shù)小結(jié)
這篇文章主要介紹了Android編程實(shí)用技術(shù),實(shí)例匯總了開機(jī)啟動(dòng)receiver、service使用、AlarmManager發(fā)送廣播及停止AlarmManager等相關(guān)技巧,需要的朋友可以參考下
2016-01-01
這篇文章主要為大家詳細(xì)介紹了Android ViewPager向?qū)ы撁嬷谱鞣椒?具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11