앱인벤터 스위치 컴포넌트

 

 앱인벤터 스위치 컴포넌트

 

앱인벤터의 컴포넌트들 중에 스위치 컴포넌트는 사용자가 탭을 하면 on/off 상태로 변경할 수 있는 컴포넌트이다. 스위치 컴포넌트는 체크박스 컴포넌트와 유사한 기능을 하는데, 둘 중의 하나의 값만 선택할 때 주로 활용한다.

 

 

. 앱인벤터 스위치 컴포넌트

스마트폰을 사용하다 보면, on/off 스위치 버튼 모양의 사용자 인터페이스가 있는데, 둘 중의 하나의 값을 선택할 때 사용한다. 예로 on/off나 yes 혹은 no 등의 값을 선택할 때 사용된다.

스위치를 탭하면 참의 값으로 설정되어 있는 경우에는 거짓의 값으로, 거짓의 값으로 설정되어 있다면 참의 값으로 값이 변경된다.

 

 

팔레트

앱인벤터의 스피너 컴포넌트는 팔레트에 “사용자 인터페이스”에 있다. 스위치 컴포넌트를 오른쪽 뷰어에 Drag&Drop하면 화면에 추가된다.

본 예제는 스위치의 탭할 때마다 아래 레이블에 값을 바꾸어주는 간단한 예제이다.

 

 

뷰어

 

아래 그림은 팔레트에서 스위치 컴포너트를 추가하여 뷰어에 나타난 화면이다.

하기 예제는 스위치 컴포넌트와 아래에 수평배치로 레이블 컴포넌트 2개를 삽입하여 수평배치하였다. 스위치를 움직이면 아래에 스위치의 값을 레이블에 출력하는 것이다.

 

앱인벤터 스위치 컴포넌트 삽입 화면 예시

 

앱인벤터의 스위치 컴포넌트의 속성값

 

앱인벤터 스위치 컴포넌트의 속성값으로는 예, 활성화섬네일색상, 비활성화섬네일색상, 활성화트랙색상, 비활성화트랙색상 등의 값이 있다. 나머지 다른 속성값은 레이블이나 버튼 컴포넌트의 속성값을 참고하면 된다.

‘예’는 앱인벤터 스위치 컴포넌트의 기본 값을 설정하는 것이다. 많이 체크를 하면 스위치 컴포넌트의 값은 참으로 설정하는 것이며 체크를 해제하면 거짓으로 설정하는 것이다.

활성화섬네일색상 및 비활성화섬네일색상은 스위치 컴포넌트의 스위치의 색상을 설정한다. 활성화섬네일색상은 ‘예’ 값이 체크가 되어 있으면 활성화섬네일색상을 표시하며, ‘예’ 값이 체크 해제가 되어 있으면 비활성화섬네일색상이 표시된다.

활성화트랙색상과 비활성화트랙색상은 동그라미 스위치 외의 영역을 트랙이라 하는데 트랙 색상을 설정한다. 스위치가 활성화상태일 때, 활성화트랙의 색상을 표시하며, 스위치가 비활성화일 때에는 비활성화트랙색상을 표시한다.

 

앱인벤터 스위치 컴포넌트 속성값

  

. 앱인벤터 스위치 컴포넌트의 블럭들

 

. 앱인벤터 스위치 블럭중 이벤트 블럭들

앱인벤터 스위치 컴포넌트의 이벤트 블럭은 ‘변경되었을때’, ‘포커스를받았을때’, ‘포커스를잃었을때’ 이벤트 블럭이 있다. 만일 사용자가 스위치를 탭하여 스위치값이 변경되면 ‘변경되었을때’ 블럭이 호출된다. ‘포커스를받았을때’와 ‘포커스를잃었을때’ 블럭은 스위치블럭이 포커스를 받거나 잃어버렸을 경우에 호출되는 이벤트 블럭이다.

 

앱인벤터 스위치 컴포넌트 이벤트 블럭

  

. 앱인벤터 스위치 블럭중 가져오기/지정하기 블럭들

 

. 예 블럭

앱인벤터 스위치 컴포넌트의 ‘예’ 블럭은 초기 스위치의 값을 설정하거나 설정된 값을 가져오는 블럭이다.

 

앱인벤터 스위치 컴포넌트 예 블럭

  

. 활성화섬네일색상/비활성화섬네일색상 가져오기/지정하기 블럭

앱인벤터 스위치 컴포넌트의 활성화섬네일색상/비활성화섬네일색상 블럭은 스위치의 섬네일색상을 설정하거나 색상값을 가져오는 블럭이다.

 

앱인벤터 스위치 컴포넌트 활성화섬네일색상 블럭

 

 

. 활성화트랙색상/비활성화트랙색상 가져오기/지정하기 블럭

앱인벤터 스위치 컴포넌ㅌ에서 트랙색상은 스위치의 배경색상이라고 이해하면 된다. 이 경우에도스위치가 활성화 및 비활성화에 따라 색상을 다르게 지정할 수 있다.

 

앱인벤터 스위치 컴포넌트 활성화트랙색상 블럭

 

 

나머지 블럭은 기본 블럭들이고 중복되어서 생략합니다. 이에 알고 싶으면 레이블이나 버튼 블럭을 참고해주시면 감사하겠습니다.

 

 

. 앱인벤터 스위치 컴포넌트의 간단한 예제

스위치를 탭할 때마다 값을 레이블에 표시하는 간단한 앱인벤터 스위치 컴포넌트를 활용한 예제이다. 화면 구성은 아래와 같다.

 

앱인벤터 스위치 컴포넌트 스위치 활용 예제

 

블럭코드는 간단하다. 스위치 컴포넌트 블럭에서 ‘변경되었을때’를 drag&drop하고, ‘값’ 레이블을 가져와서 ‘텍스트’에 스위치 ‘예’ 가져오기 값을 지정하면 된다.

 

앱인벤터 스위치 컴포넌트 변경되었을때 블럭 활용예시

 

앱인벤터 스위치 컴포넌트 스위치 오프일때 화면

   

앱인벤터 스위치 컴포넌트 스위치 on일때 예시 화면

 

 

 

아래 첨부파일은 앱인벤터 스위치 컴포넌트 활용 예제 파일입니다.

switch_ex.aia

0.00MB

 

 

 

이상으로 알림 컴포넌트와 관련된 코딩블록을 리뷰해보았습니다. 여기서 다루지 않은 블록들은 기본적인 블록들로 레이블이나 버튼 컴포넌트의 블록에서 다루었기 때문에 해당 글을 참고하시면 감사하겠습니다.

 

눈으로 보는 것과 직접 실행하며 하는 것은 완전히 달라요.

간단하지만 직접 해보면 이해하고 자신감이 생길거에요...

 

Just Do It!!!

Just Drag&Drop It!!!

 

 

감사합니다.