2024.02.06(화) TIL

Android Studio에서 기본spinner를 사용하면 너무 안이쁘다. 이 spinner를 커스터마이징하는법이다.

xml

먼저 spinner를 만들어준다.

<Spinner
        android:id="@+id/spinner"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="16dp"
        android:background="@drawable/spinner_background"/>

배경색을 따로 지정해줬다.

background

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/buttonColor"/>
    <stroke
        android:width="1dp"
        android:color="@color/black"/>
</shape>

스피너의 배경은 지정한 색을 넣어줬고, 테두리는 1dp두께로 검은색으로 둘러줬다.

array.xml

<resources>
    <string-array name="tag_array">
        <item>예고편</item>
        <item>영화 리뷰</item>
        <item>OST</item>
        <item>명장면</item>
        <item>영화 패러디</item>
    </string-array>
</resources>

res/values폴더 아래에 array.xml폴더를 만들어서 spinner안에 들어갈 값들을 넣어준다. 이건 기존과 같다.

custom_spinner_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal"
    android:background="@color/buttonColor"
    android:padding="10dp">

    <TextView
        android:id="@+id/spinner_text"
        android:layout_width="350sp"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textColor="@color/white" />

    <ImageView
        android:id="@+id/spinner_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:visibility="visible"
        android:src="@drawable/arrow" />
</LinearLayout>

layout아래에 스피너 아이템을 만들어준다. 텍스트와 아래를 향하는 화살표를 만들어줬다.

사용법

private fun spinnerSetting() {
        val items = resources.getStringArray(R.array.tag_array)
        val spinnerAdapter: ArrayAdapter<String> = object : ArrayAdapter<String>(
            requireContext(),
            R.layout.custom_spinner_item,
            R.id.spinner_text,
            items
        ) {
            override fun getView(position: Int, convertView: View?, parent: ViewGroup): View {
                val view = super.getView(position, convertView, parent)
                val textView = view.findViewById<TextView>(R.id.spinner_text)
                textView.gravity = Gravity.CENTER
                return view
            }

            override fun getDropDownView(position: Int, convertView: View?, parent: ViewGroup): View {
                val view = super.getDropDownView(position, convertView, parent)
                val textView = view.findViewById<TextView>(R.id.spinner_text)
                val image = view.findViewById<ImageView>(R.id.spinner_arrow)
                image.visibility = INVISIBLE
                textView.gravity = Gravity.CENTER
                return view
            }
        }
        binding.spinner.adapter = spinnerAdapter
        binding.spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener{
            override fun onItemSelected(
                parent: AdapterView<*>?,
                view: View?,
                position: Int,
                id: Long
            ) {
                when(position){
                    0 -> {

                    }
                    1 -> {

                    }
                    2 -> {

                    }
                    3 -> {

                    }
                    else -> {

                    }
                }
            }

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

getView는 클릭되기전 기본 spinner이고, getDropDownView는 클릭시 아래에 생기는 데이터들이다.
화살표는 기본에만 보이게 설정해줬다. 그리고 스피너의 가로길이가 match_parent로 되어있어서 긴데, textView들은 왼쪽정렬이 되어있어서 보기안좋아서 중앙정렬을 시켜줬다.

spinner
customspinner
스피너
커스텀스피너
스피너꾸미기