開發十年，就只剩下這套架構體系了！ >>>   

這是如何開發以太坊（安卓）錢包系列第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個部分：

1. 顯示當前選中的賬號
2. 顯示當前賬號 ETH 餘額
3. 顯示當前賬號下 Token 數量
4. 顯示對應的法幣金額。

為了避免 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介面中就可以對資料進行訂閱，下面我們逐一拆解下每個資料。

顯示當前賬號

可以分為兩個步驟：

1. 從資料庫中讀取賬號；
2. 介面顯示賬號

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<ETHWallet> 物件，如果不熟悉可參考後面的文件。

之後，在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());

    }

這樣， 介面的顯示就完成了，下一篇繼續介紹獲取餘額。

參考文件

1. lifecycle官方文件地址
2. RxAndroid 瞭解更多響應式程式設計

我建立了一個專門討論錢包開發的微信群，加微信：xlbxiong 備註：錢包。

加入知識星球，和一群優秀的區塊鏈從業者一起學習。 深入淺出區塊鏈 - 系統學習區塊鏈，學區塊鏈的都在這裡，打造最好的區塊鏈技術部落格。

本文

相關推薦