NEW 앱인벤터2 강좌9. 컴포넌트 탐구 – 날짜선택버튼(DatePicker)

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

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

날짜 선택 버튼 컴포넌트는 사용자가 버튼을 누르면 날짜를 선택할 수 있도록 하는 컴포넌트 입니다.


0. 개요

버튼의 한 종류로써, 사용자가 눌렀을 때 날짜를 선택할 수 있는 창을 띄어주는 특수한 기능을 가진 버튼 입니다.
사용자가 날짜를 선택하면 그와 관련된 처리를 할 수 있는 기능을 제공합니다.

1. 형태

위와같이 외관은 일반 버튼 컴포넌트와 동일합니다.

앱인벤터2 공식 레퍼런스
http://ai2.appinventor.mit.edu/reference/components/userinterface.html#DatePicker

1. 속성

날짜 선택 버튼(DatePicker) 속성

속성명

설명

예시

배경색(BackgroundColor)

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

활성화(Enabled)

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

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

글꼴굵게(FontBold)

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

글꼴이텔릭(FontItalic)

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

글꼴크기(fontSize)

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

글꼴서체(FontTypeface)

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

높이(Feight)

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

너비(Width)

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

이미지(Image)

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

모양(Shape)

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

피드백(ShowFeedBack)

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

텍스트(Text)

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

텍스트정렬(TextAlignment)

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

텍스트색상(TextColor)

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

보이기여부(Visible)

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

보이기가 거짓이면 마치 그 자리에 없는 것 처럼 보입니다.

2. 블록

날짜 선택 버튼(DatePicker) 이벤트 블록

블록

설명

언제 [날짜 선택 버튼] .날짜 선택 후에

사용자가 날짜 선택 버튼을 눌러서 뜬 날짜 선택 창에서 날짜를 선택한 후 확인 버튼을 눌렀을 때 실행됩니다.

언제 [날짜 선택 버튼] .포커스를 받았을 때

버튼이 포커스를 받았을 때 작동합니다.

언제 [날짜 선택 버튼] .포커스를 잃었을 때

버튼이 포커스를 잃었을 때 작동합니다.

언제 [날짜 선택 버튼] .터치다운 했을 때

손으로 버튼을 누르는 순간 실행됩니다.

언제 [날짜 선택 버튼] .터치업 했을 때

손이 버튼에서 떨어지는 순간 실행됩니다.

날짜 선택 버튼(DatePicker) 함수 블록

블록

설명

[날짜 선택 버튼] .선택창 열기

날짜를 선택하는 창을 띄웁니다.

[날짜 선택 버튼] .표시할 날짜 설정하기

ㄴ년 [숫자]

ㄴ월 [숫자]

ㄴ일 [숫자]

버튼이 눌렸을 때 기본적으로 표시할 날짜를 지정합니다.

지정하지 않을 경우 자동으로 오늘 날짜가 지정됩니다.

입력값은 숫자 입니다.

[날짜 선택 버튼] .인스턴트로 표시할 날짜 설정하기

ㄴ인스턴트

인스턴트를 이용하여 기본 표시 시간을 지정합니다.

인스턴트는 센서 탭의 시계 컴포넌트로 만들거나 가져올 수 있습니다.

그 외 날짜를 인스턴트로 제공하는 경우에도 사용 가능합니다.

날짜 선택 버튼(DatePicker) 속성 지정 블록

블록

입력형식

설명

색상

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

논리

버튼의 활성화 값을 지정합니다.

거짓이면 버튼이 눌리지 않습니다.

논리

글씨를 굵게 할 것 인지 설정합니다.

논리

글씨를 기울일 것 인지 설정합니다.

숫자

글꼴의 크기를 sp단위로 지정합니다.

숫자

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

숫자

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

예를 들어 50이면 버튼의 높이를 스크린 높이의 절반으로 지정합니다.

텍스트

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

입력값은 앱인벤터에 올린 파일명, 이미지 URL, 그 외 이미지를 반환하는 블록 등이 올 수 있습니다.

만약 배경색과 이미지가 같이 설정된 상태면 이미지만 보입니다.

논리

버튼의 피드백 보이기를 지정합니다.

텍스트

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

색상

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

논리

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

만약 거짓이면 버튼은 아예 그 자리에 없던것 처럼 높이와 너비가 0이 됩니다.

숫자

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

숫자

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

예를 들어 50이면 버튼의 너비를 스크린 너비의 절반으로 지정합니다.

날짜 선택 버튼(DatePicker) 속성 블록

블록

반환형식

색상

숫자

논리

논리

논리

숫자

숫자

텍스트

인스턴트

숫자

텍스트

논리

텍스트

색상

논리

숫자

숫자

컴포넌트

3. 기타 특성

선택할 수 있는 날짜의 범위는 다음과 같습니다:
1900년 01월 01일 ~ 2100년 12월 31일
또한 위 날짜의 범위를 벗어나는 날짜는 블록으로도 지정할 수 없으며, 그 날짜를 벗어나면 범위의 최솟값 혹은 최댓값이 지정되어 보여집니다.

4. 예제

날짜 선택 버튼의 기능을 간단히 테스트 해볼 수 있는 예제 입니다.


댓글

제목과 URL을 복사했습니다