Android Switch의 스타일을 어떻게 지정할 수 있습니까?


121

API 14에 도입 된 스위치 위젯은 기본적으로 holo 테마로 스타일이 지정됩니다. 브랜딩을 위해 약간 다른 스타일로 색상과 모양을 변경하고 싶습니다. 이것에 대해 어떻게 갑니까? 기본 ICS와 Samsung의 touchwiz 테마의 차이점을 보았 기 때문에 가능해야한다는 것을 알고 있습니다.

여기에 이미지 설명 입력

상태 드로어 블이 필요하다고 가정하고 http://developer.android.com/reference/android/R.styleable.html 에서 Switch_thumb 및 Switch_track이 있는 몇 가지 스타일을 보았습니다. . 나는 그것들을 사용하는 방법을 모른다.

차이가 나는 경우 ActionbarSherlock을 사용하고 있습니다. 물론 API v14 이상을 실행하는 장치 만 스위치를 사용할 수 있습니다.

답변:


258

배경에 사용되는 드로어 블과 스위처 부분을 다음과 같이 정의 할 수 있습니다.

<Switch
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:thumb="@drawable/switch_thumb"
    android:track="@drawable/switch_bg" />

이제 스위처 드로어 블의 다양한 상태를 정의하는 선택기를 만들어야합니다. 다음은 Android 소스의 사본입니다.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_thumb_disabled_holo_light" />
    <item android:state_pressed="true"  android:drawable="@drawable/switch_thumb_pressed_holo_light" />
    <item android:state_checked="true"  android:drawable="@drawable/switch_thumb_activated_holo_light" />
    <item                               android:drawable="@drawable/switch_thumb_holo_light" />
</selector>

이것은 배경 위로 이동되는 이미지 인 썸 드로어 블을 정의합니다. 슬라이더에 사용되는 네 개의 나인 패치 이미지 가 있습니다 .

비활성화 된 버전 (Android에서 사용중인 xhdpi 버전) 비활성화 된 버전
누른 슬라이더 : 누른 슬라이더
활성화 된 슬라이더 (켜짐 상태) : 활성화 된 슬라이더
기본 버전 (꺼짐 상태) :여기에 이미지 설명 입력

또한 다음 선택기에 정의 된 배경에 대한 세 가지 상태가 있습니다.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_enabled="false" android:drawable="@drawable/switch_bg_disabled_holo_dark" />
    <item android:state_focused="true"  android:drawable="@drawable/switch_bg_focused_holo_dark" />
    <item                               android:drawable="@drawable/switch_bg_holo_dark" />
</selector>

비활성화 된 버전 : 비활성화 된 버전
중점 버전 : 집중 버전
그리고 기본 버전 :기본 버전

스타일 스위치를 가지려면이 두 개의 선택기를 만들고 스위치보기로 설정 한 다음 7 개의 이미지를 원하는 스타일로 변경하십시오.


1
매우 상세한 감사, 엄지 손가락의 일부를 트랙 밖으로 이동시킬 수있는 9 패치 슬라이더 이미지는 그들이 어떻게하고 있는지 알아낼 수 없었기 때문에 특히 도움이되었습니다. (기본 슬라이더는 뾰족한 가장자리 비트가 트랙 끝을 지나서 한쪽이 정사각형으로 끝나도록합니다)
Glenn.nz 2011

2
스위치가 "on"상태 일 때 트랙 이미지를 변경할 수있는 <item android : state_checked = "true"> 상태가 하나 더 있습니다. 따라서 "on"/ "off"에서 트랙을 변경하려면이 상태를 사용하십시오.
narangrajeev81

1
엄지 손가락의 텍스트 색상 스타일을 어떻게 지정할 수 있습니까? 내가 :( 어디를 찾을 수 없습니다
pojomx

1
@ pojomx. 텍스트 색상 (예 : 텍스트 색상 켜기 / 끄기)에 대한 해결책을 찾았습니까? 나는 같은 문제에 직면하고 있으며 같은 지점에 붙어 있습니다.
Smeet

"스타일 / mySwitchTextSyle @"switchTextAppearance = 변경 텍스트 색상 => 안드로이드
앤드류

50

Janusz의 멋진 자세한 답변입니다. 그러나 답변을 위해이 페이지를 찾는 사람들을 위해 더 쉬운 방법은 Android Asset Studio에서 링크 된 http://android-holo-colors.com/ (데드 링크)입니다.

모든 도구에 대한 좋은 설명은 AndroidOnRocks.com (현재 오프라인 사이트)에 있습니다.

그러나 이해가 더 명확 해 지므로 모든 사람이 Janusz의 답장을 읽을 것을 강력히 권장합니다. 도구를 사용하여 작업을 빠르게 수행


6
훌륭한 시간 절약. 한 번의 클릭으로 9 패치, 상태 목록 드로어 블 등 모두!
Steve

이 답변은 매우 편리합니다. "사용자 정의 색상으로 안드로이드 홀로 컨트롤을 쉽게 생성하는 도구"라는 질문으로 게시되고 답변이 받아 들여지기를 바랍니다. 개발자는 이것이 필요합니다.
Rachael

나는 그것이 훌륭한 도구가되었을 것이라고 확신합니다. 모든 링크는 죽었습니다. 슬프게도
Razvan_TK9692

3

다양한 색상 속성을 설정하여 재료 스타일을 사용자화할 수 있습니다. 예를 들어 사용자 정의 애플리케이션 테마

<style name="CustomAppTheme" parent="Theme.AppCompat">
    <item name="android:textColorPrimaryDisableOnly">#00838f</item>
    <item name="colorAccent">#e91e63</item>
</style>

맞춤 전환 테마

<style name="MySwitch" parent="@style/Widget.AppCompat.CompoundButton.Switch">
    <item name="android:textColorPrimaryDisableOnly">#b71c1c</item>
    <item name="android:colorControlActivated">#1b5e20</item>
    <item name="android:colorForeground">#f57f17</item>
    <item name="android:textAppearance">@style/TextAppearance.AppCompat</item>
</style>

xml 드로어 블을 정의하여 아래 이미지와 같이 스위치 트랙 및 스위치 썸을 사용자 정의 할 수 있습니다 . 자세한 내용은 http://www.zoftino.com/android-switch-button-and-custom-switch-examples

사용자 지정 스위치 트랙 및 엄지


1

대체적이고 훨씬 쉬운 방법은 9 패치 대신 모양을 사용하는 것입니다. 여기에 이미 설명되어 있습니다 : https://stackoverflow.com/a/24725831/512011


idk, kishu27의 답변에 언급 된 도구는 모든 파일을 만들기 때문에 색상을 변경하는 데 훨씬 더 빠릅니다. 색상 외에도 모양을 사용자 정의하고 싶다면 아마도 이것이 더 빠를 것입니다.
JStephen 2015 년

이 도구는 정말 훌륭하지만 솔직히 말해서 무언가의 색상 만 변경하려면 여러 이미지를 생성해야한다는 생각이 싫습니다. 또한 셰이프를 사용하는 경우 끄기 / 켜기 스위치 위치에 대해 다른 색상을 사용할 수 있습니다.
netpork 2015 년

당신이 나 같은 우유부단하고 당신은 다음처럼 하나를 찾을 때까지 나를 위해 운이 훨씬 빠릅니다 색상을 계속 변경되는 경우는 true, 다른 사람이 색상 : 따기 담당하고있다
JStephen
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.