타닥타닥 개발자의 일상

Kotlin 안드로이드 화면에 Spinner 보이게 하기, Spinner로 선택한 항목 textView랑 연결하기 본문

코딩 기록/Kotlin

Kotlin 안드로이드 화면에 Spinner 보이게 하기, Spinner로 선택한 항목 textView랑 연결하기

NomadHaven 2022. 2. 7. 01:43
생성 파일

스피너를 만드는 두가지 방법

1.layout 폴더에 itme_spinner.xml파일 생성

2.values 폴더에 array.xml 파일 생성

 

1. item_spinner.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/tvItemSpinner"

        android:layout_width="match_parent"
        android:layout_height="45dp"

        android:paddingTop="10dp"
        android:paddingStart="30dp"
        android:textColor="@android:color/black"
        android:textSize="15sp"
        android:paddingLeft="30dp"/>

        <!--@android:color/black는 values폴더 안에있는 color 의미-->

 

2. array.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array name="fruit">
        <item>과일선택</item>
        <item>귤</item>
        <item>파인애플</item>
        <item>샤인머스캣</item>
        <item>무화과</item>
    </string-array>
</resources>

 

 

 

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <Spinner
            android:id="@+id/spinner"
            android:layout_centerHorizontal="true"
            android:layout_width="292dp"
            android:layout_height="46dp"
            app:layout_constraintBottom_toTopOf="@+id/textView"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintHorizontal_bias="0.504"
            app:layout_constraintVertical_bias="0.888"/>
    <TextView
            android:id="@+id/textView"
            android:layout_width="179dp"
            android:layout_height="64dp"
            android:text="Hello World!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.572" />

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main.xml의 Design 기능 이용해 추가한 spinner가 반영되었다.

 

MainActivity.kt

 

package com.example.sample14

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

class MainActivity : AppCompatActivity() {



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

        setUpSpinnerFruit()

        setupSpinnerHandler()
    }





    //spinner의 값을 설정하는 함수
    fun setUpSpinnerFruit(){
        // val fruit = arrayOf("과일선택","사과","배","바나나","포도")
       	//	fruit이란 변수에 괄호안 글자들을 항목으로 하는 배열 저장
       
       val fruit = resources.getStringArray(R.array.fruit) 
        //fruit이란 변수 안에 value 폴더 안에있는 array.xml, 
        //array의 이름인 fruit을 입력하여 불러온다.

        //layout 폴더안에 있는 item_spinner.xml, 을 어댑터에 적용한다. 
        //fruit이란 매개변수는 30번째 줄에 선언된 fruit.
        val adapter = ArrayAdapter(this,R.layout.item_spinner, fruit)

        //activity_main.xml에 입력된 spinner에 어댑터를 연결한다.
        val spinner = findViewById<Spinner>(R.id.spinner)
        spinner.adapter = adapter 
        //activity_main안에 이미 adapter 속성이 있다. 해당 속성과 위에서 만든 adapter를 연결.

    }

    //선택시 결과를 출력해주는 함수
    fun setupSpinnerHandler(){
        val spinner = findViewById<Spinner>(R.id.spinner)
        val textView = findViewById<TextView>(R.id.textView)

        spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener{
            override fun onItemSelected(p0: AdapterView<*>?, view: View?, position: Int, id: Long) {
               textView.text = "선택됨: $position ${spinner.getItemAtPosition(position)}"
            }

            override fun onNothingSelected(p0: AdapterView<*>?) {
                TODO("Not yet implemented")
            }
        }
    }

}

 

결과화면

 

 

 

 

 


1의 방법,  layout 폴더에 item_spinner.xml 파일 만들어서 스피너 만들기.

 

item_spinner.xml
<?xml version="1.0" encoding="utf-8"?>


    <TextView
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/tvItemSpinner"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:paddingTop="10dp"
            android:paddingStart="30dp"
            android:textColor="@android:color/black"
            android:textSize="15sp"
            android:paddingLeft="30dp"/>
build.gradle(:app)
plugins {
    id 'com.android.application'
    id 'kotlin-android'
}

android {
    compileSdk 32

    defaultConfig {
        applicationId "com.example.sample15"
        minSdk 21
        targetSdk 32
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }

    buildFeatures{
        viewBinding true
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.5.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.3'
    testImplementation 'junit:junit:4.+'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}

기존의 코드에서 

   buildFeatures{
        viewBinding true
    }
}

가 추가되었다.

 

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:id="@+id/result"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="선택결과"
            android:textSize="20sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"/>
    <Spinner
            android:id="@+id/spinner"
            android:layout_width="190dp"
            android:layout_height="101dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.502"
            app:layout_constraintVertical_bias="0.319"/>

</androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.kt
package com.example.sample15

import android.app.Activity
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.AdapterView
import android.widget.ArrayAdapter
import com.example.sample15.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    val binding by lazy {ActivityMainBinding.inflate(layoutInflater)}

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
      //  setContentView(R.layout.activity_main)
        setContentView(binding.root)

        var data = listOf("선택하세요", "1월","2월","3월","4월","5월","6월")

        var adapter = ArrayAdapter<String>(this,R.layout.item_spinner,data)
        //ArrayAdapter를 통해 layout폴더에 있는 item_spinner.xml파일과 위에서 선언한 list를 연결
        
        binding.spinner.adapter=adapter
        //binding을 통해서 activity_maim.xml의 spinner와 adapter를 연결

        binding.spinner.onItemSelectedListener = object:AdapterView.OnItemSelectedListener{
            override fun onItemSelected(p0: AdapterView<*>?, p1: View?, pos: Int, p3: Long) {
                binding.result.text = data[pos] //배열이라서 []로 된다.
                //textView를 위에서 선언한 리스트(data)와 연결. [pos]는 리스트에서 선택된 항목의 위치값.
            }

            override fun onNothingSelected(p0: AdapterView<*>?) {
                TODO("Not yet implemented")
            }


        }


    }
}

 

 

결과

 

Comments