[Java 자바, Android 안드로이드] 채팅방 만들기

내가 보낸 메세지는 왼쪽에 말풍선이 있고, 상대방 메세지는 오른쪽에 말풍선이 있도록,

전형적인 채팅방을 만들어 보았다.

기본적으로 ID 값을 비교하여 앱 실행자의 ID와 채팅의 ID가 같을 경우 내가 보낸 메세지로 친다.

실행화면

반응형

 

Android Studio - Version

Flamingo | 2022.2.1 patch 2

 

Project Type

 

코드

ChatData.java

public class ChatData {
    private String id;
    private String name;
    private String message;
    // 년-월-일-시-분-초 -> long 타입이 나중에 핸들링하기 제일 편함
    private long time;

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public long getTime() {
        return time;
    }

    public void setTime(long time) {
        this.time = time;
    }
}

MainActivity.java

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 뷰 초기화
        initView();

    }

    String id = "100";

    private void initView(){
        ListView listView = findViewById(R.id.list);
        MyAdapter adapter = new MyAdapter(this, R.layout.list_item);
        listView.setAdapter(adapter);

        EditText editText = findViewById(R.id.editText);
        Button button = findViewById(R.id.button);


        button.setOnClickListener(view -> {
            ChatData data = new ChatData();
            data.setId(id);
            data.setName("Jay Din");
            data.setMessage(editText.getText().toString());
            data.setTime(System.currentTimeMillis());

            // 어댑터에 데이터 추가
            adapter.add(data);

            // editText 공백ㅁㄴㅇ
            editText.setText("");

        });

    }


    // inner 클래스로 어댑터 만들기
    // ArrayAdapter 들어오는 순서대로 관리해줌.
    class MyAdapter extends ArrayAdapter<ChatData>{
        int resource;
        public MyAdapter(@NonNull Context context, int resource) {
            super(context, resource);
            this.resource = resource;
        }

        @NonNull
        @Override
        public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
            View view = null;
            if (convertView == null){
                // 최초 호출. View 생성
                // convertView는 재사용하기 위한 뷰이기 때문에 null이면 최초실행이다.
                LayoutInflater inflater = LayoutInflater.from(getContext());
                view = inflater.inflate(resource, null);
            }else{
                // 재사용한다.
                view = convertView;
            }

            ChatData data = getItem(position);

            if (data.getId().equals(id)){
                // 내가 쓴 글
                view.findViewById(R.id.left_layer).setVisibility(View.GONE);
                view.findViewById(R.id.right_layer).setVisibility(View.VISIBLE);

                TextView name = view.findViewById(R.id.right_name);
                TextView message = view.findViewById(R.id.right_message);
                TextView time = view.findViewById(R.id.right_time);

                name.setText(data.getName());
                message.setText(data.getMessage());
                time.setText(data.getTime()+"");

            }else{
                // 남이 쓴 글
                view.findViewById(R.id.left_layer).setVisibility(View.VISIBLE);
                view.findViewById(R.id.right_layer).setVisibility(View.GONE);

                TextView name = view.findViewById(R.id.left_name);
                TextView message = view.findViewById(R.id.left_message);
                TextView time = view.findViewById(R.id.left_time);

                name.setText(data.getName());
                message.setText(data.getMessage());
                time.setText(data.getTime()+"");
            }



            return view;
        }
    }



}

반응형

 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <ListView
        android:id="@+id/list"
        android:layout_width="353dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:divider="@null"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="255dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginBottom="8dp"
        android:textSize="10sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        tools:ignore="SpeakableTextPresentCheck,TouchTargetSizeCheck" />

</androidx.constraintlayout.widget.ConstraintLayout>

list_item.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="match_parent"
    android:orientation="vertical">

    <!-- 왼쪽 채팅 -->
    <LinearLayout
        android:id="@+id/left_layer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/left_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="홍길동" />

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

            <TextView
                android:id="@+id/left_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/other_message_bg"
                android:maxWidth="300dp"
                android:text="안녕하세요~"
                android:textSize="24sp" />

            <TextView
                android:id="@+id/left_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="10:00" />

        </LinearLayout>

    </LinearLayout>

    <!-- 오른쪽 채팅-->
    <LinearLayout
        android:id="@+id/right_layer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:orientation="vertical">

        <TextView
            android:id="@+id/right_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="홍길동" />

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

            <TextView
                android:id="@+id/right_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:text="10:00" />

            <TextView
                android:id="@+id/right_message"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/my_message_bg"
                android:maxWidth="300dp"
                android:text="안녕하세요~"
                android:textSize="24sp" />

        </LinearLayout>

    </LinearLayout>


</LinearLayout>