Android 사용자 정의 스위치 스위치 단추 의 스타일 인 스 턴 스 상세 설명

표지
GitHub 전송 문
1.앞 에 쓴다
본 고 는 주로 안 드 로 이 드 네 이 티 브 스위치 컨트롤 을 바탕 으로 스타일 을 사용자 정의 하 는 것 을 말 합 니 다.내용 은 간단 하지만 실현 과정 에서 문제 가 생 겼 습 니 다.이 기록 을 통 해 여러분 에 게 도움 이 되 었 으 면 합 니 다.효과 도 를 보 세 요.

사용자 정의 스타일
2.사용자 정의 스타일
2.1 네 이 티 브 스타일
먼저 네 이 티 브 효과 보기(Android 7.1):

원생 효과
레이아웃 파일 은 다음 과 같 습 니 다:

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

2.2 사용자 정의 스타일
디자인 된 효과 도 는 대부분 원생 효 과 를 사용 하지 않 기 때문에 우 리 는 스타일 을 사용자 정의 해 야 한다.예 를 들 어 다음 과 같은 효과 가 있다.

사용자 정의 효과
Switch 의 스위치 단추 상 태 를 정의 합 니 다:
오픈 상태:switchcustom_thumb_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <solid android:color="#94C5FF" />
 <size
  android:width="20dp"
  android:height="20dp" />
</shape>

닫 힌 상태:switchcustom_thumb_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="oval">
 <solid android:color="#AAA" />
 <size
  android:width="20dp"
  android:height="20dp" />
</shape>

selector:switch 정의custom_thumb_selector.xml

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

이 스위치 의 스위치 단추 상 태 를 정의 합 니 다.다음은 Switch 슬라이드 레일 의 상 태 를 정의 합 니 다.
오픈 상태:switchcustom_track_on.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <solid android:color="#B6D6FE" />
 <stroke
  android:width="5dp"
  android:color="#00000000" />
 <corners android:radius="20dp" />
</shape>

닫 힌 상태:switchcustom_track_off.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:shape="rectangle">
 <solid android:color="#E3E3E3" />
 <stroke
  android:width="5dp"
  android:color="#00000000" />
 <corners android:radius="20dp" />
</shape>

selector:switch 정의custom_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_custom_track_on" android:state_checked="true" />
 <item android:drawable="@drawable/switch_custom_track_off" android:state_checked="false" />
</selector>

Switch 사용자 정의 스타일 입 니 다.기본 적 인 상황 에서 스위치 단 추 는 미끄럼 궤도 높이 와 같 으 며 xml 파일 에서 궤도 너비 설정 이 잘못 되 었 습 니 다.궤도 높이 를 수정 하려 면 이렇게 할 수 있 습 니 다.
궤도 높이 가 스위치 단추 높이 보다 낮 음(효과 의 첫 번 째 효과):궤도 에 투명 한 테 두 리 를 추가 합 니 다.
궤도 높이 가 스위치 단추 높이 보다 높 음(효과 중 두 번 째 효과):스위치 단추 에 투명 한 테 두 리 를 추가 합 니 다.
레일 의 너 비 는 스위치 버튼 의 너비 에 따라 자동 으로 달라 집 니 다.레일 의 너 비 를 수정 하려 면 스위치 버튼 의 너 비 를 수정 하면 됩 니 다.
사용자 정의 스타일 설정
thumb 는 스위치 단추 의 속성 입 니 다.track 은 미끄럼 궤도 의 속성 입 니 다.위의 두 개의 selector 파일 만 설정 하면 큰 성 과 를 거 둘 수 있 습 니 다.

<Switch
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:thumb="@drawable/switch_custom_thumb_selector"
 android:track="@drawable/switch_custom_track_selector" />

3.더 많은 속성
스위치 단추 에 텍스트 를 표시 하려 면 어떻게 해 야 합 니까?texton 과 textOff 속성 은 각각 열 리 고 닫 힌 텍스트 를 설정 할 수 있 습 니 다.show Text 속성 을 true 로 설정 하 는 것 을 잊 지 마 세 요.그래 야 표시 할 수 있 습 니 다.

<Switch
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_marginTop="30dp"
 android:showText="true"
 android:switchTextAppearance="@style/SwitchTheme"
 android:textOff="OFF"
 android:textOn="ON"
 android:thumb="@drawable/switch_rectangle_thumb_selector"
 android:track="@drawable/switch_rectangle_track" />

텍스트 표시 가 부족 합 니 다.텍스트 색상 을 수정 해 야 합 니 다.
res 폴 더 아래 color 폴 더 를 만 들 고 텍스트 색상 상 태 를 정의 하 는 selector:switchtext_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:color="#FFF" android:state_checked="false" />
 <item android:color="#000" android:state_checked="true" />
</selector>

그리고 style 파일 에서 스타일 을 정의 합 니 다:

<style name="SwitchTheme" parent="@android:style/TextAppearance.Small">
 <item name="android:textColor">@color/switch_text_selector</item>
</style>

마지막 으로 Switch 에 설정 하면 됩 니 다.

android:switchTextAppearance="@style/SwitchTheme"

4.마지막 에 쓴다
본 고 는 효과 도 에서 첫 번 째 스타일 의 실현 방법 만 설명 하고 더 많은 스타일 은 GitHub 에서 다운로드 하여 볼 수 있 으 며 궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.
GitHub 전송 문
총결산
위 에서 설명 한 것 은 안 드 로 이 드 사용자 정의 스위치 스위치 버튼 의 스타일 입 니 다.도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!