本文首發(fā)于深入淺出區(qū)塊鏈社區(qū)
原文鏈接：開發(fā)以太坊安卓錢包系列第3篇目胡，原文已更新宿接，請(qǐng)讀者前往原文閱讀
這是如何開發(fā)以太坊（安卓）錢包系列第3篇判哥， 錢包賬號(hào)資產(chǎn)信息展示禁灼，展示信息主要包括賬號(hào)地址、eth余額及該賬號(hào)所擁有的Token及余額隔崎。
預(yù)備知識(shí) MVVM
本文會(huì)涉及和UI界面的交互今艺，提前理解下界面和數(shù)據(jù)如何交互是非常有必要的，如果你已經(jīng)很熟悉MVVM爵卒，可跳過(guò)這一小節(jié)虚缎。
最早寫Android的時(shí)候，數(shù)據(jù)和界面經(jīng)常耦合在一起钓株，一個(gè)Activity文件總是特別大实牡，每當(dāng)產(chǎn)品界面改版就非常痛苦，吐槽下轴合，很多產(chǎn)品經(jīng)理都喜歡對(duì)界面改來(lái)改去创坞。
后來(lái)Google 推薦多個(gè)架構(gòu)模式： MPV凉唐、 MVVM模式來(lái)解決數(shù)據(jù)和UI耦合的問(wèn)題絮吵，登鏈錢包代碼，使用的就是MVVM模式，所以對(duì)它做一個(gè)簡(jiǎn)單介紹奔坟，下面是MVVM的視圖和數(shù)據(jù)的交互圖：
View 通常對(duì)應(yīng)于Activity/Fragment/自定義View
Model：則是和數(shù)據(jù)相關(guān)的模塊。
View 與 Model 不直接發(fā)生聯(lián)系搭盾， 而是通過(guò)ViewModel負(fù)責(zé)接收View層的事件以及獲取并處理數(shù)據(jù)咳秉，ViewModel層的數(shù)據(jù)變化也會(huì)通知給View層進(jìn)行相應(yīng)的UI的更新，從而實(shí)現(xiàn)業(yè)務(wù)邏輯和Ui的隔離鸯隅。
使用MVVM模式最大的優(yōu)點(diǎn)就是解耦澜建， 因?yàn)閿?shù)據(jù)處理邏輯是獨(dú)立于View, 在UI更改時(shí)，ViewModel 不用做太多改動(dòng)蝌以。
我們使用了Google在I/O大會(huì)推出的一套遵循MVVM開發(fā)模式的LiveData和ViewModel組件架構(gòu)炕舵。
ViewModel 和 LiveData
ViewModel 會(huì)關(guān)注UI生命周期來(lái)存儲(chǔ)和管理數(shù)據(jù)，在Activity發(fā)生變化（鎖屏開屏跟畅、旋轉(zhuǎn)）時(shí)咽筋，ViewModel 會(huì)自動(dòng)保留之前的數(shù)據(jù)并給新的Activity或Fragment使用，當(dāng)界面被系統(tǒng)銷毀時(shí)徊件，ViewModel也會(huì)進(jìn)行資源清理奸攻，避免內(nèi)存泄漏蒜危。
ViewModel 還可以用于不同界面間數(shù)據(jù)共享。
LiveData是一個(gè)可觀察的數(shù)據(jù)持有者類睹耐。觀察者可以方便我們以異步的方式獲取數(shù)據(jù)辐赞，同時(shí)LiveData也是有生命周期感知的。如果其生命周期處于STARTED或RESUMED狀態(tài)硝训。LiveData會(huì)將觀察者視為活動(dòng)狀態(tài)响委，并通知其數(shù)據(jù)的變化。LiveData未注冊(cè)的觀察對(duì)象以及非活動(dòng)觀察者是不會(huì)收到有關(guān)更新的通知捎迫。
了解更多晃酒，可自行以關(guān)鍵字： Lifecycle、ViewModel窄绒、LiveData 進(jìn)行搜索贝次。
賬號(hào)信息展示
展示信息主要包括賬號(hào)地址、eth余額及該賬號(hào)所擁有的Token及余額彰导， 其界面效果如下:
這個(gè)界面應(yīng)的是登鏈錢包的
PropertyFragment蛔翅，上圖的UPT 是我自己發(fā)行的Token，所以沒(méi)有顯示價(jià)格
現(xiàn)在我們來(lái)思考一下位谋， 怎么來(lái)展現(xiàn)上面的數(shù)據(jù)山析， 別著急往下看， 可以先想想掏父。
先對(duì)問(wèn)題做一個(gè)拆分笋轨，把數(shù)據(jù)拆分為4個(gè)部分：
- 顯示當(dāng)前選中的賬號(hào)
- 顯示當(dāng)前賬號(hào) ETH 余額
- 顯示當(dāng)前賬號(hào)下 Token 數(shù)量
- 顯示對(duì)應(yīng)的法幣金額。
為了避免 UI 與上面4個(gè)數(shù)據(jù)的耦合赊淑，代碼使用了一個(gè)TokensViewModel爵政， 獲取到的數(shù)據(jù)用 LiveData做了一個(gè)Wrap，以便UI可以訂閱數(shù)據(jù)陶缺，TokensViewModel類像下面钾挟，代碼有刪減：
public class TokensViewModel extends ViewModel {
private final MutableLiveData<ETHWallet> defaultWallet;
private final MutableLiveData<NetworkInfo> defaultNetwork;
private final MutableLiveData<Token[]> tokens;
private final MutableLiveData<Ticker> prices;
}
MutableLiveData 是前面提到的 LiveData的子類，在UI界面中就可以對(duì)數(shù)據(jù)進(jìn)行訂閱饱岸，下面我們逐一拆解下每個(gè)數(shù)據(jù)掺出。
顯示當(dāng)前賬號(hào)
可以分為兩個(gè)步驟：
- 從數(shù)據(jù)庫(kù)中讀取賬號(hào)；
- 界面顯示賬號(hào)
TokensViewModel中定義了一個(gè)MutableLiveData<ETHWallet> defaultWallet 苫费，從數(shù)據(jù)庫(kù)中讀取賬號(hào)會(huì)保存在defaultWallet中汤锨，然后UI對(duì) defaultWallet 進(jìn)行觀察顯示。
注解: 登鏈錢包 里大量使用的這個(gè)方式百框，通過(guò)一個(gè)LiveData 做數(shù)據(jù)橋接闲礼。
在上一篇導(dǎo)入賬號(hào)及賬號(hào)管理，所有的賬號(hào)使用greenDao 存儲(chǔ)起來(lái)， 因此我們只需要把所有賬號(hào)從加載出來(lái)位仁，挑選出當(dāng)前選中的那一個(gè)柑贞。 結(jié)合代碼看一看：
// WalletDaoUtils.java
public static ETHWallet getCurrent() {
List<ETHWallet> ethWallets = ethWalletDao.loadAll();
for (ETHWallet ethwallet : ethWallets) {
if (ethwallet.isCurrent()) {
ethwallet.setCurrent(true);
return ethwallet;
}
}
return null;
}
上面代碼先用 ETHWalletDao.loadAll 加載出所有的賬號(hào)，返回當(dāng)前選中的聂抢，上面的代碼會(huì)被FetchWalletInteract 類的 findDefault方法調(diào)用钧嘶，在ViewModle里，很多時(shí)候以數(shù)據(jù)進(jìn)行交互的類琳疏，我們會(huì)命名為 xxxInteract有决，這也是一個(gè)習(xí)慣用法。
其代碼如下：
// FetchWalletInteract.java
// 返回一個(gè)可訂閱的Single<ETHWallet> 對(duì)象
public Single<ETHWallet> findDefault() {
return Single.fromCallable(() -> {
return WalletDaoUtils.getCurrent();
}).subscribe(this::onDefaultWallet);
}
// 獲取到默認(rèn)錢包賬號(hào) 設(shè)置到 defaultWallet 這個(gè)LiveData
private void onDefaultWallet(ETHWallet wallet) {
defaultWallet.setValue(wallet);
}
findDefault()返回一個(gè)可訂閱的Single<ETHWallet> 對(duì)象空盼，如果不熟悉可參考后面的文檔书幕。
之后，在UI界面PropertyFragment.java 中揽趾， 就可以對(duì) defaultWallet 進(jìn)行訂閱：
tokensViewModel.defaultWallet().observe(this, this::showWallet);
當(dāng)獲取到默認(rèn)賬號(hào)時(shí)台汇，就會(huì)回調(diào)showWallet:
// UI 顯示
public void showWallet(ETHWallet wallet) {
tvWalletName.setText(wallet.getName());
tvWalletAddress.setText(wallet.getAddress());
}
這樣， 界面的顯示就完成了篱瞎，下一篇繼續(xù)介紹獲取余額苟呐。
參考文檔
- lifecycle官方文檔地址
- RxAndroid 了解更多響應(yīng)式編程
我創(chuàng)建了一個(gè)專門討論錢包開發(fā)的微信群，加微信：xlbxiong 備注：錢包俐筋。
加入知識(shí)星球牵素，和一群優(yōu)秀的區(qū)塊鏈從業(yè)者一起學(xué)習(xí)。
深入淺出區(qū)塊鏈 - 系統(tǒng)學(xué)習(xí)區(qū)塊鏈澄者，學(xué)區(qū)塊鏈的都在這里笆呆，打造最好的區(qū)塊鏈技術(shù)博客。
本文原文鏈接
