[Mindev 개발공부]Android 20분만에 채팅App만들기 -Firebase(4)

오늘은 채팅방화면에서  글을 써보겠습니다.

먼저 채팅방 화면의 레이아웃을 알아보겠습니다.

리스트형식은 Recyclerview를 사용하겠습니다. 

Recyclerview는 제포스팅 글에 잘나와있습니다.

참고하시면 되겠습니다.

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/line"
        android:layout_marginBottom="10dp" />

    <View
        android:id="@+id/line"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/container_bottom"
        android:background="#000" />

    <LinearLayout
        android:id="@+id/container_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:focusableInTouchMode="true"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:weightSum="2">

        <ImageView
            android:id="@+id/imageview_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:background="@drawable/plus" />

        <EditText
            android:id="@+id/edit_message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:layout_weight="1.5"
            android:background="@drawable/background_white_rectangle"
            android:inputType="textMultiLine"
            android:padding="6dp"
            android:scrollHorizontally="false" />

        <Button
            android:id="@+id/button_send"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="0.5"
            android:background="@color/background_blue"
            android:text="전송"
            android:textColor="#fff" />
    </LinearLayout>
</RelativeLayout>

이후 

Chatmessage를 담을 class 를 만들어줍니다.

<ChatData>

private String message,uid;

private ChatData(String message,String uid){

this.message=message;

this.uid=uid;

}

다음은 게터세터를 정의합니다.

public String getMessage() {
    return message;
}

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

public String getUid() {
    return uid;
}

public void setUid(String uid) {
    this.uid = uid;
}

이제 다시 채팅화면 class로 돌아와서

prvaite 전역변수로 edit_message  정의합니다.

edit_message = (EditText) findViewById(R.id.edit_message);

이후 전송버튼의 대한 클릭이벤트를 정의합니다.

button_send.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
       
    }
});

이후 전송할내용을 버튼이벤트 안에 정의합니다.

ChatData chatData = new ChatData(edit_message.getText().toString(), firebaseUser.getUid());
databaseReference.child("message").push().setValue(chatData)
        .addOnCompleteListener(Chatting.this, new OnCompleteListener<Void>() {
            @Override
            public void onComplete(@NonNull Task<Void> task) {
                progressDialog.dismiss();
            }
        });
edit_message.setText("");

아까 정의해준 ChatData에 정의한 class 를 fireabase DB에 보내줍니다.

이후 메세지수신 이나 디비변동 리스너를 함께 달아주면 채팅이 어느정도 작서이됩니다.

databaseReference.child("message").child(getIntent).addChildEventListener(new ChildEventListener() {
    @Override
    public void onChildAdded(DataSnapshot dataSnapshot, String s) {
        ChatData chatData = dataSnapshot.getValue(ChatData.class);
        item.add(new ( chatData.getMessage(),
                chatData.getUid());
        manager.scrollToPosition(item.size() - 1);
    }

    @Override
    public void onChildChanged(DataSnapshot dataSnapshot, String s) {

    }

    @Override
    public void onChildRemoved(DataSnapshot dataSnapshot) {

    }

    @Override
    public void onChildMoved(DataSnapshot dataSnapshot, String s) {

    }

    @Override
    public void onCancelled(DatabaseError databaseError) {

    }
});

위처럼 정의해주며 item 은  private ArrayList<ChatData> item;

이걸로 정의후 add 하게됩니다.

 

add 한 데이터를  recyclerview  adapter 연결을해주게됩니다.

일단 필요 변수를 선언해줍니다.

private RecyclerView recyclerview;
private RecyclerView.Adapter adapter;
private RecyclerView.LayoutManager manager;

manager = new LinearLayoutManager(Chatting.this);
manager.scrollToPosition(item.size() - 1);
recyclerview.setLayoutManager(manager);
adapter = new ChatAdapter(Chatting.this, item, firebaseUser.getUid());
recyclerview.setAdapter(adapter);

정의해주면 보여줄 메세지 레이아웃뺴고 완성하게됩니다.

다음강의는 어댑터에대한 글을 작성해보도록하겠습니다.

아래는 저의 github 주소입니다.

 https://github.com/mkw8263