[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);

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

 

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