카톡 같은 list 만들기

카톡 같은 list 만들기는 카톡의 대화 내역처럼 나오도록 만드는 예제입니다.
여기저기 만드는 방법에 대한 설명들은 있는데 구체적으로 공개된 예제가 없는것 같아서 만들어 보았습니다.

기본적으로 나인 패치라는 비트맵 이미지를 사용하게 됩니다.
아래는 배경 지식이 되는 링크들입니다.

나인패치에 대한 내용입니다.
http://202psj.tistory.com/777

list에 아이템 넣기
http://berabue.blogspot.kr/2014/05/android-listview.html

자판 입력 선택될때 자동으로 list아이템 스크롤 시키기
http://www.androidside.com/bbs/board.php?bo_table=B49&wr_id=15830


custom list를 만들줄 알아야 하고 custom list에서 배경을 나인 패치를 사용하면 됩니다.
custom list를 만들려면 리스트로 사용할 xml을 준비해야 하는데요
아래와 같이 준비하였습니다.
핵심은 양쪽에 view를 두고 가운데 텍스트 뷰를 하나 둡니다.
view의 layout_weight를 각각1로 두고 사용안하는쪽을 GONE 처리 하면됩니다.

viewLeft.setVisibility(View.GONE);

<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:layout_gravity="center_horizontal"

    android:orientation="horizontal"

    android:id="@+id/layout"

    android:gravity="center">

    <View        android:layout_width="wrap_content"

        android:layout_height="1dp"

        android:id="@+id/imageViewleft"

        android:background="#888888"

        android:layout_weight="1"

        android:layout_margin="10dp" />

    <TextView        android:id="@+id/text"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:textColor="#000000"

        android:text ="text"        />

    <View        android:layout_width="wrap_content"

        android:layout_height="1dp"

        android:id="@+id/imageViewright"

        android:background="#888888"

        android:layout_weight="1"

        android:layout_margin="10dp" />
</LinearLayout>

리스트에 아이템을 추가할때에는 인자를 하나 더 둬서 오른쪽 왼쪽 어디에 둘건지를 결정합니다.
카톡에 보면 시간 변경선이 나오는 경우가 있는데 여기서는 2번 해당 경우 처리입니다.
View에 layout_height = 1dp로 설정하고 background색을 검은색으로 처리합니다.

<리스트에 추가할때>

m_Adapter.add("처음",0);
m_Adapter.add("이건 뭐지",1);
m_Adapter.add("대화창이다",0);
m_Adapter.add("2015/10/8",2);
m_Adapter.add("쿨쿨",1);
m_Adapter.add("쿨쿨쿨쿨",0);
m_Adapter.add("재미있게",1);

<type에 따른 처리>

if( m_List.get(position).type == 0 ) {
    text.setBackgroundResource(R.drawable.inbox2);
    layout.setGravity(Gravity.LEFT);
    viewRight.setVisibility(View.GONE);
    viewLeft.setVisibility(View.GONE);
}else if(m_List.get(position).type == 1){
    text.setBackgroundResource(R.drawable.outbox2);
    layout.setGravity(Gravity.RIGHT);
    viewRight.setVisibility(View.GONE);
    viewLeft.setVisibility(View.GONE);
}else if(m_List.get(position).type == 2){
    layout.setGravity(Gravity.CENTER);
    viewRight.setVisibility(View.VISIBLE);
    viewLeft.setVisibility(View.VISIBLE);
}

<동작 화면>

<소스>
https://drive.google.com/file/d/0B9vAKDzHthQIQzU0cEpoMEo3Vms/view?usp=sharing