입력버튼과 결정버튼 그리고 음식이미지가 어디에 배치할 것인지 구역을 정해보도록 하겠습니다.
이름을 입력할 NameTextBox와 EnterButton을 한 줄에 배치하기 위해 layout의 Horizontal Arrangement를 사용합니다.
이와 마찬가지로 ResultButton과 NameLabel을 한 줄에 배치하기 위해 또 하나의 Horizontal Arrangement를
추가해 주세요.
즉, Horizontal Arrangement를 두 번 드래그 하여 Horizontal Arrangement1에는
NameTextBox와 NameButton을 Horizontal Arrangement2에는 ResultButton과 NameLabel을 집어넣어 주세요.
우리는 앞선 intro3 에서 layout의 기능과 사용방법에 대해서 자세히 다루었습니다. 이제 layout쯤은 다 잘 하시죠?
layout기능에 대해서 잘 모르시겠다면, "intro3 디자인, 속성다루기"를 참고해 주세요.
이제 blocks를 이용하여 좀더 완벽하게 구역을 나누어 보겠습니다. 먼저 blocks화면으로 이동하여 주세요. 이번 앱의 각각 항목들의 비율은 다음과 같습니다.
화면 좌측의 Blocks 구역에 [Screen1]을 클릭하고 [when Screen1.Initialize] 블록을 드래그하여 빈 공간에 갖다 둡니다.
(처음 화면이 켜질 때 구성요소의 크기 비율을 조정하여 각 구성요수의 크기를 바꿀 수 있습니다.)
FoodImage의 높이(height)를 지정하기 위해 FoodImage의 [set FoodImage.Height to] 블록을 드래그하여 연결합니다.
그 다음, 수치를 입력해 주기 위해 Blocks 구역의 Math를 클릭한 후 ‘분수 블록(/)' 을 [set FoodImage. Height to] 오른쪽에 연결시킵니다. 기준이 되는 화면인 [screen1]을 클릭한 후, [screen1. Height]를 ‘/‘ 블록 왼쪽 칸에 넣습니다.
마지막으로, 수치를 입력 할 수 있는 Math 항목에서 가장 위쪽에 위치한 블록을 ‘/’ 오른쪽 칸에 넣고, 블록의 0을 지운 후 2를 입력하면 FoodImage의 높이 비율이 맞춰지게 됩니다.
같은 방법으로 FoodImage의 넓이(width)와 ResultButton, NameButton의 비율 blocks를 완성시켜주세요. 아래 그림은 완성된 비율구성 blocks 입니다. 그림처럼 되었나요?
이제 실제 보이는 구성요소들(textbox, button)의 이름 설정, 이미지 삽입, 정렬등과 같은 작업을 해보도록 합시다.
이는 각 구성요소의 특징을 설정하는 Properties 영역에서 바꿀 수 있습니다.
다시 designer페이지로 돌아가서 Viewer 또는 Components에서 구성요소를 클릭합니다. 우리는 앞선 intro3 디자인, 속성다루기에서 properties의 기능과 사용방법에 대해서 자세히 다루었기 때문에 간단히 표로 정리하고 디자인 부분은 넘어가겠습니다. 아직 properties기능에 대해서 잘 모르시겠다면, "Intro3 디자인, 속성다루기"편을 참고해 주세요.
각 요소의 목적, 위치, 붙일 이름, 설정사항을 아래 표를 참고하여 설정합시다. 절대 하나하나 설명하기 귀찮아서 그런거... 아닙니다.(뜨끔뜨끔) 다 하실줄 아는거 알아서(찡끗) 표만 제공하겠습니다~
자! 이제 "뭐먹"앱이 완성되었습니다. Build 해서 확인해 보시구요. 혼자서 기능도 추가해 보시고 친구랑 공유도 해보세요.
질문은 아래 댓글을 이용해 주시구요! 질문 말고 건의사항, 또는 수고했다는 칭찬?도 좋아합니다~~
그럼 다음 시간에 만나요~