간단한 채팅 앱 만들기 #2 - UI 만들기

간단한 채팅 앱 만들기 #2 - UI 만들기

이전에 만들었던 뉴스 앱 만들기를 참고해서 RecyclerView를 이용한 UI를 만들자.
간단한 뉴스 앱 만들기 #1 - UI 생성

간단한 뉴스 앱 만들기 #1 - UI 생성

이번에 만드는 것은 디자인적으로 하기보다는 채팅을 주고받을 수 있는 기능을 위함이므로 UI는 간단하게 이전에 내용을 많이 가져다 썼다.

일단 메인 화면을 만들어 보자.

• activity_chat.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout 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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity"
        android:orientation="vertical"
        android:weightSum="1"
        >
        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/RecyclerView_view"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:scrollbars="vertical"
            android:layout_weight="1"/>
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:orientation="horizontal"
            android:weightSum="1"
            >
            <EditText
                android:id="@+id/EditText_chat"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                />
            <Button
                android:id="@+id/Button_send"
                android:text="send"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                />
  
        </LinearLayout>
  
    </LinearLayout>

  • 가장 하단에 채팅 입력 란과 전송 버튼을 만든다.
  • 이전과 다르게 카드뷰는 이용하지 않을 것이다.

다음은 채팅 하나의 레이아웃을 그려보자.
채팅 하나당 누가 보냈는지 어떤 내용인지 nickname과 message를 표현할 공간이 필요하다.
이를 염두에 두고 만들어보자.

• row_chat.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:id="@+id/TextView_nickname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            />
        <TextView
            android:id="@+id/TextView_msg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textSize="20sp"/>
    </LinearLayout>

나중에 UI를 조금 더 다듬기로 하고 그냥 간단한 화면을 보여주는 것으로 맺는다.

• 전체 화면