앱인벤터 버튼기능 완벽 가이드
앱인벤터 기초강좌로 버튼기능에 대하여 포스팅 해 보도록 하겠습니다.
■ 사용하기
버튼(Button) 컴포넌트(Components) 기능을 사용하기 위해서는 팔레트(Palette)에서 사용자 인터페이스(User Interface) 하위에 위치하고 있는 버튼 컴포넌트를 드래그하여 뷰어(Viewer) 위에 올려 놓으면 됩니다.
■ 속성설정
버튼의 속성(Properties)은 디자이너(Designer)에서 바로 설정을 할 수 있으며, 또한 블록(Blocks)에서 설정을 할 수도 있습니다.
디자이너에서 속성영역을 보면 어떤 속성들이 있는지 쉽게 알 수가 있습니다.
속성 |
설명 |
배경색 (BackgroundColor) |
버튼 배경색 |
활성화(Enabled) |
설정되지 않은 경우(비활성화) 버튼을 눌러 액션을 발생시킬 수 없습니다. |
글꼴 굵게(FontBold) |
설정하면 버튼 텍스트가 굵게 표시됩니다. |
글꼴 이텔릭(FontItalic) |
설정하면 버튼 텍스트가 이탤릭체로 표시됩니다. |
글꼴크기(FontSize) |
버튼 텍스트의 크기를 설정합니다. |
글꼴 서체(FontTypeface) |
버튼 텍스트의 글꼴 서체를 설정합니다. |
높이(Height) |
버튼 높이를 설정합니다.(자동, 부모에 맞추기, pixels, percent) |
너비(Width) |
버튼 너비를 설정합니다.(자동, 부모에 맞추기, pixels, percent) |
이미지(Image) |
버튼에 표시 할 이미지를 설정합니다. 클릭하면 파일올리기 버튼이 보입니다. 파일을 올리고 선택하면 버튼이 이미지로 대체 되어 표시 됩니다. |
모양(Shape) |
버튼의 모양(기본값, 둥근모양, 사각형, 타원형)을 지정합니다. 이미지가 표시되면 모양은 보이지 않습니다. |
피드백 사용 (ShowFeedback) |
이미지를 배경으로 사용하는 버튼에 대한 시각적 피드백을 표시할지 여부를 지정합니다. ※ 클릭 시 이미지 색상이 옅어지는 현상 입니다. |
텍스트(Text) |
버튼에 표시 할 텍스트를 입력합니다. |
텍스트 정렬 (TextAlignment) |
버튼 텍스트의 정렬을 지정합니다.(왼쪽, 가운데, 오른쪽) |
텍스트 색상(TextColor) |
버튼의 텍스트 색을 설정합니다. |
보이기(Visible) | 버튼을 화면에 표시할지 여부를 지정합니다. |
■ 실습
버튼을 드래그하여 아래와 같이 설정을 해 볼 수 있습니다.
가장 위에 있는 것 두가지는 텍스트 상자입니다. 텍스트 상자를 추가한 이유는 블록에서 포커스 관련 기능을 설명하기 위함입니다.
■ 블록 기능
버튼의 제어기능에는 다음과 같은 것들이 있습니다. 어떻게 적용되는지 쉽게 알수있도록 확인 할 수 있는 실습 코딩을 작성 해 보았습니다.
기능 |
설명 |
클릭(Click) |
버튼을 클릭 했을 때 실행 |
포커스 받음(GotFocus) |
포커스를 받았을 경우 실행 |
포커스 사라짐(LostFocus) |
포커스가 사라질 경우 실행 |
길게 누르기(LongClick) |
길게 누를 경우 실행 |
터치 다운(TouchDown) | 터치 다운 시에 실행 |
터치 업(TouchUp) |
터치 업 시에 실행 |
여기에서 궁금증이 생길 것입니다. '클릭과 터치업의 다른 점이 무엇을까' 라는 질문 일 것입니다.
짧게 눌렀다가 떼면 클릭 기능이 실행되어 연두색으로 버튼이 변경됩니다. 그러나 길게 눌렀다가 떼면 회색으로 변경 됩니다.
- 버튼을 짧게 누르는 경우 : 파란색 → 연두색
- 버튼을 길게 누르는 경우 : 파란색 → 보라색 → 획색
포커스 기능은 버튼 기능으로 확인 할 수가 없습니다. 버튼에 포커스를 이동시키는 것이 모바일에서 실행되지 않았기 때문입니다. 그래서 텍스트 상자를 추가한 것입니다.
텍스트 상자1에 포커스를 이동할 경우(텍스트상자 클릭) 버튼이 연두색으로 변경되는 것을 확인 할 수 있습니다.
그리고 텍스트상자2를 클릭하면 텍스트상자1은 포커스가 사라지기 때문에 버튼 색이 회색으로 변경되는 것을 알 수 있습니다.
- 텍스트상자1 클릭(텍스트상자1 포커스 받았을 경우) : 버튼색상 연두색
- 텍스트상자2 클릭(텍스트상자1 포커스 사라진 경우) : 버튼색상 획색
버튼블록에는 제어블록 외에 값설정(set) 블록과 값을 가져오는(get) 블록들이 있습니다.
제어기능 안에 이 블록들을 사용할 수 있습니다. 물론 다른 곳에서도 사용 가능합니다.
지정하기 블록 하나를 추가하여 클릭해 보면 설정할 수 있는 다른 블록들로 변경이 가능합니다.
그리고 설정 값 블록을 연결 시켜 주면 됩니다. 만약 설정값의 타입과 맞지 않는 값을 연결하고자 한다면 연결이 되지 않습니다. 예를 들어 체크타입(true/false) 에 텍스트 값 블록을 연결하고자 한다면 연결이 되지 않는 것입니다.
■ 모바일 화면
아래와 같이 모바일화면에서 앱을 실행하여 확인 할 수가 있습니다.
이렇게 하여 버튼기능을 가지고 테스트 앱을 만들어 보았습니다
앱인벤터 메뉴를 별도로 만든 만큼 기초에서 부터 응용까지 다양한 부분들을 다루어 볼 것입니다.
그럼 앱인벤터를 가지고 멋진 앱을 만들 수 있는 그날까지 화이팅 해 봅니다.
'어린이 코딩 > 앱인벤터 기초' 카테고리의 다른 글
앱인벤터 제어 각각 반복(for문) 완벽 가이드 (0) | 2017.11.12 |
---|---|
앱인벤터 공통블록 제어 완벽 가이드 - 만약 그러면(IF문) (0) | 2017.11.11 |
앱인벤터2 - 에뮬레이터(Emulator)를 이용한 앱 테스트하기 (0) | 2017.11.01 |
앱인벤터2 - 목록뷰 및 레이블 컴포넌트 완벽 가이드 (0) | 2017.10.20 |
[인벤터] 퓨전테이블(Fusiontables)을 이용한 모바일 앱 데이터 저장하기 (0) | 2017.09.26 |