[Kotlin]댓글창 레이아웃 디자인

댓글창 레이아웃을 디자인하는중에 생각보다 헷갈리고 많이 헤매서 기록을 해두려고 한다

 

내가 만들고싶었던 레이아웃 디자인은 게시글을 눌렀을때 나오는 화면 밑에 댓글을 작성할수 있게하는것이였다

그리고 댓글창은 맨 아래쪽에 고정되었으면 좋겠고, 댓글창 부분 빼고 나머지는 스크롤뷰를 사용해서 스크롤이 되게 디자인을 하고싶었다

 

 

 

 

먼저 댓글창 EditText와 버튼을 디자인해주고 리니어레이아웃으로 묶어준뒤 

layout_alignParentBottom = "true" 라는 코드를 추가해서 댓글창이 맨 아래쪽에 고정되도록 설정해주었다

 

그리고 게시글 레이아웃 밑에 댓글내용이 들어가도록 리사이클러뷰를 배치해줬다

나는 라인 바로 밑에 리사이클러뷰가 들어가도록 설정해줄것이기 때문에 라인의 id를 line이라고 정해주고 

layout_above = "@id/line" 을 추가해줬다

 

마지막으로 스크롤뷰를 넣어줘야하는데, 스크롤뷰는 하나의 뷰만 감쌀수있기때문에 

댓글창 윗부분까지 리니어레이아웃으로 모두 묶어준뒤, 이걸 다시 스크롤뷰로 모두 묶었다

그리고 댓글창 위에 배치되도록 해야되기때문에 댓글창 id를 commentInputArea로 설정해주고

layout_above = "@id/ commentInputArea" 라는 코드를 추가해줘서 댓글창 빼고 전부 스크롤뷰가 적용되도록 해줬다

 

스크롤뷰는 하나의 뷰만 감쌀수있는 특징을 잘 기억해야되겠다!!

 

 

전체 코드이다 

<?xml version="1.0" encoding="utf-8"?>

<layout
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">




    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">



        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@id/commentInputArea">


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




                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:layout_marginTop="25dp"
                                android:orientation="horizontal">

                                <ImageView
                                    android:id="@+id/backbutton"
                                    android:layout_marginStart="30dp"
                                    android:layout_width="20dp"
                                    android:layout_height="20dp"
                                    android:src="@drawable/back_button"/>

                                <ImageView
                                    android:layout_width="120dp"
                                    android:layout_height="25dp"
                                    android:layout_marginStart="100dp"
                                    android:src="@drawable/community_name"/>

                            </LinearLayout>





                        <LinearLayout
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="25dp"
                            android:orientation="horizontal">

                            <ImageView
                                android:id="@+id/imageView1"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_weight="1"
                                app:srcCompat="@drawable/circle" />

                            <TextView
                                android:id="@+id/nickname1"
                                android:layout_width="wrap_content"
                                android:layout_height="50dp"
                                android:layout_weight="4"
                                android:text="닉네임"
                                android:fontFamily="@font/bmjua_ttf"
                                android:textSize="20sp"
                                android:textColor="@color/black"
                                android:gravity="center_vertical"/>

                            <ImageView
                                android:id="@+id/threedot"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center_vertical"
                                android:layout_weight="1"
                                android:src="@drawable/threedot"/>

                        </LinearLayout>





                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="80dp"
                        android:layout_marginTop="15dp"
                        android:orientation="vertical">


                        <TextView
                            android:id="@+id/title1"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="30dp"
                            android:layout_weight="1"
                            android:text="제목"
                            android:textColor="@color/black"
                            android:textSize="15sp"
                            android:textStyle="bold" />

                        <TextView
                            android:id="@+id/content1"
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginStart="30dp"
                            android:layout_weight="1"
                            android:text="내용"
                            android:textSize="12sp" />

                    </LinearLayout>






                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="20dp"
                        android:orientation="horizontal">

                        <ImageView
                            android:id="@+id/favorate1"
                            android:layout_width="20dp"
                            android:layout_height="20dp"
                            android:layout_weight="1"
                            android:layout_marginStart="30dp"
                            android:src="@drawable/heart1" />

                        <TextView
                            android:id="@+id/favorateText1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="center_vertical"
                            android:layout_marginStart="5dp"
                            android:textColor="@color/black"
                            android:textSize="15dp"
                            android:text="7"
                            android:fontFamily="@font/bmjua_ttf"/>

                        <ImageView
                            android:id="@+id/comment1"
                            android:layout_width="20dp"
                            android:layout_height="20dp"
                            android:layout_weight="1"
                            android:layout_marginStart="20dp"
                            android:src="@drawable/comment1" />

                        <TextView
                            android:id="@+id/commentText1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_gravity="center_vertical"
                            android:layout_marginStart="5dp"
                            android:textColor="@color/black"
                            android:textSize="15dp"
                            android:text="5"
                            android:fontFamily="@font/bmjua_ttf"/>

                        <TextView
                            android:id="@+id/time1"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_marginStart="220dp"
                            android:layout_gravity="center_vertical"
                            android:fontFamily="@font/bmjua_ttf"
                            android:textSize="10dp"
                            android:text="2024.02.13" />

                    </LinearLayout>




                    <LinearLayout
                        android:id="@+id/line"
                        android:layout_width="match_parent"
                        android:layout_height="3dp"
                        android:layout_marginTop="35dp"
                        android:background="@color/bottomgray"
                        android:orientation="horizontal" />




                            <androidx.recyclerview.widget.RecyclerView
                                android:id="@+id/commentRV"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"
                                android:layout_above="@id/line"
                                app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
                                tools:listitem="@layout/community_comment_list_item"/>



                    </LinearLayout>



        </ScrollView>







                            <LinearLayout
                                android:id="@+id/commentInputArea"
                                android:layout_width="match_parent"
                                android:layout_height="60dp"
                                android:layout_alignParentBottom="true"
                                android:layout_marginStart="10dp"
                                android:layout_marginEnd="10dp"
                                android:layout_marginBottom="10dp"
                                android:background="@drawable/button_radius_green_stroke">

                                <EditText
                                    android:id="@+id/commentArea2"
                                    android:hint="댓글을 작성해주세요"
                                    android:layout_marginLeft="10dp"
                                    android:layout_width="310dp"
                                    android:layout_height="match_parent"
                                    android:background="@android:color/transparent"/>

                                <View
                                    android:layout_width="0dp"
                                    android:layout_height="0dp"
                                    android:layout_weight="1" />


                                <Button
                                    android:id="@+id/commentBtn"
                                    android:layout_width="60dp"
                                    android:layout_height="45dp"
                                    android:layout_gravity="center_vertical"
                                    android:background="@drawable/button_radius_green"
                                    android:fontFamily="@font/bmjua_ttf"
                                    android:text="등록"
                                    android:textColor="@color/white"
                                    android:textSize="15dp"
                                    android:layout_marginEnd="8dp" />

                            </LinearLayout>





</RelativeLayout>



    </layout>

activity_board_inside_activity.xml

 

 

 

 

이런식으로 디자인된 화면을 볼수있고, 스크롤하면 댓글창부분만 빼고 전부 스크롤되는것을 확인할수있다