본문 바로가기
안드로이드 코틀린

[Kotlin][Android] 스피너 만들기

by teamnova 2022. 5. 13.
728x90

오늘은 코틀린을 사용해서 스피너 라는것을 만들어 보겠습니다.

 

스피너는 값 집합에서 하나의 값을 선택할 수 있는 빠른 방법을 제공합니다. 기본 상태의 스피너는 현재 선택된 값을 표시합니다. 스피너를 터치하면 기타 모든 사용 가능한 값을 포함하는 드롭다운 메뉴가 표시되며, 여기서 새 값을 선택할 수 있습니다.

출처: 안드로이드 공홈

 

Spinner 객체를 사용하여 레이아웃에 스피너를 추가할 수 있습니다. 이 작업은 일반적으로 XML 레이아웃에서 <Spinner> 요소를 사용하여 실행해야 합니다.

 

아래 예시를 보여드리겠습니다.

 

<Spinner
    android:id="@+id/planets_spinner"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

 

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="planets_array">
        <item>Mercury</item>
        <item>Venus</item>
        <item>Earth</item>
        <item>Mars</item>
        <item>Jupiter</item>
        <item>Saturn</item>
        <item>Uranus</item>
        <item>Neptune</item>
    </string-array>
</resources>

위와 같이 array라는 xml 파일을 또 만듭니다.

 

이러한 배열과 함께 Activity 또는 Fragment에 다음 코드를 사용하여 ArrayAdapter의 인스턴스를 통해 스피너에 이러한 배열을 제공할 수 있습니다.

 

val spinner: Spinner = findViewById(R.id.spinner)
// Create an ArrayAdapter using the string array and a default spinner layout
ArrayAdapter.createFromResource(
        this,
        R.array.planets_array,
        android.R.layout.simple_spinner_item
).also { adapter ->
    // Specify the layout to use when the list of choices appears
    adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item)
    // Apply the adapter to the spinner
    spinner.adapter = adapter
}

사용자 선택에 응답

사용자가 드롭다운에서 항목을 선택하면 Spinner 객체가 항목 선택 시 이벤트를 수신합니다.

스피너에 관한 선택 이벤트 핸들러를 정의하려면 AdapterView.OnItemSelectedListener 인터페이스와 이에 상응하는 onItemSelected() 콜백 메서드를 구현합니다. 예를 들어, 다음은 Activity의 인터페이스 구현입니다.

 

class SpinnerActivity : Activity(), AdapterView.OnItemSelectedListener {

    override fun onItemSelected(parent: AdapterView<*>, view: View?, pos: Int, id: Long) {
        // An item was selected. You can retrieve the selected item using
        // parent.getItemAtPosition(pos)
    }

    override fun onNothingSelected(parent: AdapterView<*>) {
        // Another interface callback
    }
}