본문 바로가기
Android Project/Extras..

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

by juwon2 2024. 2. 25.

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

 

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

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

 

 

 

 

먼저 댓글창 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

 

 

 

 

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