[Android] Adapter View

곽지욱·2024년 2월 23일
android

Andorid

목록 보기
3/5

Adaptor View

  • Adapter란 데이터와 View를 연결짓는 다리 역할을 하는 객체를 말한다.

  • Adapter View는 Adapter 가 관리하는 데이터를 출력시켜줄 수 있는 view 이다. 많은 정보들을 view에 직접 정보를 주입하여 출력하지 않고, Adapter가 중간 다리 역할을 하여 관리해주는 것

  • 어댑터가 데이터를 가공해서 제공하면 어댑터 뷰는 그 데이터를 출력하는 역할을 한다.
    많은 정보를 효율적으로 처리하기 위해서 View에 바로 데이터를 제공하지 않고 어댑터 객체를 이용한다.

정리

  • Adapter 가 중간 다리 역할을 하여 관리해준다

  • Adapter View 는 ViewGroup 을 상속 받아 많은 view들을 담을 수 있고 출력할 수 있게 해준다.

  • 항목을 나열하고 그 중 하나를 선택하고 싶을 때 사용하는 뷰

  • ListView,Spinner,AutoCompleteTextView 등

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

어댑터 뷰 구조 및 흐름

MainActivity -> List['a','b','c'] -> Adapter -> listView_item.xml -> activity_main.xml(list)

예제

  1. 가상의 데이터를 생성한다.
  • values -> xml 파일 생성 
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="job">
        <item>의사</item>
        <item>변호사</item>
        <item>판사</item>
        <item>교사</item>
        <item>개발자</item>
    </string-array>
</resources>
  1. 레이아웃을 준비한다.
<?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/main_list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</ListView>

  1. Adapter 생성 후 뷰에 적용한다.
  • MainActivity.kt
package com.example.tutorial

import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.ListView
import androidx.appcompat.app.AppCompatActivity

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

        val listView = findViewById<ListView>(R.id.main_list)
        val data = resources.getStringArray(R.array.job)
        val adapter = ArrayAdapter(
            this,
            android.R.layout.simple_list_item_1,
            data
        )
        listView.adapter = adapter
    }
}

  1. findViewByld(R.id.main_list)를 사용하여 activity_main.xml 에서 ListView의 참조를 가져옴

  2. resources.getStringArray(R.array.job) 를 사용하여 문자열 배열 리소스인 job을 가져옴

  3. ArrayAdapter 클래스를 사용해서 ListView와 데이터 연결.

  4. ListView 에 어댑터를 설정하여 데이터를 화면에 표시함

Simple Adapter

  • 한 항목에 문자열 데이터 여러 개를 나열하고 싶은 경우에 사용한다

  • 안드로이드에서 제공하는 어댑터 중 하나임

  • SimpleAdapter 는 이름 그대로 간단한 데이터 구조를 ListView에 표시하는 데 사용된다.

  • 주로 각 항목이 하나 이상의 TextView로 구성된 간단한 리스트를 표시하는 데 사용됨.

  • 각 항목은 Hashmap 또는 배열로 표현됨

    레이아웃 준비

  • activity_simple_adapter.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/simple_Listview"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">
</ListView>

    데이터 준비, 어댑터 생성 후 뷰에 적용

  • SimpleAdapterActivity.kt

  package com.example.tutorial

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ListView
import android.widget.SimpleAdapter

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

        val listView = findViewById<ListView>(R.id.simple_Listview)
        val data: ArrayList<HashMap<String,String>> = ArrayList()
        var map : HashMap<String,String> = HashMap()
        map["제품명"] = "신라면"
        map["맵기 정도"] = "5단계"
        data.add(map)

        map = HashMap()
        map["제품명"] = "불닭 볶음면"
        map["맵기 정도"] = "9단계"
        data.add(map)

        map = HashMap()
        map["제품명"] = "안성탕면"
        map["맵기 정도"] = "1단계"
        data.add(map)

        val adapter = SimpleAdapter(
            this,
            data,
            android.R.layout.simple_list_item_2,
            arrayOf("제품명", "맵기 정도"),
            intArrayOf(android.R.id.text1, android.R.id.text2)
        )
        listView.adapter = adapter
    }
}

  1. findViewById(R.id.simple_Listview) 사용하여 xml 레이아웃 파일에서 리스트뷰 참조

  2. 데이터를 저장하기 위한 ArrayList가 생성됨

  3. 각 제품에 대한 HashMap 을 생성하고 데이터를 채운 후, ArrayList에 추가함

  4. SimpleAdapter 를 사용하여 ListView와 데이터를 연결함. 이 때, 각 항목의 레이아웃은 android.R.layout.simple_list_item_2로 설정되며, android.R.layout.simple_list_item_2 는 안드로이드 프레임 워크에서 기본적으로 제공하는 간단한 리스트 아이템 레이아웃이다. 이 레이아웃은 각 항목이 두 개의 TextView 로 구성되어 있음.

내부 구성

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

  <TextView
      android:id="@android:id/text1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textAppearance="?android:attr/textAppearanceListItemSmall"
      android:gravity="center_vertical"
      android:paddingStart="?android:attr/listPreferredItemPaddingStart"
      android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
      android:minHeight="?android:attr/listPreferredItemHeightSmall"
      android:textColor="?android:attr/textColorPrimary"
      android:textStyle="bold" />

  <TextView
      android:id="@android:id/text2"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textAppearance="?android:attr/textAppearanceListItemSecondary"
      android:gravity="center_vertical"
      android:paddingStart="?android:attr/listPreferredItemPaddingStart"
      android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
      android:minHeight="?android:attr/listPreferredItemHeightSmall"
      android:textColor="?android:attr/textColorSecondary" />

</LinearLayout>
  1. ListView에 어댑터를 설정함으로 서 데이터를 화면에 표시

ListView 항목 추가 , 삭제

레이아웃 준비

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  android:padding="16dp"
  tools:context=".ListView_Add_DeleteActivity">

  <ListView
      android:id="@+id/main_list"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_weight="1"/>

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginTop="16dp"
      android:orientation="horizontal">
      <EditText
          android:id="@+id/edit"
          android:layout_width="0dp"
          android:layout_weight="1"
          android:layout_height="wrap_content"
          android:inputType="text"/>
      <Button
          android:id="@+id/button"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="add"/>
  </LinearLayout>

</LinearLayout>

어댑터 생성 후 뷰에 적용

package com.example.tutorial

import android.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.Button
import android.widget.EditText
import android.widget.ListView

class ListView_Add_DeleteActivity : AppCompatActivity() {
  var todo = 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_list_view_add_delete)

      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,
          todo
      )
      listView.adapter = adapter

      // 리스트뷰의 항목을 클릭하면 항목 제거 여부를 묻는 다이얼로그 띄우기
      listView.setOnItemClickListener { adpaterView, view, i, l ->
          AlertDialog.Builder(this)
              .setTitle("Remove TODO")
              .setPositiveButton("OK") { dialog, which ->
                  todo.removeAt(i)
                  adapter.notifyDataSetChanged()
              }
              .setNegativeButton("CANCEL", null)
              .create()
              .show()
      }

      // add 버튼 누르면 리스트뷰에 항목 추가
      button.setOnClickListener {
          todo.add(editText.text.toString())
          editText.text.clear()
          adapter.notifyDataSetChanged()
      }
  }
}

  1. todo 라는 이름의 가변 리스트 선언 사용자가 입력하는 할 일 목록을 저장하는 역할을 한다.

  2. adapter 라는 이름의 ArrayAdapter 를 선언함 리스트뷰와 데이터를 연결하는 역할 데이터 타입은 String

  3. ArrayAdapter 를 초기화 한다. this 는 현재 액티비티를 나타내고, 두 번째 매개변수인 'android.R.layout.simple_list_item_1' 은 각 리스트뷰 항목에 사용될 레이아웃 리소스임 t세 번째 매개변수인 'todo'는 리스트뷰에 표시 될 데이터임 이 데이터는 앞서 선언한 'todo' 리스트임

  4. 리스트뷰에 어댑터를 설정함 

  
listView.setOnItemClickListener { adpaterView, view, i, l ->
            AlertDialog.Builder(this)
                .setTitle("Remove TODO")
                .setPositiveButton("OK") { dialog, which ->
                    todo.removeAt(i)
                    adapter.notifyDataSetChanged()
                }
                .setNegativeButton("CANCEL", null)
                .create()
                .show()
        }

  1. 'listView.setOnItemClickListener { adpaterView, view, i, l -> ... }' 는 리스트뷰의 각 항목을 클릭했을 때 발생하는 이벤트를 설정한다.

  2. 'AlertDialog.Builder(this)' 는 다이얼로그를 생성하기 위한 빌더 객체를 생성하기 위한 코드이다. this는 현재 액티비티를 나타내는 것.

  3. .setTitle("Remove TODO" 는 다이얼로그의 제목을 설정함

  4. setPositiveButton (OK) 는 다이얼로그에 OK 버튼을 추가하고 클릭했을 때 실행될 동작을 정의한다. 클릭 시 해당 데이터를 삭제하고, 어댑터에 변경 사항을 알려 리스트 뷰를 갱신함.

  5. todo.removeAt(i) : 클릭한 항목의 위치 i에 해당하는 할 일을 목록에서 삭제한다.

  6. setNegativeButton("CANCEL",null) : 다이얼로그에 "CANCEL" 버튼을 추가하고 해당 버튼을 클릭하면 아무런 동작이 수행되지 않음

  7. .create().show(): AlertDialog를 생성하고 화면에 표시한다.

  
    // add 버튼 누르면 리스트뷰에 항목 추가
        button.setOnClickListener {
            todo.add(editText.text.toString())
            editText.text.clear()
            adapter.notifyDataSetChanged()

  1. button.setOnClickListener { ... }: "add" 버튼이 클릭되었을 때 실행될 동작을 설정한다, todo.add(editText.text.toString()): 사용자가 입력한 텍스트를 EditText에서 가져와서 todo 리스트에 추가한다. editText.text.toString()을 사용하여 EditText에 입력된 문자열을 가져옵니다.

  2. editText.text.clear(): 항목을 추가한 후에는 EditText를 비워줍니다. 이렇게 하면 사용자가 새로운 항목을 입력할 수 있습니다.

  3. 마찬가지로 어댑터에게 데이터가 변경되었음을 알려준다.

결론

  • 안드로이드에서 Adapter View는 데이터를 관리하고 이 데이터를 화면에 표시하는 역할을 수행한다.
  • 위 코드에서 데이터는 'todo'변수에 저장되고 어댑터는 todo 변수에 저장된 데이터를 관리하고 리스트뷰에 표시한다. ArrayAdpater 는 안드로이드에서 제공하는 기본 어댑터 중 하나이며 간단한 텍스트를 보여주는 레이아웃을 사용해서 데이터를 리스튜에 표시한다.

CustomAdapter

profile
곽지욱
이전 포스트

[Android] Activity와 Fragment의 생명주기 (lifecycle)

다음 포스트

[Android] ViewBinding (뷰 바인딩)

0개의 댓글