스팀 앱 개발기 #58 - 포스트 리스트를 구성할 항목의 레이아웃 (3) 데이터 클래스 정의 및 데이터 바인딩 적용

dorian-mobileapp (65)in kr-dev 커뮤니티 • 4 years ago (edited)

시작하며...

이번에는 포스트 리스트를 구성할 항목의 레이아웃의 데이터 클래스를 정의하고, 그것을 레이아웃과 데이터 바인딩으로 연결할 것입니다. 먼저 데이터 클래스부터 정의해 보겠습니다.

PostItem 데이터 클래스

이 클래스에 정의한 데이터 필드들은 다음과 같습니다.

title: 포스트 제목
thumbnailURL: 썸네일의 URL
content: 텍스트 내용
tagOrCommunity: 메인 태그 또는 커뮤니티 이름
time: 작성 시간. 년월일 대신 '1일전', '1개월전'과 같은 방식의 포맷 사용 예정
rewards: 보상량. 달러 단위.
upvoteCount: 업보팅 개수
downvoteCount: 다운보팅 개수
account: 저자 계정
reputation: 명성도

작성한 코드는 다음과 같습니다.

data class PostItem(
    val title: String,
    val thumbnailURL: String,
    val content: String,
    val tagOrCommunity: String,
    val time: String,
    val rewards: Float,
    val upvoteCount: Int,
    val downvoteCount: Int,
    val account: String,
    val reputation: Int
)

데이터 바인딩 적용

포스트 항목 레이아웃을 정의한 layout_post_item.xml 파일에 데이터 바인딩을 적용할 것입니다. 최상단 태그가 ConstraintLayout이었는데요. 이제 최상단 태그는 layout으로 정의하구요. ConstraintLayout은 그 안으로 들어갑니다.

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

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout_post_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp">

        ...

    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

그리고 layout 태그 안에 data 태그를 추가하구요. 위에서 정의한 PostItem 클래스 타입의 변수를 그 안에 정의합니다.

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

    <data>
        <variable
            name="postItem"
            type="lee.dorian.steem_domain.model.PostItem" />
    </data>

    ...

</layout>

이제 ConstraintLayout 안의 뷰들과 PostItem 변수를 바인딩 해줍니다. 코드는 다음과 같습니다.

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/layout_post_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp">

        <TextView
            android:id="@+id/text_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:maxLines="2"
            android:text="@{postItem.title}"
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="Title Example: Lorem ipsum dolor sit amet, consectetur adipiscing elit..." />

        <ImageView
            android:id="@+id/image_thumbnail"
            android:layout_width="80dp"
            android:layout_height="80dp"
            android:layout_marginTop="5dp"
            app:srcURL="@{postItem.thumbnailURL}"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@id/text_title"
            tools:src="@mipmap/ic_launcher" />

        <TextView
            android:id="@+id/text_content"
            android:layout_width="0dp"
            android:layout_height="24sp"
            android:layout_marginLeft="10dp"
            android:ellipsize="marquee"
            android:maxLines="1"
            android:text="@{postItem.content}"
            android:textColor="@color/black"
            android:textSize="18sp"
            app:layout_constraintTop_toTopOf="@id/image_thumbnail"
            app:layout_constraintLeft_toRightOf="@id/image_thumbnail"
            app:layout_constraintRight_toRightOf="parent"
            tools:text="Content example: Lorem ipsum dolor sit amet, consectetur adipiscing elit," />

        <TextView
            android:id="@+id/text_main_tag"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:text="@{postItem.tagOrCommunity}"
            android:textSize="16sp"
            app:layout_constraintLeft_toLeftOf="@id/text_content"
            app:layout_constraintTop_toBottomOf="@id/text_content"
            app:layout_constraintBottom_toTopOf="@id/text_rewards"
            tools:text="Tag or Community" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:text="@{postItem.time}"
            android:textSize="16sp"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@id/text_content"
            app:layout_constraintBottom_toTopOf="@id/text_rewards"
            tools:text="1 days ago" />

        <TextView
            android:id="@+id/text_rewards"
            android:layout_width="wrap_content"
            android:layout_height="18sp"
            android:maxLines="1"
            android:text='@{String.format("$%f", postItem.rewards)}'
            android:textColor="@color/black"
            android:textSize="14sp"
            app:layout_constraintBottom_toBottomOf="@id/image_thumbnail"
            app:layout_constraintLeft_toLeftOf="@id/text_content"
            tools:text="$987.654" />

        <TextView
            android:id="@+id/text_upvotes"
            android:layout_width="wrap_content"
            android:layout_height="18sp"
            android:layout_marginLeft="3dp"
            android:maxLines="1"
            android:text='@{String.format("🔺%d", postItem.upvoteCount)}'
            android:textColor="@color/black"
            android:textSize="14sp"
            app:layout_constraintTop_toTopOf="@id/text_rewards"
            app:layout_constraintLeft_toRightOf="@id/text_rewards"
            tools:text="🔺123" />

        <TextView
            android:id="@+id/text_downvotes"
            android:layout_width="wrap_content"
            android:layout_height="18sp"
            android:layout_marginLeft="3dp"
            android:maxLines="1"
            android:text='@{String.format("🔻%d", postItem.downvoteCount)}'
            android:textColor="@color/black"
            android:textSize="14sp"
            app:layout_constraintTop_toTopOf="@id/text_rewards"
            app:layout_constraintLeft_toRightOf="@id/text_upvotes"
            tools:text="🔻0" />

        <TextView
            android:id="@+id/text_account_reputation"
            android:layout_width="wrap_content"
            android:layout_height="18sp"
            android:layout_marginLeft="12dp"
            android:maxLines="1"
            android:text='@{String.format("%s (%d)", postItem.account, postItem.reputation)}'
            android:textColor="@color/black"
            android:textSize="14sp"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            tools:text="dorian-mobileapp (99)" />

    </androidx.constraintlayout.widget.ConstraintLayout>