[Kotlin][Android] 안드로이드 스피너 2탄 스피너 커스텀하기

2021/02/13 - [안드로이드 코틀린] - [Kotlin] 안드로이드 스피너 만들기

[Kotlin] 안드로이드 스피너 만들기

지난 번에는 단순시 스피너를 만들었다면, 이번에는 스피너를 커스텀해보려고 합니다.

 

스피너 만들기는 지난 번에 포스팅한 내용을 참고하시면 됩니다.

 

<spinner_background.xml>

먼저 처음에 보여지는 화면에 모양을 지정하도록 해보겠습니다.

새로운 drawable을 만들어 줍니다.

drawable 추가

추가한 후에 전체 내용을 지운 후 

round_box를 입력합니다.

스틱코드 둥근 테두리 drawable

stickode.com/detail.html?no=1463

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <!--radius의 크가가 커질 수록 모서리가 더 둥글게 된다.-->
            <corners android:radius="20dp" />
            <solid android:color="원하는 색상" />
        </shape>
    </item>
</selector>

radius의 크기가 커질수록 모서리가 더 둥글게 됩니다.

위젯의 크기에 따라서도 다르게 보이기 때문에 자신이 보여주고자 하는 이미지에 맞게 수정합니다.

color는 자신이 원하는 색상을 입력하면 됩니다.

drawable

색상을 수정하고, radius까지 자신이 원하는 모양으로 수정했다면 위 사진과 같이 이미지가 보입니다.

 

<activity_main.xml>

스피너가 있는 레이아웃으로 다시 돌아가서

 

spinner에 background 설정하기

spinner에 background를 입력하고 거기에 방금 만들었던 spinner_background를 넣어주면 됩니다.

 

스피너 background

해당 사진처럼 위젯을 표시하는 모양이 변경 된 것을 확인 할 수 있습니다.

 

그럼 이번엔 눌렀을때  보여지는 메뉴의 모양을 번경 해보겠습니다.

스피너 메뉴

기존 모양은 위 사진과 같습니다. 

 

<style.xml>

(style.xml 파일이 없다면 만들어 주시면 됩니다.)

여기에서 다시한번 스틱코드를 이용하면 아주 편하게 모양을 변경할 수 있습니다.

spi 까지만 입력해도 하단에 보이는 것 처럼 spinnerTheme에 관련된 포스트를 볼 수 있습니다.

stickode.com/detail.html?no=1872

spinnerTheme (커스텀한 아이템리스트 스타일을 적용)과 spinnerDivideStyle (아이템을 나누는 선 커스텀) 을 모두 넣어줍니다.

    <style name="SpinnerDivideStyle">
        <!--아이템을 나누는 선 색상-->
        <item name="android:divider">@color/teal_200</item>
        <!--선 높이-->
        <item name="android:dividerHeight">2dp</item>
    </style>

선의 색상과, 선의 높이를 지정해줍니다. 

    <style name="SpinnerTheme" parent="Theme.AppCompat">
        <!--spinnerDivideStyle을 먼저 만들어 줘야한다.-->
        <item name="android:dropDownListViewStyle">@style/SpinnerDivideStyle</item>
    </style>
    

spinnerTheme을 설정해서 SpinnerDivideSytle을 지정해줍니다.

 

마지막으로 레이아웃에 적용하면 끝!

 

<activity_main.xml>

spinner theme

스피너에 theme이라고 입력한 후에, 방금 전 추가했던 SpinnerTheme을 넣어주면 끝입니다.

 

스피너 커스텀

 

스틱코드를 이용해 안드로이드 코틀린 스피너를 커스텀해보았습니다.

모서리 둥글게 하는 효과

stickode.com/detail.html?no=1463

• round_box

Spinner 커스텀 하기

stickode.com/detail.html?no=1872

• SpinnerDivideStyle
• SpinnerTheme