如何開發一款以太坊安卓錢包系列3 - 資產資訊展示
這是如何開發以太坊（安卓）錢包系列第3篇， 錢包賬號資產資訊展示，展示資訊主要包括賬號地址、eth餘額及該賬號所擁有的Token及餘額。
預備知識 MVVM
本文會涉及和UI介面的互動，提前理解下介面和資料如何互動是非常有必要的，如果你已經很熟悉MVVM，可跳過這一小節。
最早寫Android的時候，資料和介面經常耦合在一起，一個Activity檔案總是特別大，每當產品介面改版就非常痛苦，吐槽下，很多產品經理都喜歡對介面改來改去。
後來Google 推薦多個架構模式： MPV、 MVVM模式來解決資料和UI耦合的問題， 登鏈錢包程式碼 ，使用的就是MVVM模式，所以對它做一個簡單介紹，下面是MVVM的檢視和資料的互動圖：
View 通常對應於Activity/Fragment/自定義View
Model：則是和資料相關的模組。
View 與 Model 不直接發生聯絡， 而是通過ViewModel負責接收View層的事件以及獲取並處理資料，ViewModel層的資料變化也會通知給View層進行相應的UI的更新，從而實現業務邏輯和Ui的隔離。
使用MVVM模式最大的優點就是 解耦 ， 因為資料處理邏輯是獨立於View, 在UI更改時，ViewModel 不用做太多改動。
我們使用了Google在I/O大會推出的一套遵循MVVM開發模式的 LiveData和ViewModel 元件架構。
ViewModel 和 LiveData
ViewModel 會關注UI生命週期來儲存和管理資料，在Activity發生變化（鎖屏開屏、旋轉）時，ViewModel 會自動保留之前的資料並給新的Activity或Fragment使用，當介面被系統銷燬時，ViewModel也會進行資源清理，避免記憶體洩漏。
ViewModel 還可以用於不同介面間資料共享。
LiveData是一個可觀察的資料持有者類。觀察者可以方便我們以 非同步的方式獲取資料 ，同時LiveData也是有生命週期感知的。如果其生命週期處於STARTED或RESUMED狀態。LiveData會將觀察者視為活動狀態，並通知其資料的變化。LiveData未註冊的觀察物件以及非活動觀察者是不會收到有關更新的通知。
瞭解更多，可自行以關鍵字： Lifecycle、ViewModel、LiveData 進行搜尋。
賬號資訊展示
展示資訊主要包括賬號地址、eth餘額及該賬號所擁有的Token及餘額， 其介面效果如下:
這個介面應的是 登鏈錢包 的 PropertyFragment ，上圖的UPT 是我自己發行的Token，所以沒有顯示價格
現在我們來 思考 一下， 怎麼來展現上面的資料， 彆著急往下看， 可以先想想。
先對問題做一個拆分，把資料拆分為4個部分：
- 顯示當前選中的賬號
- 顯示當前賬號 ETH 餘額
- 顯示當前賬號下 Token 數量
- 顯示對應的法幣金額。
為了避免 UI 與上面4個數據的耦合，程式碼使用了一個 TokensViewModel ， 獲取到的資料用 LiveData做了一個Wrap，以便UI可以訂閱資料，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介面中就可以對資料進行訂閱，下面我們逐一拆解下每個資料。
顯示當前賬號
可以分為兩個步驟：
- 從資料庫中讀取賬號；
- 介面顯示賬號
TokensViewModel中定義了一個 MutableLiveData<ETHWallet> defaultWallet ，從資料庫中讀取賬號會儲存在defaultWallet中，然後UI對 defaultWallet 進行觀察顯示。
註解: 登鏈錢包 裡大量使用的這個方式，通過一個LiveData 做資料橋接。
在上一篇匯入賬號及賬號管理，所有的賬號使用greenDao 儲存起來， 因此我們只需要把所有賬號從加載出來，挑選出當前選中的那一個。 結合程式碼看一看：
// 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 加載出所有的賬號，返回當前選中的，上面的程式碼會被 FetchWalletInteract 類的 findDefault 方法呼叫，在ViewModle裡，很多時候以資料進行互動的類，我們會命名為 xxxInteract ，這也是一個習慣用法。
其程式碼如下：
// FetchWalletInteract.java
// 返回一個可訂閱的Single<ETHWallet> 物件
public Single<ETHWallet> findDefault() {
return Single.fromCallable(() -> {
return WalletDaoUtils.getCurrent();
}).subscribe(this::onDefaultWallet);
}
// 獲取到預設錢包賬號 設定到 defaultWallet 這個LiveData
private void onDefaultWallet(ETHWallet wallet) {
defaultWallet.setValue(wallet);
}
findDefault() 返回一個可訂閱的 Single
之後，在UI介面 PropertyFragment.java 中， 就可以對 defaultWallet 進行訂閱：
tokensViewModel.defaultWallet().observe(this,this::showWallet);
當獲取到預設賬號時，就會回撥 showWallet :
// UI 顯示
public void showWallet(ETHWallet wallet) {
tvWalletName.setText(wallet.getName());
tvWalletAddress.setText(wallet.getAddress());
}
這樣， 介面的顯示就完成了，下一篇繼續介紹獲取餘額。
參考文件
- lifecycle官方文件地址
- RxAndroid 瞭解更多響應式程式設計
我建立了一個專門討論錢包開發的微信群，加微信：xlbxiong 備註：錢包。
加入知識星球，和一群優秀的區塊鏈從業者一起學習。
深入淺出區塊鏈 - 系統學習區塊鏈，學區塊鏈的都在這裡，打造最好的區塊鏈技術部落格。