이번 회사 개발과제에서 Switch 를 커스텀해서 만들어야 하는데 원하는대로 만들어지지 않아 고생한 걸 기록할 생각이다.
Switch 는, 클릭시 Flag (true/false) 를 이용하여 on/off 를 할 수 있는 뷰다.
Switch 는 Custom 을 하지 않을 경우는 아래와 같다.
내가 구현해야 할 디자이너가 만들어준 Switch 는 아래와 같다.
위와 같이 Custom Switch 를 만들기 위해서 필요한 파일은 아래와 같다.
일단, track 이랑 thumb 개념은 알고 있을 것이다.
track 은 스위치에 길다란 부분이다. 그리고 돌출된 원형이 thumb 이다.
shape_switch_thumb_off.xml => Vector 이미지 (디자이너가 만든 이미지를 svg 로 Import)
shape_switch_thumb_on.xml => Vector 이미지 (디자이너가 만든 이미지를 svg 로 Import)
shape_switch_thumb_selector.xml => on / off 를 에 맞게 변환되게끔 Controller 하는 리소스파일
shape_switch_track_off.xml => track 이 Off 일 경우, 색 변화 및 track Weight, Height 값 조정
shape_switch_track_on.xml => track 이 On 일 경우, 색 변화 및 track Weight, Height 값 조정
shape_switch_track_selector.xml => track on / off 에 맞게 변환되게끔 Controller 하는 리소스파일
만들다보면, Switch on/off 에 따라 색을 바꾸는 건 쉬울 것이다.
하지만 내가 원하는 건, thumb 쪽에 이미지를 넣고 사이즈 조정하는 것과, track 너비와 높이 사이즈를 조정하고 싶다.
계속해서 thumb 이미지 사이즈에 따라 자동 사이즈 변환되는 track 때문에 혼란이 왔었다.
아래와 같이하면 track Height 조절부터 thumb 크기 위치 전환까지 다 될 것이다.
thumb_off 와 thumb_on 은 이미지를 import 했으니, 해당 코드를 제외하고 남은 4개 파일 코드만 공유하겠다.
[shape_switch_thumb_selector.xml]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 이미지 Import 한 걸 연결해주면 된다. (본인들이 원하는 이미지 import) -->
<item android:state_checked="false"
android:drawable="@drawable/shape_switch_thumb_off"/>
<item android:state_checked="true"
android:drawable="@drawable/shape_switch_thumb_on"/>
</selector>
[shape_switch_track_selector.xml]
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- on / off Resource file 연결해주기 -->
<item
android:drawable="@drawable/shape_switch_track_off"
android:state_checked="false"/>
<item
android:drawable="@drawable/shape_switch_track_on"
android:state_checked="true"/>
</selector>
[shape_switch_track_off.xml]
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" />
</item>
<!-- 아래 top/bottom/left/right 로 track Height 조정하기 -->
<item
android:bottom="3dp"
android:top="3dp"
android:left="6dp"
android:right="6dp">
<shape android:shape="rectangle">
<!-- 사각 라운드 처리 -->
<corners android:radius="18dp" />
<!-- track 색 지정 -->
<solid android:color="#BDC0C3" />
<!-- track size 조정, 위에 track Height 조정하는 것과 같이 조정하며 맞추기 -->
<size
android:width="52dp"
android:height="24dp" />
</shape>
</item>
</layer-list>
[shape_switch_track_on.xml]
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle" />
</item>
<!-- 아래 top/bottom/left/right 로 track Height 조정하기 -->
<item
android:bottom="3dp"
android:top="3dp"
android:left="6dp"
android:right="6dp">
<shape android:shape="rectangle">
<!-- 사각 라운드 처리 -->
<corners android:radius="18dp" />
<!-- track 색 지정 -->
<solid android:color="#0075FF" />
<!-- track size 조정, 위에 track Height 조정하는 것과 같이 조정하며 맞추기 -->
<size
android:width="52dp"
android:height="24dp" />
</shape>
</item>
</layer-list>
이렇게 하면 내가 원하는대로 Switch 를 커스텀할 수 있다.
끝.
