[Android] AdapterView 정리

📝 SeSAC의 'JetPack과 Kotlin을 활용한 Android App 개발' 강좌를 정리한 글 입니다.

---

❓ AdapterView 란?

항목을 나열하고 그 중 하나를 유저에게 선택 받고자 하는 뷰

• 대표적으로 ListView, AutoCompleteTextView, Spinner 등

• Adapter에 의해 항목이 만들어지는 뷰

❗ 즉, AdapterView만으로는 화면에 표시되지 않는다.

최상위 뷰의 서브클래스이다.

❓ 그럼 어떻게 해야 화면에 표시 될까?

Adapter 로 항목을 구성해야 한다.

AdaterView 는 항목을 출력하고 Adapter 는 AdaqterView의 항목을 구성한다.

📌 때문에 Adapter에게 두 가지 정보를 넘겨 주어야 한다.

1. 항목을 구성하기 위한 데이터
2. 항목 하나를 구성하는 레이아웃 XML 파일 정보
   
   

❓ 그럼 Adapter가 뭐냐?

• 뷰는 아님, 뷰를 만들어주는 작업자 정도라고 이해하면 된다.
  즉, KT 파일에서 코드를 작성해야 된다는 뜻이다.

• Adapter는 인터페이스 명이며 직접 사용하지는 않는다. 때문에 이 인터페이스를 구현한 클래스를 '어댑터'라고 부른다.

• BaseAdapter부터가 클래스이고 ArrayAdapter, SimpleAdapter, CursorAdapter 정도가 플랫폼에서 제공되고 있다.

---

📚 ArrayAdapter

항목에 문자열 데이터를 순서대로 하나씩 나열하는 경우 사용

위와 같은 화면을 구성한다고 하자. 항목이 나열되어 있으니 ListView를 사용될 것이다.

일단 리스트뷰에 들어갈 데이터를 준비해주자.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="location">
        <item>강원도</item>
        <item>경기도</item>
        <item>경상남도</item>
        <item>경상북도</item>
        <item>광주광역시</item>
    </string-array>
</resources>

val datas = resources.getStringArray(R.array.location)

• values 하위에 arrays.xml 파일을 생성하여 <string-array> 로 데이터를 준비해 주었다.

• 그리고 getStringArray 을 사용하여 배열 타입으로 값을 가져오자.
  
  

이제 우리는 어떤 Adapter를 사용하냐만 고민하면 된다.

문자열이 하나씩 나열되는 항목 구성이니 ArrayAdapter 를 사용해주자.

val adapter = ArrayAdapter(
	this,
	android.R.layout.simple_list_item_1,
	datas
)
listView.adapter = adapter

• 어댑터에게 레이아웃 XML 파일과 데이터를 전달하고, 이를 리스트뷰.어댑터에게 주입한다.

• 이 때, 항목을 구성하는 레이아웃을 우리가 직접 커스텀해도 되지만, 플랫폼에서 제공하는 레이아웃을 사용할 수도 있다.

ArrayAdapter	기능
simple_list_item_1	항목에 문자열 데이터 하나
simple_list_item_2	항목에 문자열 데이터 2개 위아래 나열
simple_list_item_multiple_choice	문자열과 오른쪽 체크박스 제공
simple_list_item_single_choice	문자열과 오른쪽 라디오 버튼 제공

---

📚 SimpleAdapter

항목에 문자열 데이터를 여러 개 순서대로 하나씩 나열하는 경우 이용

• 플랫폼에서 제공하는 어댑터

• 하나의 항목에 여러 개의 데이터가 들어가기 때문에 데이터를 ArrayList 타입의 Map 객체 로 주어야 한다.
  ❗ 즉, 전체가 List 타입에 각 항목이 Map 타입인 데이터를 준비해야 한다.

val datas: ArrayList<HashMap<String?, String?>> = ArrayList()

val adapter = SimpleAdapter(
	this,
    datas,
    android.R.layout.simple_list_item_2,
    arrayOf("name", "content"),
    inArrayOf(android.R.id.text1, android.R.id.text2)
)
listView.adapter = adapter

• arrayOf("name", "content") 로 Map 객체에서 키값으로 뽑을 데이터를 지정한다.
  키값을 2개 주었으니 하나의 항목에 2개의 데이터가 들어간다. 키값이 3개면 3개의 데이터가 뽑힌다.

• inArrayOf(android.R.id.text1, android.R.id.text2) 로 데이터가 표시되는 뷰를 지정한다.
  "name" 의 value는 text1 뷰에, "content"의 value는 text2 뷰에 출력된다.

위와 같은 화면을 구성한다고 하자.

우선 ArrayList 형 Map 객체 를 준비하자.

val datas: ArrayList<HashMap<String, String>> = ArrayList()
var map: HashMap<String, String> = HashMap()
map["name"] = "LG 트윈스"
map["content"] = "서울, 잠실 야구장"
datas.add(map)

map = HashMap()
map["name"] = "두산 베이스"
map["content"] = "서울, 잠실 야구장"
datas.add(map)

map = HashMap()
map["name"] = "KT 위즈"
map["content"] = "수원, KT 위즈 파크"
datas.add(map)

그리고 SimpleAdapter 를 작성한다.

val adapter = SimpleAdapter(
	this,
	datas,
	android.R.layout.simple_list_item_2,
	arrayOf("name", "content"),
	intArrayOf(android.R.id.text1, android.R.id.text2)
)
listView.adapter = adapter

• intArrayOf 에서 text1은 첫 번째, text2는 두 번째 위치를 의미한다.

---

📚 ListView

항목을 동적으로 추가, 제거

adapter.notifyDataSetChanged()

• 위 함수를 콜하기만 하면 된다.
  
  

항목 선택 이벤트

listView.setOnItemClickListener { adapterView, view, i, l ->
	//.........
}

• 이벤트 소스와 이벤트 핸들러를 리스너로 연결한 구조

• 세 번째 매개변수 i가 유저가 선택한 항목의 인덱스 값을 받는다.
  
  

아래는 항목을 추가하고 제거하는 소스 코드 예제이다.

package com.kotdev99.android.c33

class MainActivity : AppCompatActivity() {
	val todos = mutableListOf<String>()
	lateinit var adapter: ArrayAdapter<String>
	lateinit var listView: ListView
	lateinit var editText: EditText
	lateinit var button: Button

	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(R.layout.activity_main)

		listView = findViewById(R.id.main_list)
		editText = findViewById(R.id.edit)
		button = findViewById(R.id.button)

		adapter = ArrayAdapter(
			this,
			android.R.layout.simple_list_item_1,
			todos
		)
		listView.adapter = adapter

		listView.setOnItemClickListener { adapterView, view, i, l ->
			AlertDialog.Builder(this)
				.setTitle("remove todo")
				.setPositiveButton("OK") { dialog, which ->
					todos.removeAt(i)
					adapter.notifyDataSetChanged()
				}
				.setNegativeButton("Cancel", null)
				.create()
				.show()
		}
		button.setOnClickListener {
			todos.add(editText.text.toString())
			editText.text.clear()
			adapter.notifyDataSetChanged()
		}
	}
}

---

📚 CustomAdapter

1. 개발자 알고리즘 대로 항목의 데이터가 설정되어야 하는 경우

2. 개발자 알고리즘 대로 항목별 View의 이벤트를 다르게 처리해야 하는 경우

3. 개발자 알고리즘 대로 항목별 Layout을 다르게 적용시켜야 하는 경우
   
   

❓ 어떻게 만들까?

BaseAdapter 혹은 ArrayAdapter, SimpleAdapter 를 상속받아 작성한다.

class DriveAdapter(val cxt: Context, val resId: Int, val datas: MutableList<DriveVO>) :
	ArrayAdapter<DriveVO>(cxt, resId) {
	//...........    
}

❗ 재정의 해야하는 기초 함수

1. getCount()

override fun getCount(): Int {
	return datas.size
}

• 항목의 개수를 리턴 한다.

• 만약 size를 0으로 주면 데이터가 존재해도 항목이 표시되지 않는다.
  
  

2. getView

override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
	//...........
}

• 하나의 항목을 구성하기 위해서 콜 되는 함수

• 때문에 하나의 항목에 데이터를 어떻게 나열할 건지, 항목의 이벤트 어떻게 처리할 건지, 항목의 레이아웃을 어떻게 조정할 건지 작성해 주어야 한다.

• 콜 되는 항목의 인덱스 값은 첫 번째 매개변수 position으로 전달된다.

• 두 번째 매개변수 convertView는 사용할 뷰 객체를 전달한다.

---

🧩 실습 예제

위와 같은 화면을 구성해보자!

우선 항목 나열되는 ListView 를 선언하자.

• activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/custom_listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" />

• root 를 리스트 뷰로 선언했다.

res/layout 하위에 항목의 레이아웃을 정의한 XML 파일을 생성하자.

• custom_item.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/custom_item_type_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/custom_item_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16sp"
        android:layout_toRightOf="@id/custom_item_type_image" />

    <TextView
        android:id="@+id/custom_item_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/custom_item_title"
        android:layout_alignLeft="@id/custom_item_title"
        android:layout_marginLeft="16sp" />

    <ImageView
        android:id="@+id/custom_item_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_menu" />

</RelativeLayout>

데이터 클래스 DriveVO를 생성한다.

• DriveVO.kt

package com.kotdev99.android.c34

data class DriveVO(
	var title: String,
	val date: String,
	val type: String
)

각각의 항목을 구성하기 위한 뷰를 Holder에 준비하자.

• DriveHolder.kt

class DriveHolder(root: View) {
	var typeImageView: ImageView
	var titleView: TextView
	var dateView: TextView
	var menuImageView: ImageView

	init {
		typeImageView = root.findViewById(R.id.custom_item_type_image)
		titleView = root.findViewById(R.id.custom_item_title)
		dateView = root.findViewById(R.id.custom_item_date)
		menuImageView = root.findViewById(R.id.custom_item_menu)
	}
}

• 항목을 구성하기 위한 뷰를 선언하고, 그 뷰를 획득하는 역할자

• 어댑터 쪽에서 따로 뷰를 준비할 필요 없이 해당 홀더 내에 있는 뷰를 이용한다.

• 일반적으로 '홀더 클래스' 라고 부른다.

이제 가장 중요한 어댑터 클래스를 생성한다.

• DriveAdapter.kt

package com.kotdev99.android.c34

/* 상속 받은 ArrayAdapter와 동일하게 매개변수를 선언
   resId는 항목을 구성하기 위한 레이아웃 XML 파일, datas는 항목을 구성하기 위한 데이터 */
class DriveAdapter(cxt: Context, val resId: Int, val datas: MutableList<DriveVO>) :
	ArrayAdapter<DriveVO>(cxt, resId) {

	override fun getCount(): Int {
		return datas.size
	}

	override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
		var convertView = convertView
		if (convertView == null) {  // 사용할 뷰 객체가 null 이면 뷰 객체 생성
			val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)
					as LayoutInflater
			convertView = inflater.inflate(resId, null)
            
            /* LayoutInflater
			   개발자 코드 임의 순간 XML 파일로 정의되어 있는 레이아웃 리소스를
               초기화시켜서 뷰 객체를 생성하는 작업이라고 보면 된다. */

			val holder = DriveHolder(convertView)
			convertView!!.tag = holder	// 뷰 객체에 태그를 붙여 이 후에도 사용 가능
		}

		val holder = convertView.tag as DriveHolder
		val typeImageView = holder.typeImageView
		val titleView = holder.titleView
		val dateView = holder.dateView
		val menuImageView = holder.menuImageView

		// 데이터 클래스에서 한꺼번에 3개의 데이터를 얻는 코드
		val (type, title, date) = datas[position]
		titleView.text = title
		dateView.text = date
		if (type == "doc") {
			typeImageView.setImageDrawable(
				ResourcesCompat.getDrawable(
					context.resources,
					R.drawable.ic_type_doc, null
				)
			)
		} else if (type == "img") {
			typeImageView.setImageDrawable(
				ResourcesCompat.getDrawable(
					context.resources,
					R.drawable.ic_type_image, null
				)
			)
		} else if (type == "file") {
			typeImageView.setImageDrawable(
				ResourcesCompat.getDrawable(
					context.resources,
					R.drawable.ic_type_file, null
				)
			)
		}
		menuImageView.setOnClickListener {
			Toast.makeText(context, "$title menu click", Toast.LENGTH_SHORT)
				.show()
		}
		return convertView
	}
}

마지막으로 메인 액티비에서 AdapterView와 Adapter를 연결한다.

• MainActivity.kt

package com.kotdev99.android.c34

class MainActivity : AppCompatActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
		super.onCreate(savedInstanceState)
		setContentView(R.layout.activity_main)

		// 원본 데이터 준비
		val mutableList = mutableListOf<DriveVO>()
		mutableList.add(DriveVO("안드로이드", "2월 6일", "doc"))
		mutableList.add(DriveVO("db.zip", "2월 6일", "file"))
		mutableList.add(DriveVO("이미지", "2월 6일", "img"))

		val listView = findViewById<ListView>(R.id.custom_listView)
		val adapter = DriveAdapter(this, R.layout.custom_item, mutableList)
		listView.adapter = adapter
	}
}

결과