[1분 앱개발] 4. 멀티 스크린

저랑 또 앱개발 달려봅시다. ^^ ㅎㅎㅎ.

지난번에 올린 걸로
사실 기초 쪽은 다 끝났습니다.
(커리큘럼이 끝나서 그동안 올리지 못했었죠.)

이번엔 뭘 할까 고민을 많이 하다가
멀티 스크린으로 결정했습니다.

지금까지는 화면이 1개만 있었는데요.

여러분이 사용하시는 앱 생각해보시면
화면이 여러개가 있잖아요.

우리도 화면 2개짜리를 만들어보자구요.

2개 만들 수 있으면 같은 원리로
여러개도 만들 수 있습니다.

기본 설정은 여기를 참조해주세요.
https://steemit.com/kr/@urobotics/1-1
크롬 설치랑 앱인벤터 들어가는 부분 참조.

그러면 기본셋팅은 됐다고 보고
구글 크롬에서 앱인벤터2 사이트로 들어갑니다.
http://ai2.appinventor.mit.edu/
오른쪽 위에서 한글을 선택해주고요.
그리고 프로젝트를 만들어줍니다. (영어 이름만 가능)

화면을 2개 만드는데는
별게 필요 없는데요.

그래도 버튼은 하나 넣어줍시다.

화면1에서
버튼 클릭하면 => 화면 2로 이동하는 앱을 만들 겁니다.

왼쪽 팔레트에서
사용자 인터페이스 > 버튼.

그리고 약간 오른쪽 위에 보시면
스크린1이라고 적힌 부분이 보이실 거에요.
화면1이죠.

현재는 화면 1 안에 버튼 1개를 넣은 겁니다.

여기서 바로옆에 있는
스크린 추가를 눌러줍니다.

그러면 스크린이 하나 더 추가가 됩니다.

화면은 버튼이 없어진
백지 화면이구요.

이때 다시 스크린을 눌러주면
현재는 스크린2 이고 밑에는 스크린 1이 뜹니다.
스크린이 2개가 된 것이죠.
성공했습니다. ^^ ㅎㅎ

자, 이제 이걸 실제로 동작시켜 봅시다.
다시 스크린을 눌러서
스크린 1을 선택해주세요.

그러면 다시 버튼이 보입니다.
이제 디자이너에서 작업이 끝났어요.
맨 오른쪽, 위에 있는 블록을 클릭해줍니다.

블록화면에 오면
지금 몇 번째 화면인지 확인해봅시다.
버튼을 넣은 것이 첫 번째 화면이니깐
screen1로 설정합시다.
(저는 아까 블록클릭 할 때 스크린2라서 앱 부분에 아무것도 없었죠.)

왼쪽에서 버튼1을 클릭합니다.
그러면 관련 블록이 엄청 뜨는데요.
그 중에서 제일 위에 있는 블록을 클릭해서
큰 화면 위에 놔둡니다.

그러면 이런 화면이 됩니다.

버튼 클릭하면 ~~ 뭔가 실행해라.
이런 뜻이에요.

뭘 실행하면 좋을까요? 화면이동입니다.
그건 왼쪽 공통블록에서 젤 위쪽 제어에 있습니다.
제어를 클릭하세요.

그러면 선택할 수 있는 게 엄청 나옵니다.
스크롤을 내리셔서 제일 끝에서 8번째 블록을 선택하세요.
다른 스크린 열기 .... 입니다.

처음에 있던 클릭하면 실행 블록과 조립해줍니다.
그러면 다른 스크린 열기에서 하나가 남는데요. 이름을 넣는 겁니다.

거기도 블록 하나 넣어줘야 됩니다.
역시 공통블록에서 텍스트를 클릭.

맨위에 빈 것을 넣어줍니다.

블록을 합체시켜요.

빈 공간을 클릭해서 Screen2 라고 써줍니다.

그러면 완성입니다.

작업이 끝났습니다.
그러면 이제 apk 파일을 만들어야죠.

빌드> 앱, 내 컴퓨터에 저장

그러면 다운로드 폴더 안에 들어있어요.
그걸 이메일 등으로 PC => 폰으로 옮겨 줍니다.

자, 그러면 제가 실행한 화면을 보여드릴게요.

앱 설치 중입니다.

첫 번째 화면에는 버튼 1개만 있습니다. 클릭하면

화면 2로 이동해버립니다. ㅋㅋㅋ

저는 처음에 이거 할 때는
진짜 재밌더라구요. ㅎㅎㅎ
화면 2개 처음 만들어봤어서... ㅎㅎㅎ

여러분도 즐거운 경험이셨으면 좋겠습니다.

다음에는 더 재밌는 걸 만들어봐요. ㅋㅋ
감사합니다.