안드로이드 튜토리얼 목차 - Android Tutorial List

[Android Tutorial #06] 데이터를 리스트로! ListView(리스트뷰)

 
 ListView(리스트뷰) 레퍼런스 - Developer.Android.com:ListView
 ListActivity(리스트액티비티) 레퍼런스 - Developer.Android.com:ListActivity  
 



 가장 기본적인 형태의 리스트뷰

이번에는 여러가지 데이터를 리스트 형태로 보여줄 수 있는 ListView(리스트뷰)에 대해서 알아보도록 할게요.

리스트뷰는 여러가지 일관된 형태의 데이터를 화면에 리스트 형태로 보여줄때 사용합니다.
여기서 일관된 형태는 기본적으로 주어지는 String, Integer 클래스등의 데이터 타입을 사용할수도 있고, 사용자가 직접 만든 클래스를 사용할수도 있습니다.

그리고 이런 일관된 형태의 데이터를 많이~~~ 가지고 있다고 생각해봅니다.
예를들면, String 형식의 데이터를 100개, 1000개 정도 가지고 있을 수 있겠죠.
그리고 이 100개, 1000개의 데이터를 리스트에 보여주려고 합니다.



스트링 배열 만들기

우선 가장 기본적으로 생각할 수 있는건, String[] 같은 스트링 배열이겠죠.

간단하게 스트링 배열을 만들어 봅니다. 아래 코드 처럼 배열을 만들수 있을겁니다.
많지는 않지만, 제 블로그를 포함해서 제 지인들의 블로그를 배열에 담아보았습니다.




main.xml에 ListView 추가하기

이제 이 데이터를 리스트 형태로 보여주어야 합니다.

우리는 이전 예제에서 버튼을 레이아웃에 배치하고 버튼을 클릭하는 이벤트를 만들어 보았죠.
(이전 예제 : [Android Tutorial #05] Activity 전환하기(액티비티/화면 전환하기))
그때 버튼을 레이아웃에 배치했던것 처럼 리스트뷰를 레이아웃에 배치해 봅니다.

자동으로 생성된 기본 레이아웃을 그대로 두었다면, main.xml을 고치면 됩니다.

res/main.xml


이렇게 리스트뷰를 추가해 보았습니다. 아이디를 main_lv_blog 라고 지정했습니다.
이 아이디를 통해 자바코드에서 R.id.main_lv_blog 와 같이 이 리스트뷰를 찾을 수 있습니다.



AndroidTutorial06.java(extends Activity)에 리스트뷰 연결하기

프로젝트를 AndroidTutorial06 이라고 만들고, 자동적으로 기본 액티비티를 추가하도록 하였더니,
AndroidTutorial06.java라는 액티비티 클래스가 만들어져있습니다.
(프로젝트를 생성하는 방법은 http://croute.me/516 을 참고하세요.)

이곳에 위에서 만들었던 스트링 배열을 추가해 봅니다. 
제대로 추가했다면, 아래 코드처럼 될 것입니다.

src/me.croute.tutorial.example06.AndroidTutorial06.java - 스트링배열 추가



src/me.croute.tutorial.example06.AndroidTutorial06.java - 리스트뷰 연결

 

ListView 변수를 lvBlog 라고 만들고, findViewById 메소드를 이용해 아이디가 main_lv_blog 인 뷰를 찾아와 lvBlog에 연결해 주었습니다. 
(findViewById는 액티비티 및 View에서 ID를 이용해 뷰를 찾을 수 있도록 지원해주는 메소드입니다.)

편의상 레이아웃에서 아이디를 lv_blog 라고 지정하고, 비슷하게 액티비티에서도 lvBlog라고 지정해보았습니다.

이렇게 리스트뷰를 레이아웃에 만들고 액티비티에서 연결했다면, 이제 데이터를 리스트뷰에 보여줄 차례입니다.



AndroidTutorial06.java(extends Activity), 리스트뷰에 데이터 보여주기

레이아웃의 리스트뷰와 액티비티의 리스트뷰는 위에서 연결해 주었습니다.
이번에는 데이터를 리스트뷰에 보여주어야겠죠.

데이터를 리스트뷰에 보여주기 쉽도록, 제공되는 클래스가 있습니다. 바로 Adapter라는 녀석이죠.
여러가지 어뎁터들이 있지만, 나중의 확장성을 고려해 ArrayAdapter<?> 를 사용하도록 합니다.

ArrayAdapter의 subclass를 만들어서(ArrayAdapter를 상속받은 클래스를 만들어서) 사용할수도 있겠지만, 지금은 기본적인 String 형식의 데이터만을 보여줄것이기 때문에, ArrayAdater를 바로 사용해보도록 합니다.

String 형식의 데이터를 처리하는 ArrayAdapter를 사용할 것이므로, ArrayAdapter<String> 이라고 사용하면 됩니다.

ArrayAdapter는 입력된 데이터를 입력된 레이아웃 형태에 맞게 처리해서 리스트뷰의 한 행 마다 보여주도록 하는 클래스입니다.

ArrayAdapter를 new 해서 사용할때는 여러가지 생성자가 있는데, 여기서는 new ArrayAdapter<String>(Context context, int textViewResourceId, String[] objects) 을 사용해 보도록 합니다.

첫번째 파라미터인 Context context에는 View를 생성할 기반을 제공하는 Context를 넣어주면 됩니다. ApplicationContext나 BaseContext, 또는 Activity를 넣어주어도 됩니다.
여기서는 간단하게 리스트뷰의 한 행으로 보여줄 텍스트뷰만 생성할 것이므로 ApplicationContext를 넣어줍니다.
(이렇게 파라미터로 전달한 Context의 활용은 다음 예제에서 보도록 할게요.)

두번째 파라미터인 int textViewResourceId는 레이아웃을 넣어주면 됩니다.
기본적인것들만 가져다 사용하기로 했으니, 안드로이드에서 기본적으로 제공하는 레이아웃을 넣어줍니다.
우리가 만들고 있는 프로젝트의 R 파일과 겹치지 않게, android.R.layout.simple_list_item_1 을 넣어줍니다. 이 레이아웃은 텍스트뷰 하나만을 가지고 있는 레이아웃입니다. 쉽게 가져다 사용할 수 있도록 안드로이드에서 기본적으로 제공해 줍니다.

안드로이드 리소스 더보기


세번째 파라미터인 String[] objects 에는 데이터를 넣어주면 됩니다.
우리는 위에서 블로그 주소들을 넣어놓은 스트링 배열의 데이터를 만들었죠. 이 배열을 넣어줍니다.

이 세가지 파라미터를 넣어서 아래와 같이 코딩을 해줍니다.

src/me.croute.tutorial.example06.AndroidTutorial06.java - 어댑터 생성

하지만!!! 여기서 끝이 아닙니다.

화룡점정이라고, 용의 눈을 마저 그려줘야죠. 여기까지만 하면, 화면에 데이터들이 보여지지 않습니다.
어댑터를 만들었지만, 이 어댑터를 리스트뷰에서 사용한다고 해주는 코드가 없기때문에죠.
리스트뷰와 어댑터를 연결해주어야!!!! 이 어댑터를 통해 데이터들을 리스트뷰에 보여줄 수 있게됩니다.

마저 연결해 봅니다.

src/me.croute.tutorial.example06.AndroidTutorial06.java - 리스트뷰와 어댑터 연결

리스트뷰에 어댑터를 연결하는 것은, ListView에서 제공하는 setAdapter 메소드를 통해서 할 수 있습니다.
이름만 딱!! 봐도 리스트뷰에 어댑터를 세팅하는구나~~~ 하는 느낌이 듭니다.



결과확인 - 스크린샷과 예제 프로젝트

이제 이뮬레이터나 디바이스를 통해서 결과를 확인해 봅니다.

메뉴의 Run 아이콘이나, 


[프로젝트] - [마우스 우클릭] - [Run as] - [1 Android Application] 을 선택해 실행 해 줍니다.




실행화면을 확인해봅니다.
우리가 만들었던 데이터들이 제대로 리스트뷰에 출력되는 것을 확인할 수 있습니다.




예제 프로젝트



 
 리스트뷰 정리

 1. 리스트뷰를 레이아웃에 만든다.

 2. 레이아웃의 리스트뷰와 액티비티의 리스트뷰를 연결한다.

 3. 데이터를 만든다. 예제에서는 스트링 배열을 사용했다.

 4. 어레이 어댑터를 만든다.

 5. 어댑터와 리스트뷰를 연결한다.

 6. 실행한다.
 



Posted by croute

댓글을 달아 주세요

  1. 문병무 2012.01.06 20:43 신고  댓글주소  수정/삭제  댓글쓰기

    상세한 설명 정말 감사합니다. 가장 기본형부터 서서히 깊어지는 설명 방식은 정말 탁월합니니다. 이렇게 상세하게 설명된 곳이 잘 없더라구요.!! 앞으로도 많은 가르침 부탁드려요!!

  2. BlogIcon darka 2012.02.28 16:45 신고  댓글주소  수정/삭제  댓글쓰기

    상세한 설명 감사합니다.. ㅎㅅㅎ