[Android] AdapterView

leeeha·2022년 9월 10일

안드로이드

안드로이드 새싹 강의

목록 보기

1/19

출처: https://sesac.seoul.kr/ (JetPack과 Kotlin을 활용한 Android App 개발 강의)

어댑터뷰의 개념

항목을 나열하고 그 중 하나를 선택하고 싶을 때 사용하는 뷰
ListView, AutoCompleteTextView, Spinner 등
Adapter에 의해 항목이 만들어지는 뷰

어댑터뷰의 사용

ArrayAdapter

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

simple_list_item1 : 항목에 문자열 데이터 하나
simple_list_item2 : 항목에 문자열 데이터 두개 위아래 나열
simple_list_item_multiple_choice : 문자열과 오른쪽 체크박스 제공
simple_list_item_single_choice : 문자열과 오른쪽 라디오 버튼 제공
항목 하나를 구성하기 위한 커스텀 레이아웃 파일을 만들어서 적용할 수도 있다.

데이터 준비

values 폴더 밑에 arrays.xml 파일 생성

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

레이아웃 준비

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

어댑터 생성 후 뷰에 적용

MainActivity.kt

package com.tutorial.c30

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.locations)
        val adapter = ArrayAdapter(
            this,
            android.R.layout.simple_list_item_1,
            data
        )
        listView.adapter = adapter
    }
}

public ArrayAdapter(@NonNull Context context, int resource, @NonNull T[] objects) {
  throw new RuntimeException("Stub!");
}

SimpleAdapter

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

레이아웃 준비

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

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

MainActivity.kt

package com.tutorial.c32

import android.os.Bundle
import android.widget.ListView
import android.widget.SimpleAdapter
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: ArrayList<HashMap<String, String>> = ArrayList()
        var map: HashMap<String, String> = HashMap()
        map["name"] = "LG 트윈스"
        map["content"] = "서울, 잠실 야구장"
        data.add(map)

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

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

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

 public SimpleAdapter(
     Context context, 
     List<? extends Map<String, ?>> data, 
     int resource, 
     String[] from, int[] to) {
     throw new RuntimeException("Stub!");
}

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=".MainActivity">

    <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.tutorial.c33

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

class MainActivity : 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_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,
            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()
        }
    }
}

ezgif com-gif-maker

CustomAdapter

개발자가 직접 정한 알고리즘대로 항목의 데이터가 설정되어야 하는 경우
개발자의 알고리즘대로 항목별 View의 이벤트를 다르게 처리해야 하는 경우
개발자의 알고리즘대로 항목별 Layout을 다르게 적용시켜야 하는 경우

리스트의 각 항목을 위한 커스텀 레이아웃

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_toEndOf="@+id/custom_item_type_image"
        android:layout_marginStart="16dp"/>
    <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_alignStart="@id/custom_item_title"/>
    <ImageView
        android:id="@+id/custom_item_menu"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:src="@drawable/ic_menu"/>
</RelativeLayout>

데이터 클래스와 데이터 홀더

DriveVO.kt

package com.tutorial.c34

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

DriveHolder.kt

package com.tutorial.c34

import android.view.View
import android.widget.ImageView
import android.widget.TextView

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)
    }
}

데이터와 뷰를 연결하는 커스텀 어댑터

package com.tutorial.c34 

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.Toast
import androidx.core.content.res.ResourcesCompat

class DriveAdapter(cxt: Context, val resId: Int, val data: MutableList<DriveVO>)
    : ArrayAdapter<DriveVO>(cxt, resId){

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

    override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
        var view = convertView
        if (view == null) {
            val inflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE)
                    as LayoutInflater
            view = inflater.inflate(resId, null)

            val holder = DriveHolder(view)
            view!!.tag = holder
        }

        // 뷰 홀더에서 뷰 꺼내기
        val holder = view.tag as DriveHolder
        val typeImageView = holder.typeImageView
        val titleView = holder.titleView
        val dateView = holder.dateView
        val menuImageView = holder.menuImageView

        // 각 항목에 있는 뷰들의 속성 변경
        val (type, title, date) = data[position]
        titleView.text = title
        dateView.text = date

        // 각 항목의 타입에 따라 이미지 변경
        when (type) {
            "doc" -> {
                typeImageView.setImageDrawable(
                    ResourcesCompat.getDrawable(
                        context.resources,
                        R.drawable.ic_type_doc, null
                    )
                )
            }
            "file" -> {
                typeImageView.setImageDrawable(
                    ResourcesCompat.getDrawable(
                        context.resources,
                        R.drawable.ic_type_file, null
                    )
                )
            }
            "img" -> {
                typeImageView.setImageDrawable(
                    ResourcesCompat.getDrawable(
                        context.resources,
                        R.drawable.ic_type_image, null
                    )
                )
            }
        }

        // 메뉴 이미지 클릭하면 토스트 메시지 뜨도록
        menuImageView.setOnClickListener {
            Toast.makeText(context, "$title menu click", Toast.LENGTH_SHORT).show()
        }

        return view
    }
}

데이터 추가, 리스트뷰에 커스텀 어댑터 적용

MainActivity.kt

package com.tutorial.c34

import android.os.Bundle
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 mutableList = mutableListOf<DriveVO>()
        mutableList.add(DriveVO("doc", "안드로이드", "2월 6일"))
        mutableList.add(DriveVO("file", "db.zip", "2월 6일"))
        mutableList.add(DriveVO("img", "exam.png", "2월 6일"))

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

Spinner

여러 항목 중에 하나를 선택하는 뷰 (콤보 박스라고도 불림)
dropdown layout으로는 simple_spinner_item과 simple_spinner_dropdown_item 제공
spinnerMode="dialog"로 지정하면 다이얼로그 형태로 띄울 수 있음.

AutoCompleteTextView

유저에게 글을 입력받기 위한 뷰
EditText와의 차이점은 일부 글자만 입력해도 자동 완성 기능이 제공되어 추천 단어를 보여준다는 것
android:completionThreshold="1" : 한글자만 입력해도 자동 완성 기능 제공 (기본은 두글자)
android:completionHint="항목을 선택하세요" : 유저 입력을 받기 위한 설명 글
android:dropDownWidth="200dp" : dropdown의 가로 크기
android:dropDownHeight="200dp" : dropdown의 세로 크기
android:dropDownVerticalOffset="100dp" : 세로 방향의 offset
android:dropDownHorizontalOffset="100dp" : 가로 방향의 offset

예제

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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=".MainActivity">

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:spinnerMode="dialog"/>

    <AutoCompleteTextView
        android:id="@+id/auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"/>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="language">
        <item>한국어</item>
        <item>영어</item>
        <item>중국어</item>
        <item>독일어</item>
    </string-array>
</resources>

package com.tutorial.c35

import android.os.Bundle
import android.widget.ArrayAdapter
import android.widget.AutoCompleteTextView
import android.widget.Spinner
import androidx.appcompat.app.AppCompatActivity

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

        val spinner = findViewById<Spinner>(R.id.spinner)
        val autoCompleteTextView = findViewById<AutoCompleteTextView>(R.id.auto)

        val data = resources.getStringArray(R.array.language)
        val adapter = ArrayAdapter(
            this,
            android.R.layout.simple_dropdown_item_1line,
            data
        )
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
        spinner.adapter = adapter

        val autoData = arrayOf("apply", "apple", "below", "coco")
        val autoAdapter = ArrayAdapter(
            this,
            android.R.layout.simple_dropdown_item_1line,
            autoData
        )
        autoCompleteTextView.setAdapter(autoAdapter)
    }
}

leeeha

습관이 될 때까지 📝

다음 포스트

[Android] AdapterView

안드로이드 새싹 강의

어댑터뷰의 개념

어댑터뷰의 사용

ArrayAdapter

데이터 준비

레이아웃 준비

어댑터 생성 후 뷰에 적용

SimpleAdapter

레이아웃 준비

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

ListView 항목 추가, 삭제

레이아웃 준비

어댑터 생성 후 뷰에 적용

CustomAdapter

리스트의 각 항목을 위한 커스텀 레이아웃

데이터 클래스와 데이터 홀더

데이터와 뷰를 연결하는 커스텀 어댑터

데이터 추가, 리스트뷰에 커스텀 어댑터 적용

Spinner

AutoCompleteTextView

예제

[Android] ActionBar, Menu

0개의 댓글