안드로이드 채팅 (2/3) - 채팅 화면 (210414)

(210518 수정)

 

회원가입을 해서 로그인을 했다면 

이제는 채팅파트를 해보겠다. 

 

우선 채팅 화면 부터 만들고

다음 글에 기능을 다뤄볼 예정이다. 

 

로그인과 회원가입보다는 조금 더 복잡한 코드가 필요하지만

그리 어려운 코드들은 아니니 천천히 참고하면 좋을 듯 하다. 

 

-----------------------------------------------------------------------------------------------------------------------------------

 

MainActivity에서 로그인 버튼을 눌러서 Intent가 발생하게 되면

채팅을 할 수 있는 ChatActivity로 화면 전환을 하게된다.

 

우선 ChatActivity 클래스가 Inflation을 하게 되는 activity_chat.xml 파일을 보게 되면

 

-----------생략--------------- (레이아웃은 ConstraintLayout)

 

<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/btnSend"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="@color/purple_200"
tools:ignore="MissingConstraints" />

 

가장 중요한 RecyclerView인데 ListView와 비슷하게 리스트 형식의 뷰를 나타낸다.

(ListView와의 다른 점은 레이아웃을 선택할 수 있다.)

 

background에 본인이 원하는 색상이나 이미지를 넣을 수 있다.

 

<Button
android:id="@+id/btnSend"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="@drawable/ic_baseline_send_24"/>

 

버튼은 우리가 실제로 카카오톡과 같은 채팅 앱을 사용하게 되면

대부분 화살표 모양으로 되어 있는 것을 볼 수 있는데

File - New - Vector asset에서 본인이 원하는 이모티콘 이미지를 가져올 수 있다.

 

<EditText
android:id="@+id/edt"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@+id/btnSend" />

 

메시지를 직접 입력하는 EditText는 딱히 설명할 건 없지만

전체적인 배치 참고를 위해 넣었다.

 

이 정도로 채팅화면을 위한 xml 구성은 끝

 

그리고 채팅을 하려면 메시지가 입력될 말풍선이 필요함

상대방의 말풍선은 왼쪽에, 자신의 말풍선은 오른쪽에 배치하는데

추가로 left_text_view.xml파일과 right_text_view.xml파일을 작성한다.

 

left_text_view.xml

 

--------------생략--------------(ContraintLayout)

 

<TextView

android:id="@+id/tvChat"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:background="@drawable/chat_bubble"
android:padding="10dp"
android:layout_marginStart="5dp"
android:layout_marginBottom="5dp"
tools:ignore="MissingConstraints" />

 

right_text_view.xml 파일은 위 bold부분만

app:layout_constraintEnd_toEndOf="parent" 고쳐주면 된다.

 

또, 말풍선이 나타날 TextView는 작성했지만

아직 말풍선처럼 보이지 않기에

말풍선처럼 꾸며보도록 하겠다.

 

지금까지 레이아웃 xml 파일을 만들었다면

이번에는 드로어블 xml 파일을 만들어보겠다.

 

여기서 drawable파일이라고 하면 화면에 그릴 수 있고 

android:drawable 특성을 사용하여  xml 파일에 적용할 수 있는 그래픽에 대한 것이다.

 

chat_bubble.xml

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

<solid
android:color="#90CDD5" />

<stroke
android:width="2dp"
android:color="#000000" />

<corners
android:radius="15dp" />

</shape>

 

말풍선의 모양을 수정할 것이기 때문에 shape로 하고

solid의 color는 색상, 

stroke의 width는 테두리의 굵기, color는 색상,

corners의 radius는 꼭짓점을 둥글게 할 수 있다.

 

 

 

피드백은 언제나 환영입니다.