[안드로이드] MQTT를 이용한 채팅서비스 만들기(2)

이전 글인 [안드로이드] MQTT를 이용한 채팅서비스 만들기(1) 를 통해서 MQTT가 무엇인지 알아보았습니다.

이제 MQTT를 사용하여 간단한 안드로이드 채팅 앱을 만들어보겠습니다. MQTT 이외의 내용은 빠르게 코드만 보고 넘어가겠습니다.

1) 커스텀 ListView 만들기

 간단하게 ListView를 사용하여 채팅창을 구현할 것입니다. 이 때, 기본적인 ListView로도 할 수 있지만 id와 content(내용)을 같이 표현해주기 위해 커스텀 ListView를 사용하겠습니다. chatting_list.xml 파일을 새로 만들고 다음과 같이 만들어 주었습니다. TextView 2개로 id와 content를 표현 할 예정입니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp">
        <TextView
            android:id="@+id/idText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_weight="1"
            android:text="id"
            android:textSize="12dp"
            android:textColor="@android:color/black" />
        <TextView
            android:id="@+id/contentText"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            android:text="content"
            android:textSize="12dp"
            android:textColor="@android:color/black" />
    </LinearLayout>
</LinearLayout>

2) 커스텀 Adapter

 커스텀 ListView를 만들었으니 해당 ListView layout을 사용할 Adapter를 만들어 보겠습니다.

public class ChatAdapter extends BaseAdapter {
    private ArrayList<ChatItem> chatList = new ArrayList<>();
 
    public void add(ChatItem chatItem){
        chatList.add(chatItem);
    }
 
    @Override
    public int getCount() {
        return chatList.size();
    }
 
    @Override
    public Object getItem(int i) {
        return chatList.get(i);
    }
 
    @Override
    public long getItemId(int i) {
        return i;
    }
 
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder;
        if(convertView == null){
            convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.chatting_list,parent,false);
            viewHolder = new ViewHolder();
            viewHolder.idTextView = convertView.findViewById(R.id.idText);
            viewHolder.contentTextView = convertView.findViewById(R.id.contentText);
            convertView.setTag(viewHolder);
        }else{
            viewHolder = (ViewHolder)convertView.getTag();
        }
        viewHolder.idTextView.setText(chatList.get(position).getId());
        viewHolder.contentTextView.setText(chatList.get(position).getContent());
        return convertView;
    }
 
    private class ViewHolder{
        TextView idTextView;
        TextView contentTextView;
    }
}
 

ListView와 Adapter를 연결해 줍니다. ListView의 경우 butterknife를 사용해서 정의하였습니다.

private ChatAdapter chatAdapter;
@BindView(R.id.chatList)
    ListView chatListView;
 
chatAdapter = new ChatAdapter();
chatListView.setAdapter(chatAdapter);

3) ChatItem DTO(Data Transfer Object)

 저의 경우엔 Adapter에서 List의 제너릭 타입으로 ChatItem을 보실 수 있습니다. 이는 채팅창에 필요한 Id와 Content를 하나로 관리하기 위해서 ChatItem Class를 따로 만들어 주었습니다.

public class ChatItem {
    private String id;
    private String content;
 
    public ChatItem(String id, String content) {
        this.id = id;
        this.content = content;
    }
 
    public String getId() {
        return id;
    }
 
    public void setId(String id) {
        this.id = id;
    }
 
    public String getContent() {
        return content;
    }
 
    public void setContent(String content) {
        this.content = content;
    }
}
 

이제 기본적인 준비가 끝났습니다. 다음 글에서 MQTT에 관한 내용을 마무리 짓도록 하겠습니다.