본문 바로가기

앱만들기(앱인벤터2)

[앱 인벤터2] 기본기능 익히기 6-화면 생성 및 화면 이동

[앱 인벤터2] 기본기능 익히기 6-화면 생성 및 화면 이동

 

앱을 실행해 보면 여러 개의 화면을 가진 앱이 많습니다.


이번 강좌에서는 화면을 여러 개 만들고 그리고 어떤 것(버튼 또는 메뉴)을 선택했을 때


화면 전환하는 기능을 넣어보도록 하겠습니다.



[실행화면]


[학습내용]


(1) ‘Screen2’ 화면 만들기

(2) ‘화면이동버튼을 선택하면 ‘Screen2’ 화면으로 이동하기

 

[기본 개념 이해하기]


스크린 생성 버튼을 이용 화면을 생성하는 것이 가능합니다.

그리고 다음과 같은 블록 조각을 이용하여 원하는 화면으로 이동이 가능합니다.


 

번호

영역

블록이름

설명

공통블록-제어

다른 스크린 열기 스크린 이름

원하는 스크린으로 이동이 기능을 가지고 있습니다.

공통블록-텍스트

“ “

원하는 스크린 이름을 입력이 가능합니다.

 

 

[따라해 보기]

 

[준비작업]

. http://ai2.appinventor.mit.edu/ 접속하기

. 언어를 한국어로 설정한다.

. '새 프로젝트 시작' 선택 후, 프로젝트 이름 원하는 이름으로 작성하기. 영어로 작성해야 합니다.

 

[디자이너편집 화면작업]

. 추가할 요소

번호

구성요소

위치

사용용도 및 속성값

버튼

화면 왼쪽 영역

사용자 인터페이스

버튼을 선택하면 화면을 이동하도록 합니다.

 

. 스크린 추가

스크린 추가 버튼을 선택합니다.

② 추가할 화면의 이름을 입력합니다.

 

[블록편집 화면작업]

 

화면 이동 기능 추가


처음 시작 화면에서 오른쪽 상단의 블록버튼을 선택하면, 블록 편집 화면으로 이동합니다.


이후 아래와 같이 블록을 뷰어 화면으로 가져옵니다.

 

 

 

아래와 같이 블록을 맞춥니다.


 


간단히 블록을 설명하면 버튼1을 선택했을 때, Screen2의 화면으로 이동하는 기능을 갖습니다.

 

장치에 연결 , 앱을 확인하기

 

앱을 실행시키고 화면이동 버튼을 선택하면 Screen2 화면으로 이동합니다.

 

오늘 하루도 수고 하셨습니다. 화이팅입니다!!! ^^

 

하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 이는 그를 믿는 자마다 멸망하지 않고 영생을 얻게 하려 하심이라(3:16)