본문 바로가기

Mobile/Kotlin

[Android] Spinner/Dropdown 사용 방법(스피너/드롭다운)

반응형


 

안드로이드에서 Dropdown(이하 드롭다운)을 만드는 방법입니다. 안드로이드에서는 드롭다운을 Spinner로 만드는데, 그 과정이 어렵지 않습니다. 아래 내용을 차례로 따라가면 무리없이 드롭다운을 만들 수 있으실 겁니다.

빨간색 박스 부분이 마지막에 확인할 부분입니다.


1. res / layout / activity_main.xml

저는 드롭다운을 activity_main.xml 에 만들어 넣도록 하겠습니다.

<Spinner
    android:id="@+id/gender_spinner"
    android:layout_width="200dp"
    android:layout_height="50dp"
    android:layout_gravity="center_vertical"
    android:spinnerMode="dropdown" />

이 Spinner로 gender(성별)를 입력 받을 예정이기 때문에 ID를 gender_spinner로 정했습니다. layout_gravity는 다른 Text 들과 맞춰주기 위해서 작성한 것일 뿐 크게 의미는 없습니다.

Spinner를 만들 때 최소 옵션은 ID / layout_width / layout_height / spinnerMode 입니다.


2. res / values / gender_spinner_items.xml

이 xml 파일에는 드롭다운으로 들어갈 옵션들을 나열합니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="gender_array">
        <item>Male</item>
        <item>Female</item>
    </string-array>
</resources>

3. MainActivity.kt

드롭다운을 적용시킬 액티비티 파일에 다음과 같이 입력합니다. 저는 MainActivity에 입력하겠습니다.

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

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
		
        // R.id.gender_spinner 는 1번에서 지정한 Spinner 태그의 ID 입니다.
        val spinner: Spinner = findViewById(R.id.gender_spinner)
        
        ArrayAdapter.createFromResource(
            this,
            
            // R.array.gender_array 는 2번에서 설정한 string-array 태그의 name 입니다.
            R.array.gender_array,
            
            // android.R.layout.simple_spinner_dropdown_item 은 android 에서 기본 제공
            // 되는 layout 입니다. 이 부분은 "선택된 item" 부분의 layout을 결정합니다.
            android.R.layout.simple_spinner_dropdown_item
            
        ).also { adapter ->
        
            // android.R.layout.simple_spinner_dropdown_item 도 android 에서 기본 제공
            // 되는 layout 입니다. 이 부분은 "선택할 item 목록" 부분의 layout을 결정합니다.
            adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
            spinner.adapter = adapter
        }
    }
}


4. res / layout / gender_spinner_item.xml

"선택된 item" 에 들어갈 text의 layout을 custom 해보도록 하겠습니다.

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:textSize="23sp"
    android:textColor="@color/teal_700"
    android:gravity="center_vertical"
    />

5. MainActivity.kt 수정

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

        val spinner: Spinner = findViewById(R.id.gender_spinner)
        ArrayAdapter.createFromResource(
            this,
            R.array.gender_array,
            
            // 아래와 같이 layout을 4번에서 만든 xml 파일로 변경
            R.layout.gender_spinner_item
        ).also { adapter ->
            adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
            spinner.adapter = adapter
        }
    }
}

6. 결과


 

반응형