Switch(스위치) 커스텀해서 사용하기

Posted by ITPangPang
2016.10.27 23:04 안드로이드(android)/위젯(Widget)


Switch(스위치) 

커스텀해서 사용하기



ㆍ 이번글에서는 Switch에 대해서 알아보겠습니다.


ㆍ 전 뭐 한두번밖에 안써봐서 많이 쓰이는지느 모르겠으나.

    사용방법에 대해 간단하게 보고, 원하는 모양으로

    만들어서 사용하는 방법에 대해 알아보겠습니다.



일단 기본 Switch부터 알아보자!


xml로 가서 바로 넣어보면

어떻게 생긴놈인지 볼 수 있겠죠?


<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>


이러고 돌려보면

뭐라도 나오겠죠


뭐 이런 약간..

허접해보이는 스위치가

하나 나오네요



오른쪽으로 끌어다

놓으니

이건 봐줄만 하네요



자!

사용방법은 on일때 off일때

처리만 해주는 간단한 작업이므로

있다가 맨 밑 구석에서 보고.


일단은

여기서 모양을 이쁘게 바꿔보는

시간을 가져보도록 하겠습니다.


내 맘대로 바꿔보자!


만들기 나름이지만

우리는 trackthumb

변경해주면서 원하는 모양으로

바꾸는 작업을 할 것입니다


track이든 thumb이든

모두 2가지 모양을 만들어놔야됩니다

(shape drawable)


On!일때, Off!일때




먼저 Track부터 바꿔보자!


먼저 track을 바꿔보도록

하겠습니다.


Off부터 만들어보겠습니다.


[drawable]-[switch_track_off.xml]

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="15dp" />
<size
android:width="75dp"
android:height="25dp" />
<solid
android:color="#000000" />
<stroke
android:width="2dp"
android:color="#000000" />
</shape>


일단 이정도로 만들어보면


이렇게 생겼다네요!


일단 만들어놓고 입맛에 맞게

수정하도록 하죠!


그 다음

On을 만들어보겠습니다.

정열의 빨간색으로!!


[drawable]-[switch_track_on.xml]

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

<corners
android:radius="15dp" />
<size
android:width="75dp"
android:height="25dp" />
<solid
android:color="#FF0000" />
<stroke
android:width="2dp"
android:color="#FF0000" />
</shape>




두 가지를 만들었으면!

합쳐야죠!!


[drawable]-[switch_track_selector.xml]

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/switch_track_off"
android:state_checked="false"/>

<item
android:drawable="@drawable/switch_track_on"
android:state_checked="true"/>

</selector>


그럼 이제 thumb를 만들어보자!


음 근데 thumb을

색깔 나누는게 이쁜가요?

일단 한개로 만들어보죠

안이쁘면 2개로 바꾸죠

(완성이 목표..)


[drawable]-[switch_thumb.xml]

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<size
android:width="25dp"
android:height="25dp" />

<solid
android:color="#FFFFFF" />

<stroke
android:width="1dp"
android:color="#FFFFFF" />

</shape>



자 일단 하나로 돌려보고!


[drawable]-[switch_thumb_selector.xml]

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">

<size
android:width="25dp"
android:height="25dp" />

<solid
android:color="#FFFFFF" />

<stroke
android:width="1dp"
android:color="#FFFFFF" />

</shape>


일단 완성!!


한번 돌려보자!


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context="com.tistory.itpangpang.customswitch.MainActivity">

<Switch
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:track="@drawable/switch_track_selector"
android:thumb=
"@drawable/switch_thumb_selector"
/>

</RelativeLayout>


만든 2가지를 넣어서

돌려보면 되겠죠?



나름 봐줄만 하네요!


그 다음 마무리로

스위치 기준 왼쪽과

오른쪽에 On/Off 써주겠습니다


그리고 Switch 자체 Text는 제거해버리겠습니다

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/rl"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tistory.itpangpang.customswitch.MainActivity">


<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toLeftOf="@+id/sw"
android:layout_marginRight="10dp"
android:textColor="#000000"
android:textSize="20dp"
android:textStyle="bold"
android:text="off"/>
<Switch
android:id="@+id/sw"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:track="@drawable/switch_track_selector"
android:thumb="@drawable/switch_thumb_selector"
android:text=""
android:textOn=""
android:textOff=""
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toRightOf="@+id/sw"
android:layout_marginLeft="10dp"
android:textColor="#FF0000"
android:textSize="20dp"
android:textStyle="bold"
android:text="on"/>

</RelativeLayout>



어느정도 된 것 같습니다


아 추가로 Switch 길이를 늘리려면

android:switchMinWidth = "~dp"

을 써주면 됩니다


대충~~ 만드는 방법만

알아봤습니다.


다음번에

추가로 글 하나

더 써서 다양한 모양을

만들어보겠습니다

(소스랑 결과화면만 나오는식으로

만들어보도록 하겠습니다)

저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로