본문 바로가기

ANDROID/UI - UX

[안드로이드] 이미지를 포함한 커스텀 ListView 구현

단순히 텍스트를 포함하는 리스트 뷰를 만드는 데는 적은 수의 리소스와 코드로 이를 구현할 수 있지만,


이미지나 기타 다양한 내용을 담은 row item을 출력하고자 한다면, 좀 더 많은 준비물이 필요하다.


우선 구현하고자 하는 item의 구성과 그에 따른 준비물을 나열해보자면



** 텍스트뷰 한 개와 이미지 한 개를 포함하는 row item을 쓰고자 할 때 **



1. row item의 구성을 정의하는 xml 레이아웃 


여기에는 텍스트뷰와 이미지뷰 하나가 레이아웃 구성으로 들어가며 

당연히 필히 id값을 달아두어야 한다.


2. row item의 레이아웃을 코드에 링크 시켜주는 커스텀 BaseAdapter 


3. 각 row item의 텍스트에 적용하고자 하는 String 배열 :


여기에는 각 item에 넣고자 하는 String 값이 들어가게 된다.


4. 각 row item의 이미지뷰에 적용하고자 하는 int 배열 : 


여기에는 각 item에 넣고자 하는 drawable 참조값이 들어가게 된다.


5. 커스텀 ListView가 정의된 xml 레이아웃



정도가 된다.



다음으로 주요 과정들을 살펴보자. 



< Custom BaseAdapter 만들기>


아래는 내가 StackOverflow로부터 참조한 Custom BaseAdapter의 모습인데,


사용하고자 한 목적에 맞게 텍스트를 참조하는 String 배열과 이미지를 참조하는 int 배열이 선언된 것을 


볼 수 있다.



나머지 부분들은 필요에 따라 사용하면 되고, 구현하고자 하는 주 내용들은 getView 내부에 쓰면 되는데,


아래의 row를 할당하는 부분에서 row item을 구성한 레이아웃 파일을 첫번재 인자로 달고


참조하기 위해 선언한 TextView 1개, ImageView 1개에 row로부터 id를 참조해 매치를 시켜주면 


CustomAdapter에서의 작업은 마무리가 된다.



< Custom BaseAdapter를 ListView에 적용하기 >


다음으로 Activity 자바 파일에서 CustomAdapter 객체를 아래와 같이 선언하고,


이를 사용하고자 하는 실제 레이아웃의 listview에 setAdapter로 적용해주면 마무리된다.


customAdapter = new CustomAdapter(this, 넣고자하는String배열, 넣고자하는Drawable참조값배열);

listView.setAdapter(customAdapter);


추가로 만약 특정 item에 한해 이미지를 넣지 않고자 하는 경우가 있다면 해당 row의 인덱스에 


android.R.color.transparent

를 맥여주면 되겠다. 


이를 수행하지 않을 시 resorceNotFoundException이나 nullPointerException이 발생할 수 있음.



 

<참조>


https://stackoverflow.com/questions/32573800/android-how-to-add-icon-on-each-listview-list-item-and-change-the-text-color-bac