Android跑馬燈MarqueeView源碼解析
更新時間：2020年07月29日 13:29:19 投稿：lijiao
這篇文章主要為大家詳細介紹了Android跑馬燈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ù)公告字符串啟動輪播
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ù)公告字符串列表啟動輪播
public void startWithList(List<String> notices) {
setNotices(notices);
start();
}
// 根據(jù)寬度和公告字符串啟動輪播
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();
}
// 啟動輪播
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，可以看到他的結構體
其實ViewFlipper工作機制很簡單，如上圖，就是將添加到ViewFlipper中的子View按照順序定時的顯示是其中一個子View，其他的子View設置為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的一些屬性，上下文，集合，是否動畫延遲，點擊事件，跑馬燈的時間間隔，動畫延遲時間，字體大小顏色，設置位置在靠左垂直中間對齊，文字的位置常量。
修改MarqueeView的構造方法，我們可以在右鍵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);
首先獲取屬性集合，獲取一個mv的間隔，默認值2000
isSetAnimDuration = typedArray.hasValue(R.styleable.MarqueeViewStyle_mvAnimDuration);
是否設置動畫時間的延遲
if (typedArray.hasValue(R.styleable.MarqueeViewStyle_mvTextSize)) {
textSize = (int) typedArray.getDimension(R.styleable.MarqueeViewStyle_mvTextSize, textSize);
textSize = DisplayUtil.px2sp(mContext, textSize);
}
假如設置有自定義文字大小，就獲取然后px轉成sp
獲取控件位置，自由設置
在后面要回收
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ù)公告字符串啟動輪播
public void startWithText(final String notice)
暴露個公共方法，里面有測量view的getViewTreeObserver方法，里面內(nèi)部類調(diào)用了startWithFixedWidth(notice, getWidth());方法
// 根據(jù)寬度和公告字符串啟動輪播
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();
}
轉換得到一個dp的寬度，限制字數(shù)長度大小。假如字符串小于直接add。假如過長取余得到行數(shù)。然后循環(huán)，獲取那行的頭尾，末尾假如2行字數(shù)還是比總體長度大就取總體長度，假如小于總體長度，就取那行的末尾下表。
然后開始播放
// 啟動輪播
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起來，然后開始播放。后面就是做個點擊回調(diào)，然后set get這個公告的集合。
最后不要忘了在布局頂層加入
xmlns:app="http://schemas.android.com/apk/res-auto"
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
雙十一馬上到了，又進入到搶紅包的季節(jié)，本篇文章介紹了android仿百度福袋紅包界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2016-11-11
這篇文章主要介紹了詳解Android Bitmap的使用方法，幫助大家更好的理解和利用Android進行開發(fā)，感興趣的朋友可以了解下2021-02-02
Java 8的一個大亮點是引入Lambda表達式，使用它設計的代碼會更加簡潔。接下來通過本文給大家介紹Android studio配置lambda表達式教程，需要的朋友參考下吧2017-05-05
Android中的Toast是一種簡易的消息提示框，toast提示框不能被用戶點擊，toast會根據(jù)用戶設置的顯示時間后自動消失。本文將介紹Toast的自定義使用，下面一起來看看吧。2016-08-08
BInder方面的資料雖然感覺看的比較多，但是真正用的時候才發(fā)現(xiàn)有很多地方模棱兩棵的，所以，打算用一個實例再來鞏固一下binder的使用方法。這篇文章主要介紹了Android中Binder的簡單使用，文中給出詳細的示例代碼,需要的朋友可以參考下2016-12-12
Android中TextView自動識別url且實現(xiàn)點擊跳轉
這篇文章主要介紹了關于Android中TextView自動識別url且實現(xiàn)點擊跳轉的相關資料，文中給出了詳細的示例代碼，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-03
這篇文章主要為大家詳細介紹了Android截屏SurfaceView黑屏問題的解決辦法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了Android亮屏和熄屏控制的方法,結合實例形式較為詳細的分析了Android亮屏與息屏的原理,實現(xiàn)技巧與相關注意事項,需要的朋友可以參考下2016-02-02
Android中使用GridLayout網(wǎng)格布局來制作簡單的計算器App
這篇文章主要介紹了Android中使用GridLayout網(wǎng)格布局來制作簡單的計算器App的實例,GridLayout比表格布局TabelLayout更容易用來制作計算器這樣的多按鈕排列的界面,需要的朋友可以參考下2016-04-04
Android顯式啟動與隱式啟動Activity的區(qū)別介紹
為什么要寫顯式啟動與隱式啟動Activity，Android的Acitivity啟動大致有兩種方式：顯式啟動與隱式啟動，下面分別介紹2014-09-09