07. 커스텀 리스트뷰

이번 시간은 커스텀 리스트뷰 포스팅이다.

리스트뷰란 대부분의 어플리케이션에 필요한 리스트형태로 보여주는 View로서

보통 세로 스크롤로 리스트를 형성하는 것을 말한다. 이것을 자바 클래스를 사용해서 커스터마이징하는 것을 해볼테야~~

코드 설명에 앞서 커스텀 리스트뷰가 어떻게 작용하는 놈인지를 설명하겠다.

먼저 리스트뷰를 액티비티에 만들게되면 각 리스트에 추가되는 엔티티들이 있게되는데 그것을 

CustomAdapter라는 놈이 추가시켜주게 되고 추가되는 내용에 관련된 것들은 ItemInfo라는 클래스와 아이템관련 layout에 저장시켜준다.

예를들어 리스트에 추가하고싶은 Item이 달랑 텍스트뷰 하나라면 아이템 layout에 텍스트뷰를 추가시키고

ItemInfo클래스에는 추가시킨 텍스트뷰의 아이디와 이름이 같은 String 변수를 만들어준다.

만약 그림을 넣고싶을때도 마찬가지로 layout에 이미지뷰를 삽입하고 그 아이디에 상응하는 ImageView변수를 만들어주면 된다.

먼저 메인 프로젝트 생성!

그리고 리스트뷰를 GUI로 만든다.

다음은 핵심이 되는 CustomAdapter에 관한 부분이다.

이 클래스는 BaseAdapter를 상속받는다. 상속 받은 후에 기본적인 import와 오버라이딩 메소드를 자동생성하기를 통해

생성해주면 다음과 같이 생성된다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

public class CustomAdapter extends BaseAdapter{      @Override     public int getCount() {         // TODO Auto-generated method stub         return 0;     }      @Override     public Object getItem(int position) {         // TODO Auto-generated method stub         return null;     }      @Override     public long getItemId(int position) {         // TODO Auto-generated method stub         return 0;     }      @Override     public View getView(int position, View convertView, ViewGroup parent) {         // TODO Auto-generated method stub         return null;     }  }

이게 기본 틀이 되고 여기에 생성자와 add, clear라는 사용자 함수를 만들어 주겠다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

public class CustomAdapter extends BaseAdapter{ private ArrayList<ItemInfo> mItemArrayList = new ArrayList<ItemInfo>(); private Activity mActivity;          public CustomAdapter(Activity mActivity){         super();         this.mActivity = mActivity;     }     public void clear()     {         mItemArrayList.clear();     }     public void add(ItemInfo item){         mItemArrayList.add(item);     }     ............ }

메인 액티비티에서 생성자를 호출하면 액티비니 변수를 복사해주고 그놈을 통해 여러가지를 참조할 것이다.

그리고 리스트에 추가할 아이템을 ArrayList로 추가시키기 위해 ArrayList를 추가했다.

그렇다면 여기서 ItemInfo에 무엇이 들었는지를 알아야 이해가 빠를텐데 한번 살펴보겠다.

먼저 item이라는 LinearLayout을 생성하고 다음 처럼 간단하게 버튼과 텍스트뷰를 추가시켰다.

그리고 아이템의 아이디와 상응하여 ItemInfo클래스에 변수를 생성해준다. 그리고 Alt+ Shift + R을 눌러 다음처럼 Getter/Setter를 만든다.

해당 프로젝트에서는 텍스트뷰에 필요한 텍스트만 받아오면되기 때문에 String textview1; 이란 변수만 입력해주고 getter와setter를 만들었다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

public class ItemInfo {       private String textview1;     /**      * @return the textview1      */     public String getTextview1() {         return textview1;     }     /**      * @param textview1 the textview1 to set      */     public void setTextview1(String textview1) {         this.textview1 = textview1;     } }

그럼 끝~~~ 다시 CustomAdapter로 넘어가서~

추가적으로 처음 overridng했던 메소드들에서 리턴값을 수정해야한다.

1 2 3 4 5 6 7 8 9 10 11

@Override     public int getCount() {         // TODO Auto-generated method stub         return mItemArrayList.size();     }       @Override     public Object getItem(int position) {         // TODO Auto-generated method stub         return mItemArrayList.get(position);     }

위 두개의 메소드의 리턴값을 위와 같이 변경시켜주고

마지막으로 입력된 아이템 정보를 출력시켜주는 메소드를 실행하면되는데 이것이 View 메소드이다.

여기서 ID를 매칭시켜주고 리소스를 불러오는 것들을 할 수 있다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14

@Override     public View getView(int position, View convertView, ViewGroup parent) {         // TODO Auto-generated method stub         if(convertView==null){             convertView = mActivity.getLayoutInflater()                     .inflate(R.layout.item, parent,false);         }         ItemInfo info = mItemArrayList.get(position);                  ((TextView)convertView.findViewById(R.id.textView1)).setText(info.getTextview1());         ((Button)convertView.findViewById(R.id.button1)).setText("OK");                  return convertView;     }

R.layout.item은 텍스트뷰와 버튼을 추가했던 레이아웃이다.

최종 전체 코드 <CustomAdapter.java>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

import java.util.ArrayList;   import android.app.Activity; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView;   public class CustomAdapter extends BaseAdapter{       private ArrayList<ItemInfo> mItemArrayList = new ArrayList<ItemInfo>();     private Activity mActivity;          public CustomAdapter(Activity mActivity){         super();         this.mActivity = mActivity;     }     public void clear()     {         mItemArrayList.clear();     }     public void add(ItemInfo item){         mItemArrayList.add(item);     }          @Override     public int getCount() {         // TODO Auto-generated method stub         return mItemArrayList.size();     }       @Override     public Object getItem(int position) {         // TODO Auto-generated method stub         return mItemArrayList.get(position);     }       @Override     public long getItemId(int position) {         // TODO Auto-generated method stub         return 0;     }       @Override     public View getView(int position, View convertView, ViewGroup parent) {         // TODO Auto-generated method stub         if(convertView==null){             convertView = mActivity.getLayoutInflater()                     .inflate(R.layout.item, parent,false);         }         ItemInfo info = mItemArrayList.get(position);                  ((TextView)convertView.findViewById(R.id.textView1)).setText(info.getTextview1());         ((Button)convertView.findViewById(R.id.button1)).setText("OK");                  return convertView;     }   }

이제 마무리로서 메인 액티비티에서 리스트를 보여주는 작업만 하면 된다.

다음 코드가 전부이다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

public class MainActivity extends ActionBarActivity {       private CustomAdapter mAdapter;     private ListView mList;          @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         mAdapter = new CustomAdapter(this);         mList = (ListView) findViewById(R.id.listView1);         mList.setAdapter(mAdapter);         setupListItem();     }       public void setupListItem()     {         mAdapter.clear();                       for(int i=0;i<5;i++){             String text;             text = Integer.toString(i);             final ItemInfo info = new ItemInfo();               info.setTextview1(text);               mAdapter.add(info);         }           mAdapter.notifyDataSetChanged();     }

먼저 생성자 CustomAdapter(this)로 아답터를 생성시켜주고

리스트뷰의 아이디를 읽어온다.

그리고 setAdapter로 SET해주고 아이템에 들어갈 내용을 setupListitem()이라는 사용자 함수를 만들어 추가시켜준다.

추가할 내용은 텍스트뷰의 String 변수뿐이다. 

다음은 실행화면 짜짠~