안드로이드 스피너 커스텀해보기 (내가 원하는 디자인의 스피너)

저는 스피너 화살표의 간격을 조절하고싶어서 커스텀을 해보게되었습니다.

 

일단 레이아웃 먼저 만들어 주고 시작할게요.

 

-spinner_getview-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center_vertical"
    android:paddingLeft="13dp"
    android:paddingRight="13dp"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/spinnerText"
        android:textSize="16sp"
        android:textColor="#000"
        android:alpha="1"
        android:paddingBottom="20dp"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <!-- 스피너를 열었을대 보여지는 텍스트뷰 -->
</LinearLayout>

-spinner_custom-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center_vertical"
    android:paddingLeft="13dp"
    android:paddingRight="13dp"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/spinnerText"
        android:textSize="15sp"
        android:textColor="#000000"
        android:paddingLeft="13dp"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <!-- margin을 통해 텍스트와 이미지 사이의 간격 조절가능 -->
    <ImageView
        android:layout_marginLeft="5dp"
        android:src="@drawable/arrow_drop"
        android:layout_width="20dp"
        android:layout_height="25dp" />

</LinearLayout>

-activity_main-

<?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"
    tools:context=".MainActivity">

    <Spinner
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:dropDownWidth="150dp"
        android:id="@+id/spinner">
    </Spinner>
<!-- 백그라운드에 @null을 주어서 기본으로 존재하던 화살표아이콘 제거 -->
</LinearLayout>

이제 이녀석들과 연결시켜줄 어댑터를 만들어줄게요.

 

AdapterSpinner라는 이름의 클래스를 만들어주세여

 

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import java.util.List;

public class AdapterSpinner extends BaseAdapter {

    Context mContext;
    List<String> Data;
    LayoutInflater Inflater;

    public AdapterSpinner(Context context, List<String> data){
        this.mContext = context;
        this.Data = data;
        Inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public int getCount() {
        if(Data!=null) return Data.size();
        else return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) { //처음에 클릭전에 보여지는 레이아웃
        if(convertView==null) {
            convertView = Inflater.inflate(R.layout.spinner_custom, parent, false);
        }

        if(Data!=null){
            String text = Data.get(position);
            ((TextView)convertView.findViewById(R.id.spinnerText)).setText(text);
        }

        return convertView;
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) { //클릭 후 보여지는 레이아웃
        if(convertView==null){
            convertView = Inflater.inflate(R.layout.spinner_getview, parent, false);
        }

        String text = Data.get(position);
        ((TextView)convertView.findViewById(R.id.spinnerText)).setText(text);

        return convertView;
    }

    @Override
    public Object getItem(int position) {
        return Data.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }
}

그리고 이제 메인자바 부분을 볼게요

 

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Spinner;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    Spinner spinner;
    AdapterSpinner adapterSpinner;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        spinner = findViewById(R.id.spinner);

        ArrayList<String> day = new ArrayList<>();
        for(int i=1;i<32;i++){
            day.add(i+"일"); //ArrayList에 내가 스피너에 보여주고싶은 값 셋팅
        }

        adapterSpinner = new AdapterSpinner(this,day); //그 값을 넣어줌
        spinner.setAdapter(adapterSpinner); //어댑터연결


        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(),(String)spinner.getItemAtPosition(position)+"이 선택되었습니다.",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) { }
        });
    }
}

기존의 기본적으로 제공하는 스피너하고 약간 사용방식이 다릅니다. 

 

하지만 약간 다를뿐 방법은 거의 동일합니다.

 

arrow_drop.png

0.00MB

 

이 이미지는 제가 사용한 화살표 이미지입니다.

 

 

 

작동 동영상을 참고해보시고 해보시면 더 이해가 편하실것같습니다.

 

도움이 되셨다면 하트와 궁금하신 사항은 댓글을 남겨주세요.