NEW 앱인벤터2 강좌7. 컴포넌트 탐구 – 버튼(Button)

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

전체 강좌 목록:
http://semicolon1.kr/appinventor.html

이번 편부터는 각 컴포넌트에 대해 하나하나 상세히 뜯어볼 예정입니다.
참고로 컴포넌트 탐구 강좌의 경우에는 예제가 아닌 레퍼런스 문서 형태로 정리해서 만들 예정입니다.
혹시 자세한 사용 예시가 필요한 컴포넌트의 경우 아래쪽에 쓰든 강좌를 분리하든 해서 설명할 예정입니다.
먼저, 버튼(Button)입니다.


0. 개요

버튼(Button)은 이름에서 알 수 있듯이, 주로 사용자로부터 클릭 이벤트를 받는 역할을 합니다.
형태는 버튼 형태이며, 사각형 모양입니다.
사용자가 클릭할 경우 클릭 이벤트가 발생하며, 이때 따로 실행될 블록을 지정할 수 있습니다.
대부분의 앱에서 거의 빠지지 않는 중요 요소입니다.

1. 형태

앱인벤터 디자이너 상에서 보이는 모습입니다.
회색의 사각형 안에 버튼1 의 텍스트 라고 적혀 있습니다.
보시듯 버튼에는 텍스트를 넣어 어떤 버튼인지를 보일 수 있습니다.
물론 텍스트가 없어도 상관은 없습니다만 넣는 게 보통입니다.

1. 속성

버튼(Button) 속성

속성명

설명

예시

배경색(BackgroundColor)

버튼의 배경색을 지정합니다.

활성화(Enabled)

버튼의 활성화 여부를 지정합니다.

활성화가 거짓이면 버튼을 누를 수 없습니다.

글꼴굵게(FontBold)

버튼의 텍스트에 볼드체(굵은체)를 적용합니다.

글꼴이텔릭(FontItalic)

버튼의 텍스트에 이텔릭(기울임) 적용합니다.

글꼴크기(fontSize)

버튼의 텍스트 크기를 지정합니다.

글꼴서체(FontTypeface)

버튼의 텍스트의 글꼴을 지정합니다.

높이(Feight)

버튼의 높이(세로)를 지정합니다.

너비(Width)

버튼의 너비(가로)를 지정합니다.

이미지(Image)

버튼의 배경 이미지를 지정합니다.

모양(Shape)

버튼의 모양을 지정합니다.

피드백(ShowFeedBack)

버튼의 피드백을 표시할지 설정합니다.

텍스트(Text)

버튼의 텍스트를 지정합니다.

텍스트정렬(TextAlignment)

버튼의 텍스트의 내부 정렬 방식을 지정합니다.

텍스트색상(TextColor)

버튼의 텍스트 색상을 지정합니다.

보이기여부(Visible)

버튼의 보이기 여부를 지정합니다.

2. 블록

컴포넌트의 각 블록은 색깔 별로 기능이 다릅니다.
이벤트 블록:

함수 블록: 특정 기능을 수행합니다.
속성 지정 블록: 해당 컴포넌트의 속성값을 변경합니다.
속성 블록: 해당 컴포넌트의 속성값을 가져옵니다.

버튼(Button) 이벤트 블록

블록

설명

언제 [버튼] .클릭했을때

버튼을 사용자가 클릭했을 때(눌렀다 때면) 내부 블록이 실행됩니다.

언제 [버튼] .포커스를받았을때

버튼이 포커스를 받았을 때 내부 블록이 실행됩니다.

언제 [버튼] .길게눌렀을때

버튼을 사용자가 길게 눌렀을 때 내부 블록이 실행됩니다.

언제 [버튼] .포커스를잃었을때

버튼이 포커스를 잃었을 때 내부 블록이 실행됩니다.

언제 [버튼] .터치다운했을때

버튼을 사용자가 누르는 순간 내부 블록이 실행됩니다.

언제 [버튼] .터치업했을때

버튼을 사용자가 눌렀다 때는 순간 내부 블록이 실행됩니다.

버튼(Button) 속성 지정 블록

블록

입력형식

설명

색상

버튼의 배경색을 지정합니다. 만약 이미지가 있다면, 색상은 가려서 보이지 않습니다.

논리

버튼의 활성화 여부를 지정합니다.

논리

버튼의 텍스트에 볼드체를 적용할지 지정합니다.

논리

버튼의 텍스트에 이텔릭체를 적용할지 지정합니다.

숫자

버튼의 텍스트의 크기를 지정합니다.

단위는 sp입니다.

숫자

버튼의 높이를 px 단위로 지정합니다.

숫자

버튼의 높이를 현재 스크린 높이에 대한 비율로 지정합니다.

예시로 높이 비율이 50이면 스크린 높이의 반만큼 길어집니다.

텍스트

버튼의 이미지의 경로를 지정합니다.

앱인벤터에 올린 이미지의 경우 파일명(확장자 포함)을 입력합니다. 이미지URL로도 불러올 수 있습니다.

논리

버튼이 눌릴 때 효과를 보일지 지정합니다.

텍스트

버튼의 텍스트를 지정합니다.

논리

버튼의 보이기 여부를 지정합니다.

만약 거짓이면, 버튼이 아예 사라진 것처럼 됩니다.

(View.GONE)

숫자

버튼의 너비를 px 단위로 지정합니다.

숫자

버튼의 너비를 현재 스크린 너비에 대한 비율로 지정합니다.

예시로 너비 비율이 50이면 스크린 너비의 반만큼 길어집니다.

버튼(Button) 속성 블록

블록

반환형식

색상

논리

논리

논리

숫자

숫자

텍스트

논리

텍스트

색상

논리

컴포넌트

댓글

제목과 URL을 복사했습니다