채팅앱 만들기 서버 없이 DB 까지

이번에 만들어 볼 내용은 채팅앱의 기본 프레임을 짜보는 것이다.

간단하게 정리하면, 보내는 사람, 받는 사람, 이전의 대화 내용, 보낸 시간과 날짜가 나오도록 만들 것이다.

이 앱을 만드는 과정에서 사용할 DB는 SQLliteDB이다.

또한 코드의 양이 많을 것으로 예상 되어서 부분을 나누어 포스팅 할 예정이다.

 

그럼 이제 구조를 생각하면서 구현해보자.

 

구조는 일단 front부분과 back부분이 있다고 생각하면되는데, front부분은 3개의 Layout이 필요하다.

여기서 중요하게 쓰이는 View가 있는데 RecyclerView를 사용할 것이다.

RecyclerView는 여러 곳에서 잘 설명해 놓았기 때문에 짧게만 설명하겠다.

RecyclerView는 뷰를 13~15개 정도만 생성하여서 화면에서 스크롤을 올려서 사라진 View의 내용을 다음 보여줄 내용으로 수정하여 다시 보여주는 방식이다. 그래서 이름 그대로 재사용뷰인 것이다. 그렇기 때문에 list를 보여주는 뷰라고 생각해도 될 것 같다.

 

그래서 일단 입력을 받고, 그걸 보여줄 레이아웃을 정의한다.

activity_main의 코드는 아래와 같다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        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"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <androidx.recyclerview.widget.RecyclerView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:id="@+id/recyclerView"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/contentsEdit"/>
    <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/contentsEdit"
            app:layout_constraintTop_toBottomOf="@id/recyclerView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/sendButton"/>
    <Button android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/sendButton"
            android:text="전송"
            android:enabled="false"
            android:onClick="sendAction"
            app:layout_constraintTop_toBottomOf="@id/recyclerView"
            app:layout_constraintStart_toEndOf="@id/contentsEdit"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

보여줄 부분이 있다면 이제는 보여줘야 할 내용이 있어야하지 않겠는가?

보내는 사람의 말풍선과 받는 사람의 말풍선도 디자인해보자.

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:app="http://schemas.android.com/apk/res-auto">
    <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/cardView"
            app:cardCornerRadius="8dp"
            app:cardBackgroundColor="#FFF59D"
            android:layout_marginRight="128dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/datetimeText">
        <TextView android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:id="@+id/messageText"
                  android:text="안녕하세요."
                  android:padding="8dp"
                  android:ellipsize="end"
                  android:maxLines="2"
                  android:textSize="16sp"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintTop_toTopOf="parent"
                  app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.cardview.widget.CardView>

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/datetimeText"
              android:textSize="12sp"
              android:layout_marginRight="128dp"
              android:text="2021.11.29 16:32:12"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintTop_toBottomOf="@id/cardView"
              app:layout_constraintBottom_toBottomOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

이 코드는 받는 사람 즉, 상대방이 보내올 말풍선이다.

그 다음은 보내는 사람 즉, 사용자의 말풍선이다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/cardView"
            app:cardCornerRadius="8dp"
            app:cardBackgroundColor="#90CAF9"
            android:layout_marginLeft="128dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toTopOf="@id/datetimeText">
        <TextView android:layout_width="match_parent"
                  android:layout_height="match_parent"
                  android:id="@+id/messageText"
                  android:text="안녕하세요."
                  android:padding="8dp"
                  android:ellipsize="end"
                  android:maxLines="2"
                  android:textSize="16sp"
                  app:layout_constraintStart_toStartOf="parent"
                  app:layout_constraintEnd_toEndOf="parent"
                  app:layout_constraintTop_toTopOf="parent"
                  app:layout_constraintBottom_toBottomOf="parent"/>
    </androidx.cardview.widget.CardView>

    <TextView android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:id="@+id/datetimeText"
              android:textSize="12sp"
              android:text="2021.11.29 16:32:12"
              app:layout_constraintEnd_toEndOf="parent"
              app:layout_constraintTop_toBottomOf="@id/cardView"
              app:layout_constraintBottom_toBottomOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>

그럼 이제 front부분의 내용은 끝났다.

다음부분은 이제 자바를 기반으로 back부분을 구성할 것이다.

 

 

2022.11.24 - [프로젝트] - 채팅앱 만들기 서버 없이 DB 까지 - 2

채팅앱 만들기 서버 없이 DB 까지 - 2