NEW 앱인벤터2 강좌18. 컴포넌트 탐구 – 스위치(Switch)

이 글은 읽는데 약 3분이 걸립니다.

전체 강좌 목록:
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. 예제

스위치의 켜짐/꺼짐 여부를 확인할 수 있는 간단한 예제입니다.
또한 각 영역의 색상을 다르게 지정하여 각 부분의 위치를 확인해 볼 수 있습니다.


댓글

제목과 URL을 복사했습니다