본문 바로가기

Android Tutorial/ListView

[Android Tutorial #07] ListView(리스트뷰)와 클릭 이벤트


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

[Android Tutorial #07] ListView(리스트뷰)와 클릭 이벤트 

이번에는 저번에 만들었던 기본적인 ListView(리스트뷰) 예제에 이어서 리스트뷰에서 클릭 이벤트를 처리하는 방법을 알아보도록 하겠습니다.

리스트뷰에서 클릭이벤트를 처리하는 방법은 크게 2가지 방법이 있습니다.

1. ListView(리스트뷰)를 보여주는 Activity(액티비티)에서 OnItemClickListener를 사용하는 방법.
2. ListView(리스트뷰)의 Adapter(어댑터)에서 OnClickListener를 사용하는 방법.


우리는 기본 클래스인 ArrayAdapter를 사용하였으므로, 어댑터 안에서 OnClickListener를 사용할수 는 없기때문에, 대신 Activity(액티비티)에서 OnItemClickListener를 사용하는 방법을 알아보도록 하겠습니다.
(후에, Custom ArrayAdapter에서 다뤄보도록 하겠습니다.)



이전 예제에서 간단한 리스트뷰를 만들어 보았습니다. 그곳에 덧붙여서 클릭 이벤트를 처리해보도록 할거에요. 

 클릭 이벤트를 처리 하기 위해, OnItemClickListener라는 인터페이스를 사용하게 되는데요,
 이때, 이 인터페이스를 상속해서 사용할 것인지(new OnItemClickListener),
 아니면 구현해서 사용할 것인지를 정해주어야 합니다. 
 저의 경우 http://croute.me/326 에서 정리했다시피, 구현하는 방법을 사용하겠습니다.  

편의상 프로젝트를 새로 생성해서 작업하도록 하겠습니다.

프로젝트 이름 : AndroidTutorial07
액티비티 이름 : AndroidTutorial07Activity
패키지 이름 : me.croute.tutorial.example07


이 예제에서는 블로그 주소를 데이터로 하는 리스트뷰를 만들고, 리스트뷰에서 클릭 이벤트가 일어났을 때, 해당 블로그로 이동하는 기능을 구현해보도록 하겠습니다.


 구현하려는 내용

 1. 리스트뷰에 사용할 데이터를 스트링 배열(String[])으로 만든다.

 2. 리스트뷰에 사용할 어댑터를 ArrayAdapter<String>으로 생성한다.

 3. 리스트뷰에 2에서 생성한 어댑터를 설정한다.

 4. 액티비티에 리스트뷰의 클릭이벤트를 처리해줄 OnItemClickListener 구현한다.
 
 5. 리스트뷰에 4에서 구현한 아이템클릭리스너 OnItemClickListener를 설정한다.

 6. 클릭 이벤트를 처리해줄 onItemClick() 메소드의 내용을 재구현 해준다.
  



AndroidTutorial07ActivityOnItemClickListener 구현하기

우선 Activity(액티비티)에 아래의 코드를 추가해줍니다.

AndroidTutorial07Activity.java - implements OnItemClickListener 추가



이렇게 implements OnItemClickListener를 추가하고 나면, 아래 이미지처럼 에러가 발생할겁니다.




빨간 엑스박스를 눌러주면 아래와 같은 화면을 볼 수 있습니다.
OnItemClickListener를 사용하기 위해서는 반드시 구현되어야 하는 메소드가 있는데 그 메소드를 구현하지 않아서 이런 에러가 발생한 것입니다.
Add unimplemented methods 를 클릭합니다




Add unimplemented methods를 클릭하면 onItemClick(...) 이라는 메소드가 추가된 것을 볼 수 있습니다.



5번 예제-http://croute.me/514-에서 배웠던 OnClickListener 를 사용하는 것과 마찬가지로, 
onItemClick()이라는 메소드는 ListView(리스트뷰)의 한 항목이 클릭 되었을 때, 콜백되어 호출 됩니다.
우리는 
리스트뷰에서 클릭 이벤트 발생시 onItemClick 호출 될것을 알기 때문에, 이곳에 클릭 이벤트에 대한 처리를 구현하면 되는 것이지요. 

이제 onItemClick을 구현해 보도록 합니다.



onItemClick() 구현 - 클릭 이벤트 처리

onItemClick()메소드는 리스트뷰의 클릭 이벤트를 처리하는 메소드입니다. 그리고, 리스트뷰는 같은 형태의 데이터가 리스트형식으로 보여지는 뷰이죠.
리스트뷰의 어떤 항목이 선택되었을 때, onItemClick()이 실행될 것이고, 파라미터로 몇번째 항목이 선택되었는지 등의 데이터가 넘어오게 됩니다. 이 파라미터들을 이용해서 클릭된 항목에 맞는 데이터를 찾아와서, 해당 데이터에 대해 올바른 처리를 해주면 됩니다.



1. 데이터 찾아오기

데이터를 찾아오는 방법은 크게 2가지가 있습니다.
하나는 우리가 만들어둔 데이터(여기서는 스트링 어레이)로 부터 데이터를 가져오는 것이고, 다른 하나는 파라미터로 넘어온 AdapterView(어댑터뷰)로부터 데이터를 가져오는 것입니다.

두가지 경우에 대한 코드를 모두 보도록 하겠습니다.
  



첫번째 파라미터로 넘어온 parent(AdapterView)에서, 세번째 파라미터로 넘어온 position을 이용해서 클릭된 항목이 데이터를 꺼내오는 방법과,
AndroidTutorial07Activity에서 만들었던 스트링 어레이에서, 세번째 파라미터로 넘어온 position을 이용해 클릭된 항목의 데이터를 꺼내오는 방법입니다.

두가지 코드 모두 기능적으로 같은 결과를 가져오게됩니다. 



2. 로그캣을 통해 클릭된 항목(아이템)의 포지션과 데이터를 확인
 
로그캣 뷰가 활성화 되있지 않은 경우에는 Window 메뉴를 이용해 로그캣 뷰를 추가해 줍니다.




 


로그캣에 출력되는 로그의 종류는 5가지로 아래와 같습니다.

verbosedebuginformationwarningerror

실제로 로그캣에 출력될 때, 위의 색상으로 출력이 됩니다.
애플리케이션을 실행시켜 로그를 확인해 보면, 이런식으로 출력이 될거에요.




3. String blogUrl 을 Uri blogUri 로 바꾸기

사실 클릭이벤트에 대한 처리는 할 수 있게되었지만, 여기서는 좀 더 나아가, 블로그 주소로 가는 브라우저를 실행시켜보는것 까지 해보기로 했습니다.
안드로이드에서는 Url 보다는 Uri를 사용하기 때문에, String으로된 데이터를 Uri로 바꾸어 줍니다.
1 에서 데이터를 꺼내서 String 형식의 blogUrl 이라는 변수에 넣어주었습니다.
그리고 2 에서 해당 데이터를 확인했구요.
이제 이 주소를 Uri 형태로 바꾸어주는데, 아래의 코드를 사용하면 됩니다.





4. 지정한 Uri를 view할 수 있는 인텐트 만들기

이제 위에서 만든 블로그 주소의 Uri 를 가지고 Intent를 만들어줍니다.
Intent의 여러 생성자 중에서 Intent(String action, Uri uri) 생성자를 사용합니다.






5. startActivity() 메소드를 이용해 intent를 실행하기

Intent를 실행하는건 지금까지 해왔던 대로 해주면 됩니다.





이제 모든 구현이 끝났습니다.
애플리케이션을 실행해봅니다. 

  
구현 결과 확인 


스크린샷입니다. 하지만, 바뀐걸 스크린샷으로는 보여드릴수가 없군요.
대신 예제프로젝트를 올립니다.

예제 프로젝트