背景
在開發(fā)需求當(dāng)中，當(dāng)有總收益、總用戶數(shù)等數(shù)字要顯示時(shí)，為了更好的給用戶提供展示效果，往往會(huì)想加入炫酷的數(shù)字滾動(dòng)動(dòng)畫，使呆板平靜的數(shù)字變得靈活起來，給人一種增值的直觀感受。
簡(jiǎn)介
NumberRollingView是一個(gè)自定義的自帶數(shù)字滾動(dòng)動(dòng)畫的TextView，通過使用setContent(String str)方法進(jìn)行數(shù)字字符串設(shè)置，傳入相應(yīng)的金額數(shù)字字符串（如"9686.86"）或者整數(shù)數(shù)字字符串（如"968"），設(shè)置的數(shù)字必須是正數(shù)。當(dāng)顯示頁(yè)面初始化完成的過程中，就可以看到數(shù)字滾動(dòng)的效果了。
效果圖：
使用
1.在attr.xml中配置NumberRollingView的自定義屬性
<declare-styleable name="NumberRollingView"> <!--幀數(shù)--> <attr name="frameNum" format="integer"></attr> <!--內(nèi)容的格式--> <attr name="textType"> <enum name="money" value="0"></enum> <enum name="num" value="1"></enum> </attr> <!--是否設(shè)置每三位數(shù)字一個(gè)逗號(hào)--> <attr name="useCommaFormat" format="boolean"></attr> <!--是否當(dāng)內(nèi)容改變的時(shí)候使用動(dòng)畫，反之則不使用動(dòng)畫--> <attr name="runWhenChange" format="boolean"></attr></declare-styleable>
frameNum：動(dòng)畫的幀數(shù)，默認(rèn)為30幀；
textType：內(nèi)容的格式，有money（金額、兩位小數(shù)）和num（整數(shù)）兩種格式，默認(rèn)為0（金額格式）；
useCommaFormat：是否設(shè)置每三位數(shù)字一個(gè)逗號(hào)，默認(rèn)為true（設(shè)置逗號(hào)顯示）；
runWhenChange：是否當(dāng)內(nèi)容改變的時(shí)候使用動(dòng)畫，反之則不使用動(dòng)畫，默認(rèn)為true（內(nèi)容改變時(shí)使用動(dòng)畫）；
2.在XML布局文件中引用View
<com.wiggins.digitalchange.widget.NumberRollingView android:id="@+id/tv_money" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0.00" android:textColor="@color/white" android:textSize="@dimen/font_max" android:textStyle="bold" /><com.wiggins.digitalchange.widget.NumberRollingView android:id="@+id/tv_num" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="0" android:textColor="@color/white" android:textSize="@dimen/font_max" android:textStyle="bold" app:textType="num" />
前者是金額數(shù)字View，后者是整數(shù)數(shù)字View。
3.Java文件中調(diào)用
tvMoney.setContent("9686.86");tvNum.setContent("9686");4.取消數(shù)字的自動(dòng)格式化（設(shè)置每三位數(shù)字一個(gè)逗號(hào)）
默認(rèn)情況下顯示的數(shù)字經(jīng)過了格式化處理，設(shè)置每三位數(shù)字添加一個(gè)逗號(hào)分隔，這使得數(shù)字看起來清晰明了，不會(huì)顯得臃腫繁雜。如果不想將數(shù)字進(jìn)行格式化處理，可以在布局文件中將useCommaFormat屬性設(shè)置為false，或者在代碼中設(shè)置setUseCommaFormat(boolean useCommaFormat)為false，這樣顯示的數(shù)字就不會(huì)是帶有逗號(hào)了。
5.設(shè)置無論內(nèi)容是否改變都要執(zhí)行滾動(dòng)動(dòng)畫
默認(rèn)情況下NumberRollingView會(huì)自動(dòng)判斷傳入的內(nèi)容是否有變化，當(dāng)內(nèi)容發(fā)生變化時(shí)執(zhí)行數(shù)字滾動(dòng)動(dòng)畫，內(nèi)容未變時(shí)不執(zhí)行數(shù)字滾動(dòng)動(dòng)畫。如果想無論內(nèi)容是否有變化都要執(zhí)行滾動(dòng)動(dòng)畫的話，可以在布局文件中將runWhenChange屬性設(shè)置為false，或者在代碼中設(shè)置setRunWhenChange(boolean runWhenChange)為false，這樣無論內(nèi)容是否有變化都會(huì)執(zhí)行滾動(dòng)動(dòng)畫。
6.設(shè)置動(dòng)畫幀數(shù)
默認(rèn)情況下數(shù)字滾動(dòng)動(dòng)畫幀數(shù)為30幀，如果需要修改動(dòng)畫幀數(shù)，可根據(jù)實(shí)際需要在在布局文件中將frameNum屬性設(shè)置為自己想要的幀數(shù)，或者在代碼中設(shè)置setFrameNum(int frameNum)為自己想要的幀數(shù)即可。
7.數(shù)字字符串格式化（每三位數(shù)字添加一個(gè)逗號(hào)）
/** * @param str 字符串只能為兩位小數(shù)或者整數(shù) * @param isDecimal 是否是小數(shù) * @Description 格式化字符串，每三位用逗號(hào)隔開 */public static String addComma(String str, boolean isDecimal) { //先將字符串顛倒順序 str = new StringBuilder(str).reverse().toString(); if (str.equals("0")) { return str; } String str2 = ""; for (int i = 0; i < str.length(); i++) { if (i * 3 + 3 > str.length()) { str2 += str.substring(i * 3, str.length()); break; } str2 += str.substring(i * 3, i * 3 + 3) + ","; } if (str2.endsWith(",")) { str2 = str2.substring(0, str2.length() - 1); } //最后再將順序反轉(zhuǎn)過來 String temp = new StringBuilder(str2).reverse().toString(); if (isDecimal) { //去掉最后的"," return temp.substring(0, temp.lastIndexOf(",")) + temp.substring(temp.lastIndexOf(",") + 1, temp.length()); } else { return temp; }}8.開始金額數(shù)字動(dòng)畫的方法
如果傳入的金額中包含格式化的字符如","或"-"符號(hào)，就將符號(hào)去除；將傳入的數(shù)字進(jìn)行格式轉(zhuǎn)換，轉(zhuǎn)換為Double類型的金額格式，如果發(fā)生轉(zhuǎn)換異常則直接進(jìn)行顯示；同時(shí)判斷傳入的數(shù)字大小，如果為0則直接顯示，若不為0則設(shè)置每幀間隔的大小，發(fā)送Message消息給Handler進(jìn)行內(nèi)容的更新。
/** * @Description 開始金額數(shù)字動(dòng)畫的方法 */public void startMoneyAnim(String moneyStr) { // 如果傳入的數(shù)字已經(jīng)格式化了，則將包含的符號(hào)去除 String money = moneyStr.replace(",", "").replace("-", ""); try { finalMoneyNum = Double.parseDouble(money); if (finalMoneyNum == 0) { // 如果傳入的數(shù)字為0則直接使用setText()進(jìn)行顯示 NumberRollingView.this.setText(moneyStr); return; } nowMoneyNum = 0; threadPool.execute(new Runnable() { @Override public void run() { Message msg = handler.obtainMessage(); // 將傳入的數(shù)字除以幀數(shù)，得到每幀間隔的大小 double size = finalMoneyNum / frameNum; msg.what = MONEY_TYPE; // 如果每幀的間隔小于0.01，則設(shè)置間隔為0.01 msg.obj = size < 0.01 ? 0.01 : size; // 發(fā)送消息改變UI handler.sendMessage(msg); } }); } catch (NumberFormatException e) { e.printStackTrace(); //如果轉(zhuǎn)換Double失敗則直接用setText() NumberRollingView.this.setText(moneyStr); }}9.開始數(shù)字動(dòng)畫的方法
同上述金額數(shù)字一般，先進(jìn)行格式化符號(hào)去除，然后進(jìn)行類型轉(zhuǎn)換，將其轉(zhuǎn)換為Integer類型的整數(shù)格式，如果發(fā)生轉(zhuǎn)換異常則直接進(jìn)行顯示；為了更加人性化，我們將傳入的數(shù)字與幀數(shù)作了比較，如果數(shù)值小于幀數(shù)就直接顯示，當(dāng)然你想不管數(shù)字大小都能進(jìn)行動(dòng)畫展示，只需將下面的幀數(shù)間隔的獲取稍加改造即可；若大于等于設(shè)置的幀數(shù)則設(shè)置每幀間隔的大小，發(fā)送Message消息給Handler進(jìn)行內(nèi)容的更新。
/** * @Description 開始數(shù)字動(dòng)畫的方法 */public void startNumAnim(String numStr) { // 如果傳入的數(shù)字已經(jīng)格式化了，則將包含的符號(hào)去除 String num = numStr.replace(",", "").replace("-", ""); try { finalNum = Integer.parseInt(num); if (finalNum < frameNum) { // 如果傳入的數(shù)字比幀數(shù)小，則直接使用setText() NumberRollingView.this.setText(numStr); return; } // 默認(rèn)從0開始動(dòng)畫 nowNum = 0; threadPool.execute(new Runnable() { @Override public void run() { Message msg = handler.obtainMessage(); // 將傳入的數(shù)字除以幀數(shù)，得到每幀間隔的大小 int temp = finalNum / frameNum; msg.what = NUM_TYPE; msg.obj = temp; // 發(fā)送消息改變UI handler.sendMessage(msg); } }); } catch (NumberFormatException e) { e.printStackTrace(); //如果轉(zhuǎn)換Integer失敗則直接用setText NumberRollingView.this.setText(numStr); }}項(xiàng)目地址 ：傳送門
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
