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

Switch(스위치) 

커스텀해서 사용하기

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

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

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

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

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

xml로 가서 바로 넣어보면

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

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

이러고 돌려보면

뭐라도 나오겠죠

뭐 이런 약간..

허접해보이는 스위치가

하나 나오네요

오른쪽으로 끌어다

놓으니

이건 봐줄만 하네요

자!

사용방법은 on일때 off일때

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

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

일단은

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

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

내 맘대로 바꿔보자!

만들기 나름이지만

우리는 track과 thumb을

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

바꾸는 작업을 할 것입니다

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"

을 써주면 됩니다

대충~~ 만드는 방법만

알아봤습니다.

다음번에

추가로 글 하나

더 써서 다양한 모양을

만들어보겠습니다

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

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