이번시간에는 알림 요소에 대해 알아보도록 하겠습니다.
모르는 분들을 위해 그림으로 설명 드리면 다음과 같습니다.
아래와 같은 알림 메시지를 띄울 수가 있어요.
왼쪽이 실제 화면이고 각각의 버튼을 눌렀을 때,
보여지는 알림 메세지입니다.
학습내용
(1) 앱에서 알림 메세지를 표시하는 알림 요소에 대해 알아본다.
학습목표
(가) 앱에서 알림 메시지를 보여주기를 위한 블럭을 작성할 수 있다.
자 그럼 한번 배워볼까요?
기본 다지기
알림 요소란?
알림 요소는 우리가 앱을 사용할 때, 무언가의 간단한 메세지를 스마트 폰의 화면에
보여주고 싶을 때, 사용됩니다.
위의 그림과 같이 경고 메세지를 보여주거나 또는 버튼을 표시하여
질문을 선택할 수 있도록 하는 알림을 보여줍니다.
그리고 그 외 기능으로는 안드로이드 로그(앱 사용자에게 보이지는 않아요)를 남기는 기능을 하죠.
좀 더 자세한 내용을 원하시는 분은 영문 페이지를 참고해 주세요.
http://ai2.appinventor.mit.edu/reference/components/userinterface.html#Notifier
이번 시간에 배울 블록에 대해 알아볼까요?
[알림 요소 블록]
영역 |
블록이름 |
설명 |
Screen1-알림1 |
호출 알림1.경고창 나타내기 |
호출 알림1.경고창 나타내기 알림 홈에 연결된 내용을 알림 메시지로 보여줍니다. |
Screen1-알림1 | 호출 알림1.선택 대화창 나타내기 | 호출 알림1.선택 대화창 나타내기 이 알림 창은 버튼이 있는 알림 메시지를 보여줍니다. |
Screen1-알림1 | 호출 알림1.메시지창 나타내기 | 호출 알림1.메시지창 나타내기 버튼이 하나 있는 알림 메시지를 보여줍니다. |
Screen1-알림1 | 호출 알림1.텍스트 대화창 나타내기 | 호출 알림1.텍스트 대화창 나타내기 텍스트를 입력할 수 있는 창을 보여줍니다. |
호출 알림1.경고창 나타내기
호출 알림1.선택 대화창 나타내기
호출 알림1.메시지창 나타내기
호출 알림1.텍스트 대화창 나타내기
준비작업
가. http://ai2.appinventor.mit.edu/ 접속하기
나. 언어를 한국어로 설정한다.
다. '새 프로젝트 시작' 선택 후, 프로젝트 이름 원하는 이름으로 작성하기. 영어로 작성해야 합니다.
실습하기
실습 단계
가. 디자이너 화면에 구성요소를 추가합니다.
나. 블록 편집 화면에서 블록을 맞춥니다.
다. 스마트폰으로 확인해 보기
디자이너 화면
1번에 해당되는 것을 마우스 왼쪽 버튼으로 선택하고, 뷰어로 드래그하면 뷰어에 해당 구성요소가 위치됩니다.
[구성요소 속성 및 설명]
번호 |
요소 |
속성 변경 |
설명 |
① |
버튼1 |
텍스트 : ‘경고창’ |
알림의 경고창을 보여줍니다. |
① |
버튼2 |
텍스트 : ‘선택 대화창’ |
알림의 선택 대화창을 보여줍니다. |
① |
버튼3 |
텍스트 : ‘메세지창’ |
알림의 메시지창을 보여줍니다. |
① |
버튼4 |
텍스트 : ‘텍스트 대화창’ |
알림의 텍스트 대화창을 보여줍니다. |
② |
알림1 |
|
알림 기능을 사용할 수 있도록 하는 구성요소 |
블록 편집 화면 – 뷰어 |
빨간색의 메세지 부분은 공통 블록의 텍스트에서 가져오면 되고,
'언제 경고.클릭', '언제 메세지.클릭', '언제 텍스트대화.클릭', '언제 선택대화.클릭' 등의 블록은 각각의 버튼에서 가져오면 됩니다.
그리고 안에 '호출 알림1.oooo 나타내기' 블록은 알림1 요소에서 가져옵니다.
알림에서 가져온 블록의 공통된 부분을 설명하면 다음과 같습니다.
알림, 메시지 : 알림 창에서 보여지는 메시지를 지정할 수 있습니다.
제목 : 알림창의 제목을 나타냅니다.
버튼 텍스트 [1,2] : 버튼을 생성되고 해당 버튼의 텍스트 내용을 지정합니다.
취소 가능 여부 : 취소 버튼을 표시할지 말지를 지정합니다.
각각의 버튼을 클릭하면 다음과 같이 메세지가 보이게 됩니다.
번호 |
구분 |
발생시기 |
설명 |
① |
버튼1 |
경고 버튼 클릭 시 |
|
② |
버튼2 |
선택 대화 버튼 클릭 시, |
선택 대화 버튼 창을 보여줍니다. |
③ | 버튼3 | 메시지 버튼 클릭 시, | 메시지 버튼 창을 보여줍니다. |
④ | 버튼4 | 텍스트대화 버튼 클릭 시, | 텍스트 대화 버튼 창을 보여줍니다. 빈칸에 텍스트를 입력을 할 수 있어요. |
장치에 연결 후, 앱을 확인하기 |
스마트폰으로 연결하여 결과를 확인해 봅니다.
결과 화면
마지막으로 간단한 퀴즈를 내 볼까요?
(1) 이번 시간에 배운 알림 요소를 이용하여 알림 창을 띄울 수 있는 종류는 몇가지일까요? ~~~^^
(2) 취소버튼이 보이게 안보이게 하려면 '알림1.선택 대화창 나타내기' 에 취소가능여부에 어떤 값을 넣으면 될까요?
(가) 참 (나) 거짓
오늘 하루도 수고하셨습니다. 열공하세요. 화이팅! ^^
하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(요3:16)
'앱만들기(앱인벤터2)' 카테고리의 다른 글
[앱 인벤터2] 기본 1 - 앱 설치파일 만들기(apk파일) (0) | 2016.06.17 |
---|---|
[앱 인벤터2] ‘종료하시겠어요?’ 알림창 만들기 (알림-Notifier) (4) | 2016.06.16 |
[앱 인벤터2] 기본 기능 익히기 9 (tinyDB) – DB에 정보 저장하기 (5) | 2016.06.08 |
[앱 인벤터2] 기본기능 익히기 8-(목록 뷰) 검색 기능 추가 (0) | 2016.06.02 |
[앱 인벤터2] 기본기능 익히기 7- 여러 개의 화면에서 값을 전달하기 (0) | 2016.06.01 |