<새롭게 내용 수정했습니다~!!!>

오늘 올릴 글 내용은 리스트 뷰를 사용시 개발자가 원하는 대로 사용하는 방법입니다.

일반적으로 리스트 뷰라고 생각하면

 


이렇게 사용을 많이 하시죠?
그런데 리스트 사용을 이미지도 넣고 싶고  타이틀과 작은 타이틀을 같이 넣고 싶을때는 어떻게 해야할까요?

방법은 간단합니다. 우선 리스트의 각 아이템에 보여주고 싶은 모양을 설정하세요.

저는 예제로 다음과 같이 설정하겠습니다.
 



이미지가 하나 들어가고 그 옆에 Main Title과 Sub Title이 들어가도록 설정을 해보려 합니다.

이렇게 하기 위해서 저는 첫번째로 위의 그림과 같이 각 아이템의 틀을 만들기 위한 xml 을 구성하겠습니다.





위의 그림과 같이 구성하였는데요 화면의 크기는 신경 안쓰셔도 되요. 어짜피 이 부분은 리스트에 보여지게 될 하나의 Item에 대한 부분이기 때문이죠. 소스 구성은 아래와 같습니다.


이제 아이템에 대한 틀을 만들고 나면 리스트에 연결 시켜줄 어댑터와 각 아이템에 들어갈 정보를 저장할 클래스를 만들어줘야겠죠? 소스 코드를 바로 입력하겠습니다.
- Custom Adapter & Custom List Data Class (Custom_List_Adapter.java)


이렇게 까지 구성하셨으면 이제 거의 다 했네요^^
이제 실질적으로 리스트를 뿌려줘보도록 하겠습니다.

- Custom_listActivity.java

- main.xml


 

위의 그림처럼 각 아이템이 설정 되어서 나왔습니다.
각 아이템에 대한 클릭 이벤트는 OnItemClickListener를 이용하여서 일반 리스트뷰와 같은 방법으로 사용하시면 된답니다.

간단하게 보여드리려구 소스가 좀 짧긴한데요.
간략하게 보여드리기 위해서 최대한 소스를 줄였습니다.

오늘도 허접한 저의 실력을 글로 올리네요ㅠ 혹시나 잘못된 부분이 있다면 꼭꼭 알려주세요~!
오늘 하루도 좋은 하루 되세요^^



  1. 이전 댓글 더보기
  2. 2012.03.07 00:35

    비밀댓글입니다

  3. AHAS 2012.03.17 13:38 신고

    흠... 계속 오류가 나는데 파일로좀 보내주실 수 있으신지요. ㅋ;;
    woosi97@naver.com

    • 냥아 2012.03.22 08:43 신고

      안녕하세요~ 글을 너무 늦게 봤네요 ㅠ 보내드렸습니다~

  4. 피아트리체 2012.03.22 09:48 신고

    깔끔하게 정리되어있네요
    도움이 많이 되었습니다.

    잘 보고 갑니다~~~

    • 냥아 2012.03.22 12:40 신고

      글 읽어주셔서 감사합니다~^^
      도움이 되었다니 다행이네요~

  5. djwls 2012.05.13 20:29 신고

    이 소스대로 하면 예기치못한 오류가 발생했다고 하는데요
    메니페스트나 뭐 이런거는 변경할 것 없나요?? ㅜㅜ
    저게 소스 완전한 것 맞나요 ㅜㅜ

    • 냥아 2012.05.14 16:41 신고

      음.. 어디서 에러가 나시죠???
      잘되는거 같은데;; 에러부분을 알려주세요~

  6. 윗님 2012.07.09 14:35 신고

    xml파일이 전부 소문자로 되어있습니다.
    listview->ListView, textview->TextView, linearlayouet->LinearLayout등 몇개 수정하시면 정상동작합니다.
    아 xml파일의 맨 윗줄 주석처리 없애고 자바파일의 맨 아랫줄(xml코드)도 지워야 하더군요.

    • 냥아 2012.07.09 16:46 신고

      정말 제 소스를 열심히 봐주셨군요 감사합니다ㅠ

      님의 댓글 보고 바로 수정을 했는데

      SyntaxHighlighter 써서 그런가;; 대문자로 바꿨는데도 그러네요;;

      그냥 SyntaxHighlighter 안쓰더라도 원래대로 바꿔놓겠습니다. 감사합니다

  7. Jiol 2013.04.07 00:55 신고

    이런경우 sorting은 어떻게 처리해줘야 될까요..

    • 냥아 2013.04.11 14:28 신고

      안녕하세요. 답변이 늦었습니다.

      sorting 할 값을 하나 지정해서 그 값으로 Array를 sorting 하시면 되겠네요.

      아니면 만약에 내부 DB를 이용하신다면 내부 DB의 값을 sorting해서 가져오셔도 될거 같습니다.

      현재 위에 있는 내용은 커스텀 리스트의 생성에 관한 간단한 예를 들어놓은거라, 굳이 저렇게 데이터 클래스를 사용하지 않으셔도 됩니다.

  8. 2013.05.11 15:31

    비밀댓글입니다

    • 냥아 2013.05.22 16:24 신고

      안녕하세요 냥아 블로거입니다.

      메일로 보내드렸습니다. 글 읽어주셔서 감사합니다~

  9. 2013.05.14 12:24

    비밀댓글입니다

    • 냥아 2013.05.22 16:24 신고

      안녕하세요 냥아 블로거입니다.

      메일로 보내드렸습니다. 글 읽어주셔서 감사합니다~

  10. 최인용 2013.06.04 01:34 신고

    private ArrayList<Custom_List_Data> Array_Data;
    private Custom_List_Data data;
    private Custom_List_Adapter adapter;

    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.qwe);

    Array_Data = new ArrayList<Custom_List_Data>();
    data = new Custom_List_Data(R.drawable.aa, "가슴", "");
    Array_Data.add(data);
    data = new Custom_List_Data(R.drawable.bb, "등", "");
    Array_Data.add(data);
    data = new Custom_List_Data(R.drawable.dd, "하체", "");
    Array_Data.add(data);
    data = new Custom_List_Data(R.drawable.cc, "복근", "");
    Array_Data.add(data);
    ListView custom_list = (ListView)findViewById(R.id.Custom_list);
    adapter = new Custom_List_Adapter(this,
    android.R.layout.simple_list_item_1, Array_Data);
    custom_list.setAdapter(adapter);

    }

    }
    이렇게 적엇는대 여기서 클릭 이벤트 처리 어디다가 써야되나요?
    이미지 ,가슴 이리 나오는 곳 누르면 다른 xml로 넘어가게..
    OnItemClick 리스너를 등록 이거쓰라고 나와잇는대
    어디다가 써야되는줄 모르겟어요..

    • 냥아 2013.06.04 11:58 신고

      안녕하세요 냥아 블로거 입니다.

      우선 글 주신부분에서 이어가자면

      private ArrayList<Custom_List_Data> Array_Data;
      private Custom_List_Data data;
      private Custom_List_Adapter adapter;

      @Override
      public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.qwe);

      Array_Data = new ArrayList<Custom_List_Data>();
      data = new Custom_List_Data(R.drawable.aa, "가슴", "");
      Array_Data.add(data);
      data = new Custom_List_Data(R.drawable.bb, "등", "");
      Array_Data.add(data);
      data = new Custom_List_Data(R.drawable.dd, "하체", "");
      Array_Data.add(data);
      data = new Custom_List_Data(R.drawable.cc, "복근", "");
      Array_Data.add(data);
      ListView custom_list = (ListView)findViewById(R.id.Custom_list);
      adapter = new Custom_List_Adapter(this,
      android.R.layout.simple_list_item_1, Array_Data);
      custom_list.setAdapter(adapter);
      custom_list.setOnItemClickListener(testListener); //이부분 이름은 자기 맘대로 하셔도 되고 this로 해서 사용하실거면 클래스에 implement OnItemClickListener를 붙여주셔야합니다.
      }

      OnItemClickListener testListener = new OnItemClickListener() {

      @Override
      public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3)
      {
      //arg2가 클릭한 리스트 목록의 위치입니다.
      // 이 위치에 따라 다른 액티비티로 이동하게끔 인텐트 사용하시면 되겠습니다.

      }};
      }

      클릭 이벤트를 적용하는 방법이 많고 다양하지만, 하나의 예로 위와 같이 작성하였습니다. 해보시고 문제 있으시면 글남겨주세요^^

  11. 최인용 2013.06.04 23:43 신고

    public class BUTTON extends Activity {
    /** Called when the activity is first created. */
    private ArrayList<Custom_List_Data> Array_Data;
    private Custom_List_Data data;
    private Custom_List_Adapter adapter;


    @Override
    public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.qwe);

    Array_Data = new ArrayList<Custom_List_Data>();

    data = new Custom_List_Data(R.drawable.aa, "가슴",
    "");
    Array_Data.add(data);

    data = new Custom_List_Data(R.drawable.bb, "등",
    "");
    Array_Data.add(data);

    data = new Custom_List_Data(R.drawable.dd, "하체",
    "");
    Array_Data.add(data);

    data = new Custom_List_Data(R.drawable.cc, "복근",
    "");

    Array_Data.add(data);
    ListView custom_list = (ListView)findViewById(R.id.Custom_list);
    adapter = new Custom_List_Adapter(this,
    android.R.layout.simple_list_item_1, Array_Data);
    custom_list.setAdapter(adapter);
    custom_list.setOnItemClickListener(testListener);

    //이부분 이름은 자기 맘대로 하셔도 되고 this로 해서 사용하실거면 클래스에 implement OnItemClickListener를 붙여주셔야합니다.
    }

    OnItemClickListener testListener = new OnItemClickListener() {
    //arg2가 클릭한 리스트 목록의 위치입니다.
    // 이 위치에 따라 다른 액티비티로 이동하게끔 인텐트 사용하시면 되겠습니다.
    @Override
    public void onItemClick(AdapterView<?> parant, View v, int position, long id) {
    // TODO Auto-generated method stub
    switch (position) {
    case 0:
    Intent it = new Intent(BUTTON.this, two.class);

    startActivity(it);
    break;
    case 1:
    Intent it1 = new Intent(BUTTON.this, back.class);
    startActivity(it1);
    break;
    case 2:
    Intent it2 = new Intent(BUTTON.this, leg.class);
    startActivity(it2);
    break;
    case 3:
    Intent it3 = new Intent(BUTTON.this, bokgn.class);
    startActivity(it3);
    break;
    case 4:
    break;
    제가 이렇게 햇는대 가슴 하구 등만 인텐트가 되네요
    하체하고 복근은 왜안되는거죠?

    • 냥아 2013.06.05 13:55 신고

      안녕하세요. 현재 소스만 봐서는 잘 모르겠네요...
      디버깅을 통해 목록 클릭시 포지션값이 어떻게 넘어오는지 확인해보시면 바로 알수 있으시겠네요~

  12. 은인짱짱 2013.06.18 01:26 신고

    저는 <CUSTOM_LIST_DATA>이 부분이 들어간 곳이 다 에러가 나는데 왜 그런건지 알수 있을까요??

    • 냥아 2013.06.18 10:14 신고

      안녕하세요 냥아블로거입니다.

      syntaxhighlighter를 제가 잘못써서 그런지 소스 내용안에 잘못 들어간 부분이 있습니다.

      -Custom Adapter & Custom List Data Class (Custom_List_Adapter.java)
      85번째 줄 </custom_list_data> ... 잘못들어간 내용

      - Custom_listActivity.java
      33번째 줄 </custom_list_data> ...잘못 들어간 내용

      이 문제가 아니라면

      Custom_List_Data 클래스를 Adapter 내부에 같이 넣지 마시고 따로 클래스 파일 생성하셔서 작업하셔도 됩니다.

  13. 2013.08.07 17:32

    비밀댓글입니다

  14. 라이너 2013.10.27 18:53 신고

    저도 위에분과 같은 현상이 ㅠㅠㅠ

  15. 2013.11.29 21:15

    비밀댓글입니다

    • 냥아 2013.12.16 10:09 신고

      안녕하세요 냥아 블로거입니다.

      제가 글을 너무 늦게 봤네요.
      지금은 블로그에 있는 소스가 없어서 그런데 제가 다른 예제로 만들어서 보내드리도록 하겠습니다.

  16. KMCPE 2013.12.13 22:19 신고

    Position을 쓰려고 했으나,
    데이터에 있는것중 폰에 깔려있는 앱을 리스트에 추가시키도록 하였는데
    position의 위치가 정확하지 않아 잘 모르겠는데
    subtitle을 불러오는 방법은 없는것인가요?
    또한 for문으로 폰에 깔려있는앱을 불러오는것을 했는데 하나만 추가되는데
    다른방법은 없는지요?

    • 냥아 2013.12.16 10:08 신고

      안녕하세요 냥아 블로거입니다.

      Data 클래스는 제가 예를 들기위해 만든거라 KMCPE님께서 입맛에 맞게 만드시면 될거 같아요;;
      그리고 하나만 추가된다고 하신게 이해가 잘 안갑니다만, for문으로 돌리면서 Data 클래스 생성하고 ArrayList에 추가하신다면 하나만 추가되지는 않을거 같네요~

  17. 2014.10.31 23:19

    비밀댓글입니다

  18. 2014.11.28 11:21

    비밀댓글입니다

    • 냥아 2014.11.28 15:13 신고

      첫번째 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:orientation="vertical">

      <linearlayout android:id="@+id/list_item_layout" android:layout_width="match_parent" android:layout_height="match_parent">

      <linearlayout android:id="@+id/image_layout" android:layout_width="wrap_content" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical">

      <imageview android:id="@+id/custom_list_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/ic_launcher">
      </imageview>
      </linearlayout>

      <linearlayout android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_vertical" android:orientation="vertical">

      <textview android:id="@+id/custom_list_title_main" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Main Title">
      </textview>

      <textview android:id="@+id/custom_list_title_sub" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sub Title">
      </textview>
      </linearlayout>
      </linearlayout>

      </linearlayout>

  19. 2014.11.30 13:14

    비밀댓글입니다

    • 2014.12.01 10:29

      비밀댓글입니다

  20. 2014.12.09 22:17

    비밀댓글입니다

    • 2014.12.10 23:30

      비밀댓글입니다

  21. 쭈렠 2017.10.18 11:20 신고

    안녕하세요 유용한 정보 감사합니다..
    근데 제가 실력미숙으로 인해 오류가나는데..
    혹시 파일로 보내주실수있나요? ㅠ
    joohj815@naver.com

+ Recent posts