스팀 앱 - 개발 중: 댓글 리스트 팝업 관련 레이아웃

스팀 앱 - 개발 중: 댓글 리스트 팝업 관련 레이아웃

---

어제 보여 드린 위의 스크린샷. 이걸 어떻게 구현했는지 레이아웃 XML 코드를 먼저 보여 드립니다.

fragment_reply_list_dialog.xml

댓글 리스트 팝업(바텀시트)을 구성하는 레이아웃입니다. 크게 2가지 영역으로 나뉩니다.

• '댓글' 텍스트 그리고 X 버튼을 보여주는 상단 바
• 댓글 리스트를 보여 줄 RecyclerView

<?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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="8dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="@string/title_reply"
                android:textColor="@android:color/black"
                android:textSize="24sp"
                android:textStyle="bold" />

            <ImageView
                android:id="@+id/image_close"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/ic_close" />

        </RelativeLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/list_reply"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            tools:context=".ui.post.content.ReplyListDialogFragment"
            tools:listitem="@layout/layout_reply_item" />

    </LinearLayout>

</layout>

layout_reply_item.xml

댓글 리스트의 각 항목을 보여주기 위한 레이아웃입니다. 다음과 같이 구성되어 있습니다.

• 댓글 작성자의 프로필 이미지를 보여줄 ImageView
• 작성자 계정, 작성 시간, 보상 금액, 업보트 개수, 다운보트 개수를 보여줄 TextView
• 댓글 내용을 보여줄 WebView (내용은 markdown 포맷이고 이를 HTML 포맷으로 변환하여 웹뷰에 로딩)

<?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>
    </data>

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

        <RelativeLayout
            android:id="@+id/layout_reply_account_time"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent">

            <ImageView
                android:id="@+id/image_post_author_profile"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentLeft="true"
                tools:src="@mipmap/ic_launcher_round" />

            <TextView
                android:id="@+id/text_post_author"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/image_post_author_profile"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:textColor="@color/black"
                android:textSize="16sp"
                android:textStyle="bold"
                tools:text="dorian-mobileapp (00)" />

            <TextView
                android:id="@+id/text_created_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:maxLines="1"
                android:text=""
                android:textSize="16sp"
                tools:text="1 days ago" />

        </RelativeLayout>

        <WebView
            android:id="@+id/web_reply_content"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            app:layout_constraintTop_toBottomOf="@id/layout_reply_account_time"
            tools:ignore="WebViewLayout" />

        <RelativeLayout
            android:id="@+id/layout_reply_rewards_votes"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_marginBottom="10dp"
            app:layout_constraintTop_toBottomOf="@id/web_reply_content">

            <TextView
                android:id="@+id/text_rewards"
                android:layout_width="wrap_content"
                android:layout_height="18sp"
                android:maxLines="1"
                android:textColor="@color/black"
                android:textSize="16sp"
                tools:text="$987.654" />

            <TextView
                android:id="@+id/text_upvotes"
                android:layout_width="wrap_content"
                android:layout_height="18sp"
                android:layout_toRightOf="@id/text_rewards"
                android:layout_marginLeft="6dp"
                android:maxLines="1"
                android:text=''
                android:textColor="@color/black"
                android:textSize="16sp"
                tools:text="\uD83D\uDD3A 123" />

            <TextView
                android:id="@+id/text_downvotes"
                android:layout_width="wrap_content"
                android:layout_height="18sp"
                android:layout_marginLeft="6dp"
                android:layout_toRightOf="@id/text_upvotes"
                android:maxLines="1"
                android:text=''
                android:textColor="@color/black"
                android:textSize="16sp"
                tools:text="\uD83D\uDD3B 0" />

        </RelativeLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginTop="10dp"
            android:background="@android:color/darker_gray"
            app:layout_constraintTop_toBottomOf="@id/layout_reply_rewards_votes"
            app:layout_constraintBottom_toBottomOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

---

Posted through the ECblog app (https://blog.etain.club)