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.