본문 바로가기
어린이 코딩/앱인벤터 기초

앱인벤터2 - 버튼기능 완벽 가이드

by [바가지] 2017. 10. 17.
반응형

앱인벤터 버튼기능 완벽 가이드

 

앱인벤터2 버튼기능 완벽 가이드

 

앱인벤터 기초강좌로 버튼기능에 대하여 포스팅 해 보도록 하겠습니다.

 

■ 사용하기

버튼(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)  버튼을 화면에 표시할지 여부를 지정합니다.

 

속성1 속성2

 

■ 실습

버튼을 드래그하여 아래와 같이 설정을 해 볼 수 있습니다.

가장 위에 있는 것 두가지는 텍스트 상자입니다. 텍스트 상자를 추가한 이유는 블록에서 포커스 관련 기능을 설명하기 위함입니다.

 

실습 화면

 

 

 

 

■ 블록 기능

버튼의 제어기능에는 다음과 같은 것들이 있습니다. 어떻게 적용되는지 쉽게 알수있도록 확인 할 수 있는 실습 코딩을 작성 해 보았습니다.

 

버튼의 제어기능제어기능 실습

 

기능

설명 

 클릭(Click)

 버튼을 클릭 했을 때 실행

 포커스 받음(GotFocus)

 포커스를 받았을 경우 실행

 포커스 사라짐(LostFocus)

 포커스가 사라질 경우 실행

 길게 누르기(LongClick)

 길게 누를 경우 실행

 터치 다운(TouchDown)  터치 다운 시에 실행
 터치 업(TouchUp)

 터치 업 시에 실행

 

여기에서 궁금증이 생길 것입니다. '클릭과 터치업의 다른 점이 무엇을까' 라는 질문 일 것입니다.

짧게 눌렀다가 떼면 클릭 기능이 실행되어 연두색으로 버튼이 변경됩니다. 그러나 길게 눌렀다가 떼면 회색으로 변경 됩니다.

 

- 버튼을 짧게 누르는 경우 : 파란색 → 연두색

- 버튼을 길게 누르는 경우 : 파란색 → 보라색 → 획색

 

포커스 기능은 버튼 기능으로 확인 할 수가 없습니다. 버튼에 포커스를 이동시키는 것이 모바일에서 실행되지 않았기 때문입니다. 그래서 텍스트 상자를 추가한 것입니다.

텍스트 상자1에 포커스를 이동할 경우(텍스트상자 클릭) 버튼이 연두색으로 변경되는 것을 확인 할 수 있습니다.

그리고 텍스트상자2를 클릭하면 텍스트상자1은 포커스가 사라지기 때문에 버튼 색이 회색으로 변경되는 것을 알 수 있습니다.

 

- 텍스트상자1 클릭(텍스트상자1 포커스 받았을 경우) : 버튼색상 연두색

- 텍스트상자2 클릭(텍스트상자1 포커스 사라진 경우) : 버튼색상 획색

 

버튼블록에는 제어블록 외에 값설정(set) 블록과 값을 가져오는(get) 블록들이 있습니다.

 

블록종류

 

제어기능 안에 이 블록들을 사용할 수 있습니다. 물론 다른 곳에서도 사용 가능합니다.

지정하기 블록 하나를 추가하여 클릭해 보면 설정할 수 있는 다른 블록들로 변경이 가능합니다.

그리고 설정 값 블록을 연결 시켜 주면 됩니다. 만약 설정값의 타입과 맞지 않는 값을 연결하고자 한다면 연결이 되지 않습니다. 예를 들어 체크타입(true/false) 에 텍스트 값 블록을 연결하고자 한다면 연결이 되지 않는 것입니다.

 클릭블록

 

■ 모바일 화면

아래와 같이 모바일화면에서 앱을 실행하여 확인 할 수가 있습니다.

 

모바일화면

이렇게 하여 버튼기능을 가지고 테스트 앱을 만들어 보았습니다

앱인벤터 메뉴를 별도로 만든 만큼 기초에서 부터 응용까지 다양한 부분들을 다루어 볼 것입니다.

그럼 앱인벤터를 가지고 멋진 앱을 만들 수 있는 그날까지 화이팅 해 봅니다. 

반응형