'리스트뷰'에 해당되는 글 1건

  1. 2011.11.07 Android - Custom Listview ( 커스텀 리스트뷰, 리스트뷰 꾸미기 ) (8)

Android - Custom Listview ( 커스텀 리스트뷰, 리스트뷰 꾸미기 )

Android 2011.11.07 18:12



리스트뷰는 예전에 한번 다루었던 내용입니다.
예전에 리스트뷰를 사용했을때 검은 배경인데 하얀배경이나 다른 색상으로 바꿨는데
글씨색을 바꿀 수 없는 현상이 일어나곤 합니다.
오늘 살펴볼 내용은 리스트뷰를 추가하고 그 안에 사진과 텍스트뷰의 크기와 색상 등을 바꾸는 것을 살펴보겠습니다.

처음에 리스트뷰를 접할 때는 안드로이드의 기본 스타일을 쓰게됩니다.
android.R.layout.simple_list_item_1 등의 기본 스타일을 제공합니다.

그것을 우리가 만들어서 사용한다고 생각하시면 됩니다.
기존에 우리가 쓸 xml뿐만아니라 우리가 사용할 스타일을 xml로 만들어서 사용한다는 것입니다.
그렇다면 xml파일 두개를 사용하여서 자신이 사용할 화면을 구성한다고 생각하시면 되겠죠?

그래서 자바파일과 연결된 xml은 ListView 아이템을 한개만
사용할 스타일의 xml에는 텍스트뷰2개와 이미지뷰1개를 구성하여줍니다.
해당 xml관한 내용은 하단부에 입력하겠습니다.

그리고 리스트뷰에 뿌려줄 값을 클래스로 연결하여서 클래스의 값을 리스트뷰에 뿌려주게 됩니다.
필요한 클래스는 다음과 같이 사용하겠습니다.

class CData {
  
  private String m_szLabel;
  private String m_szData;
  private int m_szData2;

  public CData(Context context, String p_szLabel, String p_szDataFile, int p_szData2) {
     
   m_szLabel = p_szLabel;
      
   m_szData = p_szDataFile;
   
   m_szData2 = p_szData2;  
   
  }
 
  public String getLabel() {
   return m_szLabel;
  }
  
  public String getData() {
   return m_szData;
  }
  
  public int getData2() {
   return m_szData2;
  }
 }

살펴보면 3가지의 값을 문자열 2개와 인트형(사진이미지값)으로 받아드려서
해당 메소드로 값을 넣어서 메소드 값으로 하나씩 해당 리스뷰에 뿌려지게 됩니다.

필요한 이미지4개는 알집으로 첨부


전화목록부를 예로 들어서 비슷하게 만들어보겠습니다.
필요한것은 이름과 전화번호를 뿌려줄 텍스트뷰2개와 사진보여줄 이미지뷰1개를 이용해서 실습해보겠습니다.

나머지 필요한 설명은 주석으로 간단하게 입력하겠습니다.
더 궁금하신 내용은 댓글 ^ㅡ^


프로젝트 생성

Project name : ExamCustomListView
Build Target : Android 2.1
Package name : jsh.exam.customlistview
Create Activity : main
Min SDK Version : 7



src

main.java

package jsh.examcuslist;

import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

public class main extends Activity {

 // 리스트뷰 선언
 private ListView listview;

 // 데이터를 연결할 Adapter
 DataAdapter adapter;

 // 데이터를 담을 자료구조
 ArrayList<CData> alist;

 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  requestWindowFeature(Window.FEATURE_NO_TITLE);
  setContentView(R.layout.main);

  // 선언한 리스트뷰에 사용할 리스뷰연결
  listview = (ListView) findViewById(R.id.listView1);

  // 객체를 생성합니다
  alist = new ArrayList<CData>();

  // 데이터를 받기위해 데이터어댑터 객체 선언
  adapter = new DataAdapter(this, alist);

  // 리스트뷰에 어댑터 연결
  listview.setAdapter(adapter);

  // ArrayAdapter를 통해서 ArrayList에 자료 저장
  // 하나의 String값을 저장하던 것을 CData클래스의 객체를 저장하던것으로 변경
  // CData 객체는 생성자에 리스트 표시 텍스트뷰1의 내용과 텍스트뷰2의 내용 그리고 사진이미지값을 어댑터에 연결

  // CData클래스를 만들때의 순서대로 해당 인수값을 입력
  // 한줄 한줄이 리스트뷰에 뿌려질 한줄 한줄이라고 생각하면 됩니다.
  adapter.add(new CData(getApplicationContext(), "친구1",
    "전화번호 : 000-111-1111", R.drawable.a));
  adapter.add(new CData(getApplicationContext(), "친구2",
    "전화번호 : 000-222-2222", R.drawable.b));
  adapter.add(new CData(getApplicationContext(), "친구3",
    "전화번호 : 000-333-3333", R.drawable.c));
  adapter.add(new CData(getApplicationContext(), "친구4",
    "전화번호 : 000-444-4444", R.drawable.d));

 }

 private class DataAdapter extends ArrayAdapter<CData> {
  // 레이아웃 XML을 읽어들이기 위한 객체
  private LayoutInflater mInflater;

  public DataAdapter(Context context, ArrayList<CData> object) {

   // 상위 클래스의 초기화 과정
   // context, 0, 자료구조
   super(context, 0, object);
   mInflater = (LayoutInflater) context
     .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

  }

  // 보여지는 스타일을 자신이 만든 xml로 보이기 위한 구문
  @Override
  public View getView(int position, View v, ViewGroup parent) {
   View view = null;

   // 현재 리스트의 하나의 항목에 보일 컨트롤 얻기

   if (v == null) {

    // XML 레이아웃을 직접 읽어서 리스트뷰에 넣음
    view = mInflater.inflate(R.layout.myitem, null);
   } else {

    view = v;
   }

   // 자료를 받는다.
   final CData data = this.getItem(position);

   if (data != null) {
    // 화면 출력
    TextView tv = (TextView) view.findViewById(R.id.textView1);
    TextView tv2 = (TextView) view.findViewById(R.id.textView2);
    // 텍스트뷰1에 getLabel()을 출력 즉 첫번째 인수값
    tv.setText(data.getLabel());
    // 텍스트뷰2에 getData()을 출력 즉 두번째 인수값
    tv2.setText(data.getData());
    tv2.setTextColor(Color.WHITE);

    ImageView iv = (ImageView) view.findViewById(R.id.imageView1);

    // 이미지뷰에 뿌려질 해당 이미지값을 연결 즉 세번째 인수값
    iv.setImageResource(data.getData2());

   }

   return view;

  }

 }

 // CData안에 받은 값을 직접 할당

 class CData {

  private String m_szLabel;
  private String m_szData;
  private int m_szData2;

  public CData(Context context, String p_szLabel, String p_szDataFile,
    int p_szData2) {

   m_szLabel = p_szLabel;

   m_szData = p_szDataFile;

   m_szData2 = p_szData2;

  }

  public String getLabel() {
   return m_szLabel;
  }

  public String getData() {
   return m_szData;
  }

  public int getData2() {
   return m_szData2;
  }
 }
}


res

main.xml
리스트뷰 한개만 생성

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="
http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <ListView
  android:id="@+id/listView1"
  android:layout_height="wrap_content"
  android:layout_width="fill_parent"></ListView>
</LinearLayout>

myitem.xml
리스트뷰에 사용할 아이템구성 ( 텍스트뷰2개 이미지뷰1개 )

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="
http://schemas.android.com/apk/res/android"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:orientation="vertical">
 <LinearLayout
  android:id="@+id/linearLayout1"
  android:layout_weight="1"
  android:orientation="horizontal"
  android:layout_height="wrap_content"
  android:layout_width="fill_parent">
  <TextView
   android:id="@+id/textView1"
   android:text="TextView"
   android:layout_weight="1"
   android:layout_height="wrap_content"
   android:layout_width="fill_parent"></TextView>
  <ImageView
   android:id="@+id/imageView1"
   android:layout_weight="0"
   android:layout_width="50dp"
   android:layout_height="50dp"></ImageView>
 </LinearLayout>
 <TextView
  android:id="@+id/textView2"
  android:text="TextView"
  android:layout_weight="1"
  android:layout_height="wrap_content"
  android:layout_width="fill_parent"></TextView>

</LinearLayout>


실행결과





자신이 원하는 데이터를 줄 마다 뿌려주는 것을
보실 수 있습니다.

사진에 클릭이벤트를 넣어서
전화를 연결한다던가 다음페이지로 이동할 수 있겠죠?

응용해보세요 !

여기까지였습니다.

저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackbacks 2 : Comments 8
  1. 현수님 2012.01.11 00:12 신고 Modify/Delete Reply

    감사합니다 많이 도움이되는 글이네요

    요즘 새로이 배우는 초보입니다.

    ㅠㅠ 전 블로그 글올리는 법부터 배워야할듯하네요... 너무지저분하게 올려서

    커스텀리스트뷰부분좀 글좀 대려가도될까요... ㅎㅎ

  2. 비매너 2012.02.22 08:42 신고 Modify/Delete Reply

    퍼갈께요^^ 출처 밝히고요.

  3. 초보자 2012.08.30 15:32 신고 Modify/Delete Reply

    안드로이드에 호기심이 있어 배우고있는 학생입니다.
    설명이 너무 잘되었어서 따라하고 조금이나마 이해하는데 도웅미되었습니다.
    위 소스를 응용해서 하려하는데 막혀서 질문 드립니다;
    저는 카카오톡 처럼 탭메뉴를 구현했고
    각각의 탭마다 리스트를 적용시킬려했는데
    DataAdapter를 또다른 Cdata2라는 새로운 클래스를 만들어 해보려했는데
    안되더라구요..
    즉 DataAdapter를 Cdata2라는 형식으로 쓸려하니 에러가 뜹니다..;;

    이해가 안되시겠지만;; 소스 일부분을 보면
    listview2=(ListView)findViewById(R.id.listView2);
    alist2 = new ArrayList<CData2>();
    adapter3 = new DataAdaptera(this,alist2);
    listview2.setAdapter(adapter3);

    이렇게 되어있습니다.. ;ㅠ

    아직 자바도 기초만 알고있는 수준의 학생입니다. 답변 부탁드릴께요 ㅠ

  4. 전국제패 2012.09.05 21:21 신고 Modify/Delete Reply

    좋은 참고가 되었습니다~~ 정말 감사합니다~~~

  5. noeg 2012.09.18 09:18 신고 Modify/Delete Reply

    감사합니다!!! 최고네요

  6. 양갱~ 2012.11.08 12:31 신고 Modify/Delete Reply

    안녕하세요~ 커스텀리스트뷰 공부하고있었는데...!!! 소스코드가 있어서 정말 좋네요 ㅎㅎ 참고해서 써도 될까요?? 블로그에 포스팅할 때 출처는 꼭 밝히겠습니다 :)

  7. raphard 2014.12.06 19:33 신고 Modify/Delete Reply

    감사합니다!! 며칠동안 헤맸는데 이거 보고 하나 해결했어요^^

Write a comment