상세 컨텐츠

본문 제목

[Kotlin] Spinner

Mobile/Kotlin

by 클리엘 클리엘 2020. 12. 18. 14:12

본문

728x90

Spinner는 여러 개의 항목 중 하나를 선택할 수 있도록 하는 위젯입니다. 다른 설명 필요 없이 사용방법을 간단히 알아보도록 하겠습니다.

 

새로운 프로젝트를 생성한뒤 빈 레이아웃 안에 Spinner를 다음과 같이 올려놓습니다.

 

Spinner의 ID는 'spinner'가 기본값이며 예제에서는 변경 없이 그대로 사용하도록 하겠습니다. 이제 Spinner에 표시할 데이터를 만들어야 하는데 기본으로 생성된 onCreate 메서드 안에서 다음과 같이 데이터를 만들어 둡니다.

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        var spinner_data = listOf("월", "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월")
    }
}

하지만 위에서 만든 list 데이터는 곧바로 Spinner에서 표시할 수 없고 데이터와 Spinner를 연결해 주는 Adapter를 만들어야 합니다. 이를 위해 다음과 같이 ArrayAdapter클래스로 사용할 adapter를 생성해 줍니다.

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

        var spinner_data = listOf<String>("월", "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월")
        
        var spinner_adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, spinner_data)
    }
}

ArrayAdapter클래스의 첫번째 매개변수는 화면에 그릴 콘텍스트를 지정하는 것으로 여기서는 this로 지정합니다. 두 번째 매개변수로 Spinner를 통해 선택된 항목을 표시할 레이아웃을 지정하는데 여기에서 사용된 android.R.layout.simple_list_item_1은 텍스트뷰 1개를 가진 Android에서 기본적으로 제공하는 레이아웃이며 이를 사용해 선택값을 표시하도록 합니다. 마지막 세 번째로는 실제 Spinner에 표시할 데이터를 지정합니다.

 

이제 마지막으로 실제 사용할 Spinner의 adapter속성에 위에서 만들어진 adaper를 지정하면 됩니다.

var spinner_data = listOf<String>("선택월", "1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월")

var spinner_adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, spinner_data)

spinner.adapter = spinner_adapter

spinner.adapter를 입력하면 spinner에 붉은색 줄이 그어져 오류로 표시할 수 있습니다. 이런 경우에는 spinner에 커서를 두고 Alt + Enter키를 눌러 spinner를 Import 해주면 됩니다.

 

이제 앱을 동작시키면 다음과 같은 화면을 볼 수 있습니다.

 

만약 이 상태에서 사용자가 선택한 값을 가져오려면 Spinner의 Lister를 다음과 같이 작성해야 합니다. 코드를 작성할때는 하나하나 모두 이력 하지 말고 자동완성 코드를 이용하면 편리합니다.

spinner.onItemSelectedListener = object: AdapterView.OnItemSelectedListener {
    
}

그다음 코드의 블록 안에서 마우스 오른쪽 버튼을 눌러 'Generate'를 선택합니다.

 

그리고 나오는 다음 항목에서 'Implements methods'를 선택합니다.

 

Implement Members창에서 나오는 모든 메서드를 선택하고 OK 버튼을 눌러주세요.

 

생성된 2개의 메서드중 선택 값을 가져오는 메서드는 onItemSelected 메서드입니다. 이 메서드 안에서 선택 값은 목록으로 생성된 데이터 변수(spinner_data)의 get메서드에 onItemSelected 메서드로 선택항목의 인덱스가 전달되어 오는 position을 이용하면 아래와 같이 가져올 수 있게 됩니다.

spinner.onItemSelectedListener = object: AdapterView.OnItemSelectedListener {
    override fun onItemSelected(parent: AdapterView<*>?, view: View?, position: Int, id: Long) {
        val result = spinner_data.get(position)
        Toast.makeText(getApplicationContext(), result, Toast.LENGTH_LONG).show()
    }

    override fun onNothingSelected(parent: AdapterView<*>?) {

    }
}

 

728x90

'Mobile > Kotlin' 카테고리의 다른 글

[Kotlin] View  (0) 2020.12.22
[Kotlin] Flagment  (0) 2020.12.21
[Kotlin] Spinner  (0) 2020.12.18
[Kotlin] Activity  (0) 2020.12.18
[Kotlin] res  (0) 2020.12.17
[Kotlin] 위젯 - SeekBar, RatingBar  (0) 2020.12.17

관련글 더보기

댓글 영역