'LISTVIEW'에 해당되는 글 2건

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

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>


실행결과





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

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

응용해보세요 !

여기까지였습니다.

저작자 표시
신고
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


Android - ListView ( 리스트뷰 )

Android 2011.10.18 23:29

리스트뷰에 대해서 알아보겠습니다.
리스트를 보여주는 도구 인데요.
자동적으로 지정한 리스트가 늘어나면 스크롤뷰가 생성되 화면이동이 가능합니다.
여러 내용을 간단하게 분기할 때 가능하고 분기한 내용에 따라 페이지 이동도 가능합니다.

리스트뷰는 어떤 데이터 그룹에 대한 각각의 정보들을 항목별로 출력시키고 사용자에게 원하는 항목을 검색하거나 선택할수 있도록 해주는 컨트롤 객체입니다. 
ArrayAdapter라는 클래스가 있는데 리스트뷰는 이 클래스를 이용해서 사용자가 지정한 데이터에 접근하도록 구현되어 있습니다.
간단한 데이터를 다룰때는 ArrayAdapter 클래스를 그대로 사용할 수도 있지만, 사용자가 원하는 다양한 형태를 효과적으로 표현하기 위해서는 ArrayAdapter 클래스를 그대로 사용하지 않고 ArrayAdapter 클래스에서 상속받아 새로운 클래스를 만드는 경우도 많을 것입니다.
이것은 리스트뷰의 setAdapter 메소드에 잘 표현되어 있습니다. setAdapter 는 리스트뷰에 사용할 데이터 객체를 넘겨주는 메소드입니다. 일반적으로 생각한다면 ArrayAdapter 객체를 생성하여 사용할 데이터를 저장할 것이고 데이터가 저장된 ArrayAdapter 객체를 setAdapter 메소드에 전달할 것입니다.
   
리스트뷰 클래스의 setAdapter 메소드의 원형은 다음과 같습니다.

void  setAdapter(adapter);
 
내부적으로는 ArrayAdapter 객체든 ArrayAdapter 에서 상속받은 객체든 상관없이 모두 사용할수 있는 ListAdapter 인터페이스로 받아서 처리하겠다는 뜻입니다. 즉, 리스트뷰 내부적으로는 ListAdapter를 통해서만 데이터에 접근하겠다는 뜻입니다.
 
자 그럼 실습을 통해서 소스와 동작을 보겠습니다.

프로젝트

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


src

main.java

package jsh.exam.listview;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.TextView;
import android.view.View;
//OnItemClickListener 인터페이스 상속
public class main extends Activity implements OnItemClickListener {
 // 리스트뷰에 보여질 문자열 배열로 할당
 String[] age = new String[] { "10대", "20대", "30대", "40대", "50대" };
 /** Called when the activity is first created. */
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  // 리소스 파일에 정의된 id_list 라는 ID 의 리스트뷰를 얻는다.
  ListView list = (ListView) findViewById(R.id.listView1);
  // ArrayAdapter 객체를 생성한다.
  ArrayAdapter<String> adapter;
  // 리스트뷰가 보여질 아이템 리소스와 문자열 정보를 저장한다
  // 객체명 = new ArrayAdapter<데이터형>(참조할메소드, 보여질아이템리소스, 보여질문자열);
  adapter = new ArrayAdapter<String>(this,
    android.R.layout.simple_list_item_1, age);
  /*
   *
   * 안드로이드에서 제공하는 기본적인 리스트뷰 아이템 리소스
   *
   * simple_list_item_1
   * simple_list_item_2
   * simple_list_item_activated_1
   * simple_list_item_activated_2
   * simple_list_item_checked
   * simple_list_item_multiple_choice
   * simple_list_item_single_choice
   * simple_selectable_list_item
   */
  // 리스트뷰에 ArrayAdapter 객체를 설정하여 리스트뷰에 데이터와 출력 형태를 지정한다.
  list.setAdapter(adapter);
  // 리스트뷰 선택 시 이벤트를 설정한다.
  list.setOnItemClickListener(this);
 }
 // 리스트뷰 선택 시 이벤트 처리 메소드
 @Override
 public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {
  // TODO Auto-generated method stub
  // arg1는 현재 리스트에 뿌려지고 있는 정보
  // arg2는 현재 리스트에 뿌려지고 있는 해당 id 값
  // 값 출력을 위해 불러온 도구를 id값을 통해 불러옴
  TextView a = (TextView) findViewById(R.id.textView1);
  // 현재 리스트뷰에 있는 해당 값을 보기
  TextView tv = (TextView) arg1;
  // 현재 리스트뷰에 나오는 문자열과 해당 라인의 id값을 확인
  a.setText("선택된 값 : " + tv.getText() + "\n선택된 id값: " + arg2);
 }
}


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">
 <TextView
  android:layout_width="wrap_content"
  android:id="@+id/textView1"
  android:text="TextView"
  android:layout_height="wrap_content"
  android:textAppearance="?android:attr/textAppearanceLarge"
  android:layout_gravity="center"></TextView>
 <ListView
  android:layout_height="wrap_content"
  android:id="@+id/listView1"
  android:layout_width="fill_parent"></ListView>
</LinearLayout>


실행결과

 


저작자 표시
신고
Trackback 0 : Comments 3
  1. 바보 2012.11.28 13:01 신고 Modify/Delete Reply

    가로로 4줄로만들고싶은데
    알려주실수있나요

    • 정승현 2012.12.03 12:57 신고 Modify/Delete

      네 충분히 만들수있어여!
      가로 네줄이이면 리스트뷰만들때 커스텀을 해주셔야되요 !
      그럼 한줄에 4개씩인 리스트뷰를 만드실 수 있습니다 .
      오랜만에 들어와서 ~ 답변을 지금 다네여
      커스텀 리스트뷰를 이용하시면 충분히 가능합니다.

  2. 정갈치 2013.04.19 10:23 신고 Modify/Delete Reply

    감사합니다. 많이 배워가네요~~

Write a comment