앱인벤터 강좌 - 스크린 이동하기

입인벤터 강좌 - 스크린이동

프로그램을 작성하다가 보면 하나의 스크린에만 작업을 하는 것이 아니라 여러 스크린을 이용하여 결과 값을 전달하거나 화면 전환이 필요할 때가 있는데요 이번에는 앱인벤터에서 스크린 이동하는 방법에 대해 알아보도록 하겠습니다.

앱 인벤터 스크린 이동하기

화면 디자인하기

1. 사용자 인터페이스에서 [버튼]을 클릭하여 호면 처럼 이동을 시켜 줍니다.

2. 옮겨 놓은 버튼을 클릭한 다음 오른쪽 하단에 있는 속성 중 [텍스트]에 있는 내용을 "스크린 2로 이동"변경해 줍니다.

3. 이번에는 스크린을 추가 시켜 보겠습니다. 메뉴에서 [스크린 추가] 버튼을 클릭합니다. 메세지 창이 나타는데 스크린 이름은 원하는 이름으로 입력하시면 됩니다. 그리고 확인 버튼을 눌러줍니다.

4. 아래 그림 처럼 ▼눌러서 두번째 Screen2를으로 이동을 합니다.

5. 첫번째 스크린에서 작업한 것과 같이 두번째 스크린에서도 버튼을 추가합니다.

6. 버튼 안에 들어 있는 텍스트를 속성에 들어가서 "스크린 1로 이동"으로 변경해 줍니다.

간단하게 스크린 두장을 만들어 보겠습니다. 이번에는 각 스크린을 이동하는 코드를 작성해 보도록하겠습니다.

코드 작성하기

1. Scree1 에서 버튼을 클릭하고 2번 블럭을 가져옵니다.

2. 공통블럭에서 [제어]를 클릭하고 [다른 스크린 열기 스크린 이름] 블럭을 가져 옵니다.

3. 이번에는 텍스트 블럭에서  맨 위에 있는 텍스트 박스를 가지고 옵니다.

4. 비어 있는 텍스트 박스에 이동할 스크린 이름을 입력하는데요 저는 두번째 스크린 이름을 Screen2 로 하였기 때문에 텍스트 블럭안에 Screen2 로 이름을 넣었습니다.

5. 이번에는 두번째 스크린에 코드 작업을 해보겠습니다. 메뉴에 있는 스크린 버튼을 클릭하여 두번째 스크린 화면으로 이동을 합니다.

6. 두번째 스크린으로 이동하고 첫번째 스크린에서 작업했던 방법으로 작업을 해주는데요. 마지막 텍스트 블럭 안에는 첫번째 스크린 이름을 입력하면 됩니다. 첫번째 스크린 이름이 Scree1 이였으니 텍스트 박스에 그대로 입력해 주면 됩니다.

지금까지 버튼을 클릭하면 다음 화면으로 넘어가는 앱인벤터 스크린 이동방법에 대해서 알아보았습니다.

하나의 스크린에서 모든 작업을 할 수 없기 때문에 거의 모든 앱에 여러 스크린을 활용을 합니다. 그래서 스크린 이동 방법은 꼭 알고 계시는게 좋습니다.