[Android] iphone Style Switch Custom(라이브러리 사용하여 아이폰 스타일 스위치 간단하게 구현하기)

안드로이드에서 제공되는 기본 스위치 디자인 외에 아이폰 스타일의 스위치를 사용하기 위해 drawble 폴더에 thumb와 track background 파일을 만들고 직접 적용시켜본 경험들이 있을 것이다. 이처럼 xml 파일을 만들지 않고, 간단하게 라이브러리만 적용시켜 아이폰 스타일의 스위치를 구현하는 방법에 대한 포스팅이다. 디자인뿐만 아니라 애니메이션도 적용이 되며 색상도 커스텀이 가능하다.

 

↓SwitchButton Library

https://github.com/zcweng/SwitchButton

zcweng/SwitchButton

 

01. build.gradle 의존성 추가

의존성을 추가해준 후 우측 상단에 sync now를 눌러준다.

 

[Gradle Scripts] - [build.gradle(Project: 프로젝트명)]

buildscript {
    repositories {
        mavenCentral()
        jcenter()
    }
}

 

[Gradle Scripts] - [build.gradle(Module:app)]

dependencies {
    compile 'com.github.zcweng:switch-button:0.0.3@aar'
}

 

02. XML Switch 추가

다음과 같이 선언해주면 사용이 가능하다. 기본 스타일은 초록색에 지시자가 포함되어 있는 레이아웃이고, 지시자를 사라지게 할 수도 있다. 적용시킬 수 있는 항목들은 아래에 정리하겠다.

<com.suke.widget.SwitchButton
        android:id="@+id/switch_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

 

More Style

<attr name="sb_shadow_radius" format="reference|dimension"/>     
<attr name="sb_shadow_offset" format="reference|dimension"/>
<attr name="sb_shadow_color" format="reference|color"/>         
<attr name="sb_uncheck_color" format="reference|color"/>        
<attr name="sb_checked_color" format="reference|color"/>          
<attr name="sb_border_width" format="reference|dimension"/>      
<attr name="sb_checkline_color" format="reference|color"/>       
<attr name="sb_checkline_width" format="reference|dimension"/>    
<attr name="sb_uncheckcircle_color" format="reference|color"/>    
<attr name="sb_uncheckcircle_width" format="reference|dimension"/> 
<attr name="sb_uncheckcircle_radius" format="reference|dimension"/>
<attr name="sb_checked" format="reference|boolean"/>             
<attr name="sb_shadow_effect" format="reference|boolean"/>       
<attr name="sb_effect_duration" format="reference|integer"/>   
<attr name="sb_button_color" format="reference|color"/>           
<attr name="sb_show_indicator" format="reference|boolean"/>       
<attr name="sb_background" format="reference|color"/>              
<attr name="sb_enable_effect" format="reference|boolean"/>         

 

속성 정리

sb_shadow_radius	그림자 반지름(범위)
sb_shadow_offset	그림자 위치 이동
sb_shadow_color	그림자 색상
sb_uncheck_color	선택 안 됐을 때 배경 색상
sb_checked_color	선택 됐을 때 배경 색상
sb_border_width	테두리 폭
sb_checkline_color	① 색상
sb_checkline_width	① 폭
sb_uncheckcircle_color	② 색상
sb_uncheckcircle_width	② 폭
sb_uncheckcircle_radius	② 반지름(둥근 정도)
sb_checked	기본 on/off 설정
sb_shadow_effect	그림자 효과
sb_effect_duration	그림자 지속시간
sb_button_color	동그라미 버튼(thumb) 색상
sb_show_indicator	지시자(①, ②)표시 여부
sb_background	배경
sb_enable_effect	on/off 효과

 

 

 

본 작성자는 안드로이드 개발을 공부하고 있는 학생으로 피드백 및 질문을 환영합니다. 그러나 무단복제 및 배포는 정중하게 사양하고 있으며, 참고 사이트로 링크를 남기실 때는 동의를 구해주시기 바랍니다.