안드로이드 튜토리얼 목차 - 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를 실행하는건 지금까지 해왔던 대로 해주면 됩니다.





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

  
구현 결과 확인 


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

예제 프로젝트



Posted by croute

댓글을 달아 주세요

  1. 생각고민 2012.04.12 01:41  댓글주소  수정/삭제  댓글쓰기

    리스트큐의 아이템 클릭시 activity 로 전환할 수없을까요???ㅠㅠ

    • Favicon of https://croute.me BlogIcon croute 2012.04.12 16:14 신고  댓글주소  수정/삭제

      intent의 내용을 바꾸면 됩니다.

      예를들면,

      A액티비티에서 B액비티를 실행하려고 할때

      Intent intent = new Intent(A.this, B.class);

      startActivity(intent);

      이렇게 바꾸면 되죠.

  2. 물깨 2012.04.15 23:58  댓글주소  수정/삭제  댓글쓰기

    자세한 글 잘 봤습니다..
    그런데 정말 궁금한게 있어요~
    위의 리스트뷰에선 URL 텍스트를 가져와서 그대로 쓰는 방식인데..
    제가 하고 싶은건 예를들어..
    리스트뷰에서 상품명이 나열되어 있는 상태에서
    하나의 상품명을 클릭하면 그 상품이 가지고 있는 유일한 코드 값을 가지고 새로운 액티비티에서 상세하게 검색하려고 하거든요.
    코드값을 어떻게 찾아야 하는건가요..?
    물론 코드나 아이디 값들은 리스트뷰에서 보이지 않아야 겠구요..ㅜㅜ
    답변 주시면 감사하겠습니다..

  3. BlogIcon ㄱㄱ 2012.05.19 11:08  댓글주소  수정/삭제  댓글쓰기

    리스트뷰에 전화번호가 있는데 그걸 누르면 다이얼에 전화번호가 입력되는 기능을 넣고싶은데 인텐트를 어떻게 사용해야 할까요??

  4. 김진호 2012.10.06 20:43  댓글주소  수정/삭제  댓글쓰기

    이거저거 공부하다보니 형블로그 자꾸들어오네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    감사해요 ~~ ㅋㅋㅋㅋㅋㅋㅋ

  5. BlogIcon 꿈에도전하다 2012.11.22 20:29  댓글주소  수정/삭제  댓글쓰기

    private string[] url = "홈페이지 이동", "페이스북" 이런식으로 리스트뷰의 이름을 클릭하면 지정해노은 홈페이지로 들어가게 하고 싶은데 어떻게 하면 좋을까요??

  6. BlogIcon 박정호 2013.01.17 19:24  댓글주소  수정/삭제  댓글쓰기

    블로그 내용 잘 보고서 많이 배웠습니다~ 감사합니다.
    어제 오늘 이틀동안 봐도 응용해 보려니 도통 안되서 댓글달아봅니다.
    위에 분과 거의동일한 내용인데요 리스트상에서는 네이버 다음 이런식으로 보이고
    클릭 시 사이트로 넘어가 보려고 하는데 잘 안되는군요,, 시간이 되신다면 알려주시면 감사하겠습니다

  7. BlogIcon 박정호 2013.01.17 19:24  댓글주소  수정/삭제  댓글쓰기

    블로그 내용 잘 보고서 많이 배웠습니다~ 감사합니다.
    어제 오늘 이틀동안 봐도 응용해 보려니 도통 안되서 댓글달아봅니다.
    위에 분과 거의동일한 내용인데요 리스트상에서는 네이버 다음 이런식으로 보이고
    클릭 시 사이트로 넘어가 보려고 하는데 잘 안되는군요,, 시간이 되신다면 알려주시면 감사하겠습니다

    • Favicon of https://croute.me BlogIcon croute 2013.01.17 19:37 신고  댓글주소  수정/삭제

      예를들어 Domain 이라는 클래스를 하나 만듭니다.

      public class Domain {
      String name;
      String url;

      public Domain(String name, String url) {
      ....
      }

      getter / setter
      }

      그리고 액티비티에서는

      ArrayList<Domain> domainList = new ArrayList<Domain>();
      domainList.add("네이버", "http://naver.com";);

      어뎁터에서도 데이터 잘 세팅해주고... 하면됩니다.

      http://croute.me/413 이런식으로 어뎁터를 써야합니다.

  8. BlogIcon 정지환 2013.07.26 15:59  댓글주소  수정/삭제  댓글쓰기

    지금 탭을 6개 만들어서 탭마다 다른 엑티비티 화면으로 넘어가게끔 만들어 두었는데요.
    텍스트뷰,이미지뷰 등등 이런건 각각 따로따로 되는데
    리스트 뷰만 뜨질않네요. 명령이 먹히질 않는것 같습니다.
    메일로 소스전체를 보내드리고싶은데 한번 봐주실 수 있을까요?

    • 정지환 2013.07.26 17:22  댓글주소  수정/삭제

      아 제 메일주소는
      tpxkwm@naver.com입니다
      실례가 안된다면 부탁드릴게요..

  9. 멘멘붕 2013.11.21 13:19  댓글주소  수정/삭제  댓글쓰기

    안녕하세요..
    ㅠ개발자 초보인데요 도움을 청하고자 글을남겨요..
    같은 레이아웃인데 java는 다릅니다.
    B.java에서 리스트뷰 클릭시 A.java에있는 팝업창을 띄우고싶은데 감은잡히는데 너무 헷갈리네요..

  10. 배그핵 2018.11.10 20:01  댓글주소  수정/삭제  댓글쓰기

    안녕하세요^^