전체 강좌 목록:
http://semicolon1.kr/appinventor.html
스위치는 사용자가 클릭으로 켜고 끌 수 있는 컴포넌트 입니다.
0. 개요
스위치는 말그대로 켜고 끌 수 있는데, 모양도 스위치와 동일하게 생겼습니다.
사용자가 누를 때 마다 켜짐 상태와 꺼짐 상태가 반복됩니다.
보통 어떤 설정 항목이나 무언가를 활성화/비활성화 시키는 기능을 구현할 때 사용합니다.
체크박스와 거의 동일합니다.
1. 형태
기본 모양은 꺼져있는 스위치입니다.
텍스트는 스위치의 좌측에 배치됩니다.
1. 속성
스위치(Switch) 속성 | |
속성명 | 설명 |
배경색(BackgroundColor) | 스위치의 배경색을 지정합니다. |
활성화(Enabled) | 활성화 여부를 지정합니다. 값이 거짓이면 스위치를 눌러도 움직이지 않습니다. |
글꼴굵게(FontBold) | 텍스트를 굵게 표시합니다. |
글꼴이텔릭(fontItalic) | 텍스트를 이텔릭으로 기울여서 표시합니다. |
글꼴크기(FontSize) | 텍스트의 크기를 sp단위로 지정합니다. |
글꼴서체(FontTypeface) | 텍스트의 폰트를 지정합니다. |
높이(Height) | 스위치의 높이를 px단위로 지정합니다. |
너비(Width) | 스위치의 너비를 px단위로 지정합니다. |
켜기(On) | 체크하면 스위치의 기본 상태를 켜짐으로 변경합니다. |
텍스트(Text) | 스위치 좌측에 표시될 텍스트를 지정합니다. |
텍스트 색상(TextColor) | 텍스트의 색상을 지정합니다. |
활성화 섬네일 색상(ThumbColorActive) | 켜진 상태의 스위치의 썸의 색상을 지정합니다. *썸: 스위치에 달려서 상태가 변경될 때 마다 움직이는 그것. |
비활성화 섬네일 색상(ThumbColorInactive) | 꺼진 상태의 스위치의 썸의 색상을 지정합니다. |
활성화 트랙 색상(TrackColorActive) | 켜진 상태의 스위치의 트랙 색상을 지정합니다. *트랙: 스위치 썸 뒤에 있는 막대모양 배경 |
비활성화 트랙 색상(TrackColorInactive) | 꺼진 상태의 스위치의 트랙 색상을 지정합니다. |
보이기 여부(Visible) | 스위치의 보이기 여부를 지정합니다. |
2. 블록
스위치(Switch) 이벤트 블록 | |
블록 | 설명 |
 | 스위치의 상태가 변경되었을 때 실행됩니다. |
 | 스위치가 포커스를 받았을 때 실행됩니다. |
 | 스위치가 포커스를 잃었을 때 실행됩니다. |
스위치(Switch) 속성 지정 블록 | ||
블록 | 입력형식 | 설명 |
 | 색상 | 스위치의 배경색을 지정합니다. |
 | 논리 | 스위치의 활성화를 지정합니다. |
 | 숫자 | 텍스트의 크기를 sp단위로 지정합니다. |
 | 숫자 | 스위치의 높이를 px단위로 지정합니다. |
 | 숫자 | 스위치의 높이를 현재 스크린의 높이에 대한 비율(%)로 지정합니다. |
 | 논리 | *에 는 오역입니다 스위치의 켜짐 여부를 지정합니다. |
 | 텍스트 | 스위치 좌측에 표시될 텍스트를 지정합니다. |
 | 색상 | 텍스트의 색상을 지정합니다. |
 | 색상 | 켜진 상태의 스위치의 썸의 색상을 지정합니다. |
 | 색상 | 꺼진 상태의 스위치의 썸의 색상을 지정합니다. |
 | 색상 | 켜진 상태의 스위치의 트랙 색상을 지정합니다. |
 | 색상 | 꺼진 상태의 스위치의 트랙 색상을 지정합니다. |
 | 논리 | 스위치의 보이기 여부를 지정합니다. |
 | 숫자 | 스위치의 너비를 px단위로 지정합니다. |
 | 숫자 | 스위치의 너비를 현재 스크린의 너비에 대한 비율(%)로 지정합니다. |
스위치(Switch) 속성 블록 | |
블록 | 반환형식 |
 | 색상 |
 | 논리 |
 | 숫자 |
 | 숫자 |
 | 논리 |
 | 텍스트 |
 | 색상 |
 | 색상 |
 | 색상 |
 | 색상 |
 | 색상 |
 | 논리 |
 | 숫자 |
 | 컴포넌트 |
3. 예제
스위치의 켜짐/꺼짐 여부를 확인할 수 있는 간단한 예제입니다.
또한 각 영역의 색상을 다르게 지정하여 각 부분의 위치를 확인해 볼 수 있습니다.
댓글