Custom ListView

ListView는 안드로이드 앱에서 빠져서는 안되는 기본 중에 기본이라 할만한 컴포넌트다. 아무리 기초적인 앱이라도 ListView 하나쯤은 들어가 있기 마련이다.그러한 ListView를 내가 원하는 방식으로 Customizing 하여 만든 것을 Custom ListView 라고 한다.

안드로이드는 Activity 와 View로 화면 구성이 되어 있다. 혹시나 모르고 있을 사람들을 위해 간략히 설명하자면. Activity 가 View가 존재할 수 있는 영역을 제공한다고 할 수 있고, View는 다른 언어에서 Conponent 라는 이름을 흔히 불리는 체크박스, 버튼, 에디트, 라디오 버튼, 이미지 박스 등등을 가리키는 안드로이드의 용어이다.

ListView는 그러한 View들이 모이는 viewGroup 중 하나이다. 리스트가 화면에 보여질 수 있는 갯수보다 많아지면 자연스럽게 스크롤이 가능하며, 다양한 뷰로 이루어진 여러개의 리스트를 보여주기 때문에 여러 view들을 담는 역할을 한다고 할 수 있으며 이러한 역할을 지니는 것들은 viewGroup이라고 보면 된다. Layout도 viewGroup을 상속받아서 화면을 구분하고 정렬해주는 역할을 한다.

아무튼 이렇게 중요한 ListView를 어떻게 customizing 해야 하는지에 대해 알아보자.

1. 작업 순서

- ListView가 보여질 위치 결정.

- ListView에 보여질 item에 대한 Layout 구성

- item data에 대한 클래스 정의

- Adapter 클래스 정의 및 구현

- Adapter 생성 후 ListView 와 지정, 연동

- ListView 클릭 이벤트 처리.

2. Listview 구현

 2.1 - ListView가 보여질 위치 결정. (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="stex.customlistview.MainActivity">

    <ListView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listView">
    </ListView>
</RelativeLayout>

 2.2 - ListView에 보여질 item에 대한 Layout 구성 (listview_item.xml 생성)

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/listView_Image"
        android:layout_weight="1" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="4">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/titleText"
            android:textSize="24dp"
            android:textColor="#000000"
            android:gravity="center_vertical"
            android:layout_weight="2" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/contextText"
            android:textSize="16dp"
            android:textColor="#666666"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

 2.3 - item data에 대한 클래스 정의

public class ListViewItem {
    private Drawable iconDrawable;
    private String titleStr;
    private String descStr;

    public void setIcon(Drawable icon) {
        iconDrawable = icon;
    }

    public void setTitle(String title) {
        titleStr = title;
    }

    public void setDesc(String desc) {
        descStr = desc;
    }

    public Drawable getIcon() {
        return this.iconDrawable;
    }

    public String getTitle() {
        return this.titleStr;
    }

    public String getDesc() {
        return this.descStr;
    }
}

 2.4 - Adapter 클래스 정의 및 구현

public class ListViewAdapter extends BaseAdapter{

    private ArrayList<ListViewItem> listViewItemList = new ArrayList<ListViewItem>();

    public ListViewAdapter() {

    }

    @Override
    public int getCount() {
        return listViewItemList.size();
    }

    @Override
    public Object getItem(int position) {
        return listViewItemList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        final int pos = position;
        final Context context = parent.getContext();

        if(convertView == null){
            LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.listview_item, parent, false);
        }

        ImageView iconImageView = (ImageView) convertView.findViewById(R.id.listView_Image);
        TextView titleTextView = (TextView) convertView.findViewById(R.id.titleText);
        TextView contextTextView = (TextView) convertView.findViewById(R.id.contextText);

        ListViewItem listViewItem = listViewItemList.get(position);

        iconImageView.setImageDrawable(listViewItem.getIcon());
        titleTextView.setText(listViewItem.getTitle());
        contextTextView.setText(listViewItem.getDesc());

        return convertView;
    }
}

2.5 - Adapter 생성 후 ListView 와 지정, 연동 (MainActivity.java)

public class MainActivity extends AppCompatActivity {

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

        ListView listview;
        ListViewAdapter adapter;

        adapter = new ListViewAdapter();
        listview = (ListView) findViewById(R.id.listView);
        listview.setAdapter(adapter);

        adapter.addItem(ContextCompat.getDrawable(this, R.drawable.ic_3d_rotation_black_36dp), "Title 1" , "Context 1");
        adapter.addItem(ContextCompat.getDrawable(this, R.drawable.ic_3d_rotation_black_36dp), "Title 2" , "Context 2");
        adapter.addItem(ContextCompat.getDrawable(this, R.drawable.ic_3d_rotation_black_36dp), "Title 3" , "Context 3");

        
    }
}

 2.6 - ListView 클릭 이벤트 처리.

public class MainActivity extends AppCompatActivity {

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

        ListView listview;
        ListViewAdapter adapter;

        adapter = new ListViewAdapter();
        listview = (ListView) findViewById(R.id.listView);
        listview.setAdapter(adapter);

        adapter.addItem(ContextCompat.getDrawable(this, R.drawable.ic_3d_rotation_black_36dp), "Title 1" , "Context 1");
        adapter.addItem(ContextCompat.getDrawable(this, R.drawable.ic_3d_rotation_black_36dp), "Title 2" , "Context 2");
        adapter.addItem(ContextCompat.getDrawable(this, R.drawable.ic_3d_rotation_black_36dp), "Title 3" , "Context 3");

        listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                ListViewItem item = (ListViewItem) parent.getItemAtPosition(position);

                String titleText = item.getTitle();
                String contextText = item.getDesc();
                Drawable drableIcon = item.getIcon();

                Toast.makeText(MainActivity.this, "Title : " + titleText + " Context : " + contextText, Toast.LENGTH_SHORT).show();
            }
        });
    }
}

3. 실행 화면