Android跑馬燈MarqueeView源碼解析

2019-10-23 19:50:22

字體：大中小

供稿：網(wǎng)友

跑馬燈效果，大家可以去原作者瀏覽https://github.com/sfsheng0322/MarqueeView
下面看自定義控件的代碼

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)體

Android,跑馬燈,MarqueeView

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

Android,跑馬燈,MarqueeView

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í)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識(shí)閱讀請移步到Android開發(fā)頻道。

上一篇：android listview的多列模版實(shí)例代碼

下一篇：Android中應(yīng)用多進(jìn)程的整理總結(jié)