[Android] 코난과 함께하는 Spinner view(스피너뷰) 구현하기!

스피너 뷰란?

스피너(Spinner)는 리스트 뷰의 일종으로, 화살표 모양이 가장자리에 있는 dropdown 형식의 listview

스피너 뷰와 리스트 뷰의 차이점은 리스트 뷰는 항상 펼쳐져 있고, 스피너 뷰는 클릭을 했을 때 펼쳐진다는 점이다.

간단한 예제를 살펴보자! 

먼저 첨부파일에서 코난 등장인물들의 사진을 다운로드 한다.

drawable 폴더를 찾아서 안에 넣어주면 됩니다!

소스코드(Main layout)

<?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="com.example.sh415.project4_1.SpinerActivitu">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="가장 좋아하는 캐릭터는?"
        android:textColor="@color/colorAccent"
        android:layout_margin="5dp"
        android:textSize="24dp"
        />
    <Spinner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/spinner"></Spinner>
 
 
</LinearLayout>
 
 

소스코드(photo 함수 호출시 등장하는 layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tvName"
        android:textSize="20dp"
        android:background="#bbeeff00"/>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="2"
 
        android:id="@+id/ivPhoto"/>
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:text="Back"
        android:layout_gravity="center_horizontal"
        android:id="@+id/btnBack"/>
 
</LinearLayout>

소스코드(스피너 Activity)

package com.example.sh415.project4_1;
 
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Spinner;
import android.widget.TextView;
 
public class SpinerActivitu extends AppCompatActivity implements AdapterView.OnItemSelectedListener{
 
    Spinner spinner;
    ImageView ivPhoto;
    TextView tvName;
    Button btnBack;
 
    ArrayAdapter<String> myAdapter;
    Integer[] photos = {0,R.drawable.conan,R.drawable.rose,R.drawable.ran,R.drawable.kid,R.drawable.mori,R.drawable.aeri};
    String[] names = {"이곳을 클릭하여 선택하세요.","코난","장미","미란","키드","명한","애리"};
    private Activity myActivity;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_spiner_activitu);
 
        myActivity = SpinerActivitu.this;
        myAdapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_dropdown_item,names);
        spinner = (Spinner) findViewById(R.id.spinner);
        spinner.setAdapter(myAdapter);
        spinner.setOnItemSelectedListener(this);
 
 
    }
 
    public void onItemSelected(AdapterView<?> parent, View view, int position, long id){
        if(position>0)
            showBigPhoto(position);
    }
 
    public void onNothingSelected(AdapterView<?> parent){
 
    }
    public void showBigPhoto(int position){
        setContentView(R.layout.solo_photo);
        tvName = (TextView)findViewById(R.id.tvName);
        ivPhoto = (ImageView)findViewById((R.id.ivPhoto));
        tvName.setText("좋아하는 인물은 : " + names[position]);
        ivPhoto.setImageResource(photos[position]);
        btnBack=(Button)findViewById(R.id.btnBack);
        btnBack.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View v){
                myActivity.recreate();
            }
        });
    }
 
 
}
 

출력화면

스피너 뷰가 "이곳을 클릭하여 선택하세요" 부분이다. 

클릭하였더니 목록이 펼쳐지는 스피너 뷰의 모습이다.

코난을 클릭하였을때 화면이다. 

Back 버튼을 누르게 되면 초기 화면으로 돌아간다. 

Activity 소스코드에서 57번줄에서  myActivity.recreate(); 이 부분이 그 역할을 해준다.