이제 배치한 Textbox의 속성을 바꾸는 것을 시작으로 배치한 구성요소의 특성(properties)를 바꿔보면서 좀 더 아름답게 앱을 꾸며봅시다!
이제 Namebox(Textbox)의 설정을 바꿔보겠습니다. 이는 각 구성요소의 특징(배경색, 이미지, text 등)을 설정하는 Properties 영역에서 바꿀 수 있습니다. ① Viewer 또는 Components 영역에서 [Namebox]를 클릭하여 [Properties]영역을 살펴 봅시다.
[background Color] 설정: background color에서는 배경 색상을 설정할 수 있습니다. 기능을 좀 더 쉽게 이해하기 위해 ② background color를 파란색으로 바꾸어 textbox가 어떻게 변하는지 살펴 보겠습니다.
이제 background의 기능이 무엇인지 아시겠죠? 다시 ① background color를 클릭하여 “None”으로 설정합니다. None으로 설정하지 않으면, 후에 설정할 screen의 배경화면이 Textbox의 배경색에 가려 안보입니다.
[Hint] 설정: Hint는 textbox에 무엇을 입력할지 알려주는 기능입니다. ②[Hint] 항목에 쓰여있는 Hint for TextBox1을 지우고 “이름을 입력하시오” 라고 입력하세요. 이 설정은 바꾸어도 Viewr영역에서 적용되지 않아요. 1강에서 사용해보았던 실시간 미리보기를 사용하여 확인해 보세요.
[width]설정: ③ [width] 항목은 fill parent로 설정합니다. Fill parent를 직역하면 부모를 채운다로, 자신이 속해있는 상위항목(이 경우는 HorizontalArrangement1을 의미합니다.)을 꽉 채우게 되는 겁니다. 따라서 texbox의 width를 fill parent로 설정하면 textbox가 속해있는 horizontal Arrangemnet1을 꽉 채우게 됩니다.
설정을 바꾸어 보았는데 그다지 표시가 나질 않네요.ㅜㅜ 하지만 다 필요한 일들인 것을....
자 이제부터는 뭔가 팍팍 바뀌기 시작합니다. 예를 들어 버튼에 이미지가 삽입되고 등등. 어렵지 않습니다. 지금까지 잘 따라 하셨다면 앞으로도 문제 없습니다. 고고싱!
Button(NameInputBtn, TouchBtn),과 Label(NameLabel)의 설정은 위의 textbox 설정과 동일한 방법으로 이루어집니다.
각각의 설정은 다음과 같습니다.
① Components 구역에서 NameInputBtn을 클릭하여 NameInputBtn의 설정을 바꿔봅시다.
우선 입력 버튼을 좀 더 세련된 이미지로 바꾸어 봅시다. ②[Image] -> [upload file] -> [파일선택] -> “input.png“ -> [OK], 바뀐 입력버튼을 보면 입력버튼 위에 Text for Button1이라는 글씨가 쓰여져 있습니다. 이를 제거하기 위해 ③ [Text]항목에 쓰여있는 Text for Button1을 지웁니다. 마지막으로 ④ [background color] -> “None”으로 설정합니다.
같은 방법으로 NameLabel의 설정을 바꿔보도록 합시다.
#NameLabel
[background color] -> “None”,
[Text]항목에 쓰여있는 Text for Label1을 지웁니다. 갑자기 Label이 없어진 것 처럼 보일 수 있습니다.
이는 Label이 사라진 것이 아니라 Label에 아무것도 안 들어있기 때문에 자동으로 사이즈가 작아져 안 보이는 것입니다. 없어진 것이 아니니 걱정 마세요.( 자세히 보면 TouchBtn 위에 아주 작게 존재하고 있어요.)
이제 TouchBtn의 설정을 바꿉시다. 지금까지 하던 것과 같이 Components 구역에서 TouchBtn을 클릭하고 Properties 영역에서 해당 항목을 아래와 같이 바꿉니다.
# TouchBtn
[background color] -> “None”,
[background image] -> [upload file] -> [파일선택] -> “punch“ -> [OK],
[Text]항목에 쓰여있는 Text for Button2을 지웁니다.
이제 구성요소의 설정은 다 바꾸었습니다. 처음과 비교해서 상당히 많은 부분이 바뀌었어요. 뭔가 점점 최종 결과물에 다가가고 있는 느낌이 들지 않습니까???. 이제 Screen(바탕화면)에 관련된 설정 사항을 바꾸어 봅시다.
Screen 설정도 앞의 항목들의 설정과 동일한 방법으로 이루어집니다.
Components 구역의 최상단에 위치한 Screen1을 클릭한 후 아래와 같이 설정을 바꿔줍니다.
[Background color] -> “None”
[background image] -> [upload file] -> [파일선택] -> “background“ -> [OK]
[icon] -> [upload file] -> [파일선택] -> “icon“ -> [OK]
(여기서 icon은 스마트폰에서 표시되는 앱의 icon 입니다.)
[Scrollable] -> 체크해제 (Scrollable 체크 해제에 관한 내용은 동영상을 참고하세요.)
Scrollable을 해제하여도 Connect로 연결한 스마트폰 화면에서는 잘 반영이 안 될 수도 있습니다. 그러나 실제 앱을 실행하였을 때는 문제가 없으니 걱정하지 않으셔도 됩니다.
앞에서 Layout에 관해 뒤에서 다시 한다고 했었는데… 기억나죠?
이제 건드려 봅시다.
우선 Layout을 화면에 Size크기로 조정해서 화면을 꽉꽉 채우고, 정렬도 할 수 있다면 좀 더 보기 좋을 것 같아요.
그렇죠??? 제발 그렇다고...해....주...세...요.ㅜㅜ
그나저나 한번 해 봅시다!
①Horizontal Arrangement1을 클릭하여 ②width를 Fill Parent로 설정하여 화면 폭을 꽉 채웁니다. TouchBtn을 화면 폭의 가운데에 배치하기 위해 먼저 ③TouchBtn을 클릭하고 ④width를 Fill parent로 설정한 후, ⑤AlignHorizontal(가로정렬) 설정을 center로 바꾸어 줍니다.
이제 어느 정도 볼 만한 앱이 만들어졌습니다. 하지만 우리는 좀 더 나아가 봅시다. 여기서 만족할 수 없죠! 좀 더 디테일한 설정을 통해 좀 더 보기 좋게 해봅시다. 느낌 아니까!! 고고!