지금까지 대략적인 디자인이 완료되었습니다. 마지막으로, 구성요소의 크기를 좀 더 구체적으로 지정하여 완벽하게 디자인을 완성해 보겠습니다.
이번 앱의 각각 항목들의 비율은 다음과 같습니다. 비율을 통해 구체적인 사이즈를 지정하는 이유는 동영상을 참고해 주세요.
구체적인 비율을 지정하기 위해 논리를 작성하는 blocks화면으로 이동하여 주세요. 지금까지 해왔던 구성요소의 크기를 바꾸는 일은 스마트폰이 screen1 화면이 시작을 감지한 후 구성 항목들의 비율을 맞추는 방법으로 구현할 수 있습니다. ①Blocks 구역의 screen1을 클릭하면 screen1에 관련된 기능을 수행하는 블록들이 뜨는 것을 확인할 수 있습니다. ②여기서 화면이 시작 될 때 실행하라는 기능 블록인 ‘when screen1. Initialize. do’ 블록을 드래그하여 빈 화면 영역에 둡니다. 이해가 잘 안된다고요?? 그럼 동영상을 참고해 보세요. 두명의 남정네가 어떻게든 알려주려고 최선을 다 하고 있답니다.
먼저, NameInputBtn의 폭(width)을 Screen1(화면) 폭의 1/5로 조정하는 작업을 설정하겠습니다. ①Blocks 구역의 NameInputBtn을 클릭한 후, ②‘set Button1. Width to’ 블록을 'when screen1. Initialize. do’ 블록 안에 드래그해 넣습니다. 그 다음, 1/5를 입력하기 위해 ③Math를 클릭한 후 ④‘ /’ 블록(분수블록)을 ‘set Button1. Width to’ 오른쪽에 연결시킵니다. ⑤기준이 되는 화면인 screen1을 클릭한 후, ⑥‘screen1. Width’를 ‘/ ‘ 블록 왼쪽 칸에 넣습니다. ⑦마지막으로, 수치를 입력 할 수 있는 Math 항목에서 ⑧가장 상단에 위치한 0블록(숫자블록)을 분수 블록 분모에 넣고, ⑨블록의 0을 5로 바꾸어 줍니다.
현재까지 블록의 진행 상황을 한번 살펴보겠습니다. 아래 사진에서 위에 두 블록 덩어리는 2번 튜토리얼에서 한 핵심 기능부분, 빨간 박스가 쳐진 가장 아래 블록 덩어리가 오늘 한 디자인에 관한 부분입니다.
마찬가지 방법으로, NameInputBtn의 높이(height)를 Screen1(화면) 높이(height)의 1/8로 맞추겠습니다. 'set Button1. Height to’ 블록을 ‘when screen1. Initialize. do’ 블록 안에 넣습니다. Math를 클릭한 후 ‘ /’ 블록을 ‘set Button1. Height to’ 오른쪽에 연결시킵니다. 다음으로는 screen1을 클릭한 후 ‘screen1. Width’를 ‘/ ‘ 블록 왼쪽 칸, Math 항목에서 가장 위쪽에 위치한 블록을 ‘/’ 오른쪽 칸에 각각 넣고, 블록의 0을 지운 후 8를 입력합니다.
설정이 끝나면, 다시 designer화면으로 이동하여 [layout]의 [Horizontal Arrangement]를 드래그하여 이미 배치한 두 layer 사이에 배치합니다. 이렇게 빈 layer를 배치하여 이미 배치된 layer들의 거리를 조절할 수 있습니다.
다시 blocks화면으로 이동하여, 새로 배치한 layer의 세로길이를 조절하여 빈 공간의 높이를 화면높이의 1/8로 지정해 봅시다. 방법은 위의 button의 비율을 맞추는 방법과 동일합니다. Blocks 구역의 Horizontal Arrangement2를 클릭한 후, ‘set Horizontal Arrangement2. Height to’ 블록을 ‘when screen1. Initialize. do’ 블록 안에 넣습니다. screen1을 클릭한 후 ‘screen1. Height’를 ‘/ ‘ 블록 왼쪽 칸, Math 항목에서 가장 위쪽에 위치한 블록을 ‘/’ 오른쪽 칸에 각각 넣고, 블록의 0을 지운 후 8을 입력합니다.
자 드디어 완성!!!!
완성 된 App을 Build하여 내 전화기에서 확인해 봅시다! 다운 받아서 친구들한테도 스트레스 풀라고 날려주세요~ 참고로 QR 코드는 2시간만 유효합니다. Build 파일을 컴퓨터로 다운 받아 apk파일을 보내주는 것도 좋은 방법이구요.
여러분 수고하셨습니다! 스트레스 팍팍 푸시고요. 더 좋은 앱으로 업그레이드도 해보세요. 그럼 다음 튜토리얼에서 다시 뵙겠습니다. 안녕히계세요.
