스팀 앱 개발기 #38 - 지갑 화면 구현: 예금 보여주기 추가

dorian-mobileapp (64)in kr-dev 커뮤니티 • 2 years ago

시작하며...

지난 포스트에서 보여드린 지갑 화면 구현에서는 사용자의 스팀/스팀달러의 잔고와 스테이킹 수량 보여주기를 만들었습니다. 이번 포스트에서는 사용자의 예금 보여주기를 추가로 구현합니다.

스크린샷

먼저 스크린샷 보여드립니다. 아래 그림과 같이 지갑 화면에 예금을 추가로 보여줍니다. 참고로 제 계정으로 조회했습니다.

IMAGE 2022-10-03 23:35:50.jpg

작업 개요

예금 보여주기 위한 레이아웃 파일 추가
지갑 화면에서 예금 보여주기

예금 보여주기 위한 레이아웃 파일 추가

사용자의 스팀 및 스팀 달러 예금 액수를 보여주기 위한 레이아웃을 작성합니다. XML 코드는 다음과 같습니다.

layout_steem_savings.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewModel"
            type="lee.dorian.steem_ui.ui.wallet.WalletViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/wallet_balance_bg"
        android:padding="12dp">

        <TextView
            android:id="@+id/text_savings"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Savings"
            android:textColor="@color/black"
            android:textSize="24sp"
            android:textStyle="bold"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/text_steem"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:text="STEEM:"
            android:textColor="@color/black"
            android:textSize="16sp"
            app:layout_constraintLeft_toLeftOf="@id/text_savings"
            app:layout_constraintTop_toBottomOf="@id/text_savings" />

        <TextView
            android:id="@+id/text_steem_saving"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.steemitWallet.savingSteemBalance}"
            android:textColor="@color/black"
            android:textSize="16sp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@id/text_steem"
            tools:text="0.000 STEEM" />

        <TextView
            android:id="@+id/text_sbd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="STEEM BACKED DOLLAR:"
            android:textColor="@color/black"
            android:textSize="16sp"
            app:layout_constraintLeft_toLeftOf="@id/text_savings"
            app:layout_constraintTop_toBottomOf="@id/text_steem" />

        <TextView
            android:id="@+id/text_sbd_saving"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@{viewModel.steemitWallet.savingSbdBalance}"
            android:textColor="@color/black"
            android:textSize="16sp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="@id/text_sbd"
            tools:text="0.000 SBD" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

레이아웃 구성 방식은 layout_steem_balances.xml 파일과 유사합니다. 잔고 대신 예금을 보여준다는 차이가 있지요. 바인딩할 데이터는 WalletViewModel 객체의 savingSteemBalance와 savingSbdBalance입니다. 서버 연동으로 이미 이 데이터들을 받아오므로 이들을 뷰와 연결만 해주면 됩니다.

지갑 화면에서 예금 보여주기

위에서 작성한 레이아웃을 fragment_wallet.xml 파일에 추가할 것입니다. 위치는 layout_steem_staking 레이아웃의 아래로 정했습니다. 코드는 다음과 같습니다.

fragment_wallet.xml

<?xml version="1.0" encoding="utf-8"?>
<layout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewModel"
            type="lee.dorian.steem_ui.ui.wallet.WalletViewModel" />
        <variable
            name="activityViewModel"
            type="lee.dorian.steem_ui.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="8dp">

        <include
            android:id="@+id/include_steem_balances"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            layout="@layout/layout_steem_balances"
            app:viewModel="@{viewModel}"
            app:layout_constraintTop_toTopOf="parent" />

        <include
            android:id="@+id/include_steem_staking"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            layout="@layout/layout_steem_staking"
            app:viewModel="@{viewModel}"
            app:layout_constraintTop_toBottomOf="@id/include_steem_balances" />

        <include
            android:id="@+id/include_steem_savings"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            layout="@layout/layout_steem_savings"
            app:viewModel="@{viewModel}"
            app:layout_constraintTop_toBottomOf="@id/include_steem_staking" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

GitHub Commit

Created layout_steem_savings layout, and added it into fragment_wallet layout

마치며...

이번 작업은 WalletViewModel 클래스가 이미 구현되어 있어서 레이아웃 파일만 작성하면 되었습니다. 다음 작업 대상을 정해야 하는데요. 흠... 다음 개발 아이템은 스팀 파워를 VEST가 아닌 SP 단위로 보여주기입니다. 다음 작업도 좀 길지 않을까 예상합니다. 부족하면 부족한 대로 시간을 쪼개 가며 개발을 진행하고자 합니다.