[안드로이드] 스피너(Spinner) 만들기

 

1. Spinner 개요

Spinner는 나열된 품목을 고를 수 있도록 만들어진 안드로이드 위젯입니다. 아래는 콘크리트에 들어가는 철근(reinforcement bar)의 직경을 선택하도록  만든 Spinner의 예입니다. 6 옆의 역삼각형(▼)을 선택하면 철근의 직경 종류가 나열되고 원하는 직경을 선택하면 됩니다.

 

 

2. 만들기

  위의 예에서 철근직경, 철근개수, 철근량(As)으로 Spinner를 만들어 보겠습니다.

 ① 안드로이드 스튜디오에서 새 프로젝트를 만듭니다.

(저는 Empty Activity로 하였고 Project명을 "MyApplication"으로 하였음)  

 

② activity_main.xml 에서 다음과 같이 만들어 줍니다.

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

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:layout_gravity="center"

    android:orientation="vertical">



    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical">

        <LinearLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:orientation="horizontal">

            <TextView

                android:layout_width="90dp"

                android:layout_height="35dp"

                android:id="@+id/rsdia_tv"

                android:textSize="16dp"

                android:text="철근직경"

                android:padding="3dp"

                />



        <Spinner

            android:layout_width="90dp"

            android:layout_height="35dp"

            android:id="@+id/rsdia"

            android:textSize="16dp"

            android:padding="3dp"

            android:layout_marginLeft="1dp"

            />

        <TextView

            android:layout_width="90dp"

            android:layout_height="35dp"

            android:id="@+id/rsno_tv"

            android:textSize="16dp"

            android:text="철근개수"

            android:padding="3dp"

            android:layout_marginLeft="5dp"

            />

        <EditText

            android:layout_width="90dp"

            android:layout_height="35dp"

            android:id="@+id/as_no"

            android:textSize="16dp"

            android:padding="3dp"

            android:layout_marginLeft="1dp"/>

        </LinearLayout>

        <LinearLayout

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:orientation="horizontal">

            <TextView

                android:layout_width="90dp"

                android:layout_height="35dp"

                android:id="@+id/as_tv"

                android:textSize="16dp"

                android:text="As(㎟)"

                android:layout_marginLeft="5dp">

            </TextView>

            <TextView

                android:layout_width="90dp"

                android:layout_height="35dp"

                android:id="@+id/as"

                android:textSize="16dp"

                android:layout_marginLeft="5dp">



            </TextView>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

 

 ③ MyApplication-app-src-main-res-values에서 array.xml 만들기   

 위 그림처럼 tree를 따라가도 values 방에 colors, strings, styles.xml 밖에 없습니다.  vaules에서 왼쪽 마우스로 클릭하고 오른쪽 마우스를 눌러 New - Values resource file을 선택하여 array.xml로 만듭니다.

 

 

 

 그러면  아래처럼 array.xml 이 생성되고 아래 예제 코드를 넣어 줍니다.

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

<resources>

    <string-array name="rsdia_array">

        <item>6</item>

        <item>10</item>

        <item>13</item>

        <item>16</item>

        <item>19</item>

        <item>22</item>

        <item>25</item>

        <item>29</item>

        <item>32</item>

        <item>35</item>

        <item>38</item>

        <item>41</item>

        <item>51</item>

    </string-array>

</resources>

 

string-array mame은 원하는 이름으로 적고 item을 만들어 줍니다.  (예에서는 철근직경_reinforcement steel dia의 의미로 rsdia_array라고 했습니다.)

④ MainActivity 코드  MainAcrivity.java를 열면 아무런 코드가 없습니다.

아래의 코드로 엎으시기 바랍니다.

package org.kkaesaem.myapplication;
 
import androidx.appcompat.app.AppCompatActivity;
 
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.widget.ArrayAdapter;
import android.widget.EditText;
import android.widget.Spinner;
import android.widget.TextView;
 
public class MainActivity extends AppCompatActivity {
    
    ////////////////A
    Spinner rsdiaSpinner;
    EditText rsno;
    TextView as_textView;
    
    ///////////////B
    double rsArea;
    double rsno_double;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
    ///////////////C
        rsdiaSpinner=(Spinner)findViewById(R.id.rsdia);
        ArrayAdapter rsdiaAdapter = ArrayAdapter.createFromResource(this,R.array.rsdia_array,android.R.layout.simple_spinner_item);
        rsdiaAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        rsdiaSpinner.setAdapter(rsdiaAdapter);
    
    /////////////D
        rsno=(EditText) findViewById(R.id.as_no);
        as_textView=(TextView)findViewById(R.id.as);
 
    /////////////E
        rsno.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {
 
            }
 
            @Override
            public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {
 
            }
 
            @Override
            public void afterTextChanged(Editable editable) {
                String rsdia_text = rsdiaSpinner.getSelectedItem().toString();
                int rsdia_int=Integer.parseInt(rsdia_text);
 
                switch (rsdia_int) {
                    case 6:
                        rsArea = 31.67;
                        break;
                    case 10:
                        rsArea = 71.33;
                        break;
                    case 13:
                        rsArea = 126.7;
                        break;
                    case 16:
                        rsArea = 198.6;
                        break;
                    case 19:
                        rsArea = 286.5;
                        break;
                    case 22:
                        rsArea = 387.1;
                        break;
                    case 25:
                        rsArea = 506.7;
                        break;
                    case 29:
                        rsArea = 642.4;
                        break;
                    case 32:
                        rsArea = 794.2;
                        break;
                    case 35:
                        rsArea = 956.6;
                        break;
                    case 38:
                        rsArea = 1140;
                        break;
                    case 41:
                        rsArea = 1340;
                        break;
                    case 51:
                        rsArea = 2027;
                        break;
                }
        
                /////////////E
                if(rsno.getText().toString().length()<=0){
                    rsno_double=1;
                }else{
                    rsno_double=Double.parseDouble(rsno.getText().toString());
                }
 
                /////////////F
                as_textView.setText(String.format("%.2f",rsArea*rsno_double));
 
            }
 
        });
    }
}

 코드상 ///////A~F 의 설명드리면

 

A; 철근직경 리스트를 담는 Spinner, 철근개수 입력하는 EditText

      선택된 직경에 의한 철근의 단면적과 곱해진 값이 나오는 TextView를 정의합니다.

B; 철근의 단면적을 담는 rsArea, 철근개수를 담는 rsno_double을 정의

C; array.xml의 목록표를 담아 오고 ArrayAdapter를 A에서 정의한 rsdiasSpinner에 연결

D; 철근개수(rsno), 단면적x철근개수(as_textView)의 정의

 

E; 철근개수(rsno)가 입력될 때 TextWatcher 를 통해 어떻게 계산될지를 입력함

   철근직경 6~51까지 일 때 단면적을 정의함

 

E; 철근개수(rsno) 재입력시 0이 되는 에러 방지를 위해 최소값을 1로 하도록 설정

F; 철근개수와 단면적의 곱(rsArea x rsno_double)을 textView에서 나타내도록 함

 

3. 실행

철근직경을 고르고 철근개수를 입력하면 자동으로 As값이 입력됩니다.