제 5 장 버튼의 연동제어에 의한 그림그리기 2 (디자이너창 작업)

4. 구성요소 작업

앱인벤터의 디자이너창을 사용하여 그림 그리기의 작업을 위한 외관구성을 디자인한다.

1. 우선, 팔레트컬럼의 기본(Basic)드로워를 열고 버튼을 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 Button1을 ColorButton으로 정정하고, 또한 속성(Properties)컬럼에서 분홍색(pink)을 백그라운드컬러(BackgroundColor)로 선택하고, 텍스트(Text)난에 색변경을 입력하고, 폭(Width)을 75픽셀로 설정한다.

2. 마찬가지로, 버튼을 다시 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서Button2를 ReturnButton으로 정정하고 또한 속성(Properties)컬럼에서 텍스트(Text)난에 변경전 색을 입력한다.

3. 또한, 팔레트컬럼에서 스크린배열(Screen Arrangement)드로워를 열고 수평배열(HorizontalArrangement)을 선택하여 뷰어로 드래그하고, 상기 두 버튼을 수평배열구조의 내부에 순차적으로 드래그한다.   그 결과, 두 버튼은 수평으로 정렬된다.

4. 다음에, 팔레트컬럼에서 기본(Basic)드로워를 다시 열고, 캔버스를 선택하여 뷰어로 드래그하고, 구성요소(Components)컬럼에서 캔버스(Canvas)를 DrawingCanvas로 정정하고 또한 폭을Fill parent(부모 폭의 전체길이에 해당됨)로 선택하고 높이를 300픽셀로 설정한다.

5. 이번에는, 상기 두개의 버튼을 배열하는 것과 마찬가지 방식으로 3개의 버튼을 캔버스의 아래에 수평배열구조의 내부에 순차적으로 정렬시킨다.   다만, 구성요소(Components)컬럼에서3개의 버튼을 SpotButton, PartEraser, WholeEraser로 정정하고 또한 속성(Properties)컬럼에서 텍스트(Text)난에 작은 점, 부분 지우기, 전체 지우기 등을 순차적으로 기재한다.

6. 지금까지 설명한 앱인벤터 디자이너창의 스크린샷은 다음과 같다.

참고 화면: 상기 디자이너창의 디자인과 이후 설명하는 블록에디터창의 블록조합에 대응하는 넥서스S의 그림그리기 화면은 다음과 같다.