스팀 앱 개발기 #15 - 지갑 서브화면(WalletFragment) 레이아웃 구성해 보기
이번 포스트에서는 지갑 서브화면(WalletFragment) 레이아웃을 구성해보려 합니다. 지갑 서브화면에서 무엇을 보여줄지 대략적으로 UI를 만들어보고자 함입니다. 모양이 어느 정도 그려진다면, 지갑을 좀 더 빨리 구현하고 싶다는 생각이 들지 않을까요!
스크린샷
1차적으로 구성해본 지갑 화면의 와꾸(?)는 아래와 같습니다. 이를 베이스로 스팀, 스팀달러, 스팀파워가 얼마나 있는지 보여주고자 함입니다. 일단 영어로 작성해 보았지만, 언어 설정에 따라 한글로도 보여줄 예정입니다.
스팀, 스팀달러의 잔액을 보여주는 레이아웃
현재 잔액은 단순히 0을 보여줍니다. 조만간 데이터 바인딩을 적용하여 실제 금액을 보여주게 할 예정입니다.
<?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">
<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_balances"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Balances"
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_balances"
app:layout_constraintTop_toBottomOf="@id/text_balances" />
<TextView
android:id="@+id/text_steem_balance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 STEEM"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/text_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_balances"
app:layout_constraintTop_toBottomOf="@id/text_steem" />
<TextView
android:id="@+id/text_sbd_banalce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 SBD"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/text_sbd" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
스팀 파워를 보여주는 레이아웃
이 또한 현재 스팀 파워는 단순히 0을 보여줍니다. 조만간 데이터 바인딩을 적용하여 실제 금액을 보여주게 할 예정입니다.
<?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">
<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_staking"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Staking"
android:textColor="@color/black"
android:textSize="24sp"
android:textStyle="bold"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/text_sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="STEEM POWER:"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="@id/text_staking"
app:layout_constraintTop_toBottomOf="@id/text_staking" />
<TextView
android:id="@+id/text_sp_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 SP"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/text_sp" />
<TextView
android:id="@+id/text_effective_sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" - Effective SP:"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="@id/text_staking"
app:layout_constraintTop_toBottomOf="@id/text_sp" />
<TextView
android:id="@+id/text_effetive_sp_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 SP"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/text_effective_sp" />
<TextView
android:id="@+id/text_delegating"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" - Delegating:"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="@id/text_staking"
app:layout_constraintTop_toBottomOf="@id/text_effective_sp" />
<TextView
android:id="@+id/text_delegating_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 SP"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/text_delegating" />
<TextView
android:id="@+id/text_delegated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" - Delegated:"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintLeft_toLeftOf="@id/text_staking"
app:layout_constraintTop_toBottomOf="@id/text_delegating" />
<TextView
android:id="@+id/text_delegated_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="0 SP"
android:textColor="@color/black"
android:textSize="16sp"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@id/text_delegated" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
지갑 서브화면 레이아웃
위에서 보여드린 두 레이아웃들을 지갑 서브화면에 포함합니다. 지금은 내용이 길지 않아 스크롤이 필요없습니다. 따라서 이번에는 ScrollView를 사용하지 않습니다. 나중에 다른 내용 추가하면 스크롤을 적용할 예정입니다.
<?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: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:layout_constraintTop_toBottomOf="@id/include_steem_balances" />
<TextView
android:id="@+id/text_wallet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="@{viewModel.text}"
android:textAlignment="center"
android:textSize="20sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
GitHub Commit
마치며...
지난 주에는 작업의 거의 못 했네요. 이번 주부터는 조금씩 진도를 나가보려 합니다. 지갑 내용을 보여주려면 스팀 API를 사용해야 합니다. 다음 포스트에서는 API 사용 방법을 주제로 글을 써보려 합니다.
지난 스팀 앱 개발기
- #14 - 지갑 서브화면(WalletFragment)에서 계정 인식하기
- #13 - 프로파일 서브화면(ProfileFragment)에서 계정 인식하기
- #12 - 태그 서브화면에서 태그 인식하기
- #11 - 검색 레이아웃을 메인 화면에 적용
- #10 - 태그 및 계정 검색 레이아웃 만들기
- #9 - BaseActivity 클래스 정의 그리고 MainActivity 클래스에 적용
- #8 - BaseFragment 클래스 정의 그리고 기존 프래그먼트들에 적용
- #7 - ProfileFragment 그리고 WalletFragment에 데이터 바인딩 적용
- #6 - 태그별 검색 내용을 보여줄 TagsFragment에 데이터 바인딩 적용
- #5 - GitHub에 소스 올리기
- #4 - 하단 내비게이션의 탭 관련 클래스 이름 수정
- #3 - 하단 내비게이션 바의 아이콘, 텍스트 수정
- #2 - 프로젝트 생성
- #1 - 시작하며...
[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.
Upvoted! Thank you for supporting witness @jswit.
