소개

DreamHanks의 MOON입니다.

전회는 「다이얼로그」에 대해서 설명을 해 갔습니다.
5. 【Android/Kotlin】 다이얼로그(Dialog)

이번에는 스피너라는 View에 대해 설명하겠습니다.

스피너란?

스피너는 HTML 태그의 select와 같은 기능의 View입니다.
View를 클릭하면 항목이 표시되고 항목 중 하나를 클릭하면 해당 항목이 스피너에 배치됩니다.

스피너에 아이템 추가

항목을 추가하는 방법에는 두 가지가 있습니다.

1. xml 파일에 항목 추가

· 아이템의 자원 xml 파일 작성

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="user_items">
        <item>佐藤</item>
        <item>鈴木</item>
        <item>高橋</item>
        <item>伊藤</item>
        <item>渡辺</item>
        <item>山本</item>
        <item>中村</item>
        <item>小林</item>
        <item>加藤</item>
    </string-array>
</resources>

· 레이아웃 xml 파일 만들기



activity_spinner.xml

<?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"
    tools:context=".ListViewActivity"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:text="ユーザー名を選択してください。" />

    <Spinner
        android:id="@+id/spinner"
        android:layout_centerHorizontal="true"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:id="@+id/user_name_tv"
        android:text="選択されたユーザー名" />

</LinearLayout>

・Activity 파일을 작성

SpinnerActivity.kt

package com.example.practiceapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.*

class SpinnerActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_spinner)

        var user_name_tv = findViewById<TextView>(R.id.user_name_tv)
        var spinner = findViewById<Spinner>(R.id.spinner)

        //xmlファイルからアイテムの配列を取得
        val items = resources.getStringArray(R.array.user_items)

        //アダプターにアイテム配列を設定
        val Adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, items)

        //スピナーにアダプターを設定
        spinner.adapter = Adapter

        //スピナーのセレクトイベント設定
        spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(
                parent: AdapterView<*>,
                view: View,
                position: Int,
                id: Long
            ) {
                //選択されたアイテムをテキストビューに設定
                val userName = parent.getItemAtPosition(position);
                user_name_tv.text = userName.toString()
            }

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

    }
}

2. 배열 및 목록에 항목 추가

· 레이아웃 xml 파일 만들기
레이아웃의 xml은 위와 같은 xml입니다.

・Activity 파일을 작성

SpinnerActivity.kt

package com.example.practiceapplication

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.*

class SpinnerActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_spinner)

        var user_name_tv = findViewById<TextView>(R.id.user_name_tv)
        var spinner = findViewById<Spinner>(R.id.spinner)

        //ユーザー名のリストを生成
        var userList = arrayListOf<String>("佐藤", "鈴木", "高橋", "伊藤", "渡辺", "山本", "中村", "小林", "加藤")

        //アダプターにユーザー名のリストを設定
        val Adapter = ArrayAdapter(this, android.R.layout.simple_spinner_dropdown_item, userList)

        //スピナーにアダプターを設定
        spinner.adapter = Adapter

        //スピナーのセレクトイベント設定
        spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(
                parent: AdapterView<*>,
                view: View,
                position: Int,
                id: Long
            ) {
                //選択されたアイテムをテキストビューに設定
                val userName = parent.getItemAtPosition(position);
                user_name_tv.text = userName.toString()
            }

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

    }
}

앱 시작

・스피너를 클릭했을 경우


・스피너의 아이템중에 「야마모토」를 클릭했을 경우

끝에

이번은 「스피너」에 대해 설명을 해 갔습니다.

다음에 밸리데이션 체크에 대해 설명하겠습니다.
7. 【Android/Kotlin】 밸리데이션 체크

최신 내용은 아래 링크(DreamHanks의 블로그)에서 확인할 수 있습니다.
DreamHanks 블로그(Android/Kotlin 앱 개발)