[안드로이드] 마우스만으로 계산기 사용자 인터페이스 만들기

Intro

안드로이드 스튜디오는 안드로이드 앱 개발을 위한 공식 통합 개발 환경(IDE)입니다. 안드로이드의 특징에는 재사용이 가능한 애플리케이션 프레임워크, 최적화된 달빅 가상 머신, WebKit 기반의 내장된 웹브라우저, 그래픽과 SQLite 데이터 베이스 지원이 있습니다.

계산기 인터페이스를 만들기 위해 프로젝트를 생성한 후, 마우스만으로 만들기 위해 activity_main.xml의 Design탭에서 계산기 인터페이스를 만들었습니다. XML은 안드로이드에서 아주 많이 사용되는데, SGML의 부분 집합으로 웹 상에서 구조화된 텍스트 형식의 문서를 전송하고 수신하며 처리가 가능하도록 만든 마크업 언어 입니다. Design 탭에서는 아래 사진속 노란색 박스 안의 요소들을 끌어다가 화면에 놓으면 레이아웃을 구성할 수 있습니다. 아래 사진에는 나와있지 않지만 화면에 놓여진 컴포넌트들을 클릭하면 오른쪽에 속성 편집 탭이 나옵니다. 속성을 편집하여 더욱 깔끔한 인터페이스를 만들 수 있습니다.

Layout Class

UI 구성 시 자주 사용되는 Layout 클래스에는 LinearLayout, RelativeLayout, FrameLayout, TableLayout, ListView와 GridView가 있습니다.

저는 계산기 인터페이스를 만들기 위해 LinearLayout과 TableLayout을 사용하였습니다. LinearLayout은 여러 View 위젯들을 가로 또는 세로 방향으로 나열할 때 사용하는 Layout클래스 입니다. LinearLayout의 자식으로 배치되는 위젯들을 가로로 한줄 또는 세로로 한줄 방향으로만 배치가 가능합니다.

저는 새로로 배치되는 LinearLayout(vertical)을 사용하에 맨 윗칸에는 editText, 가운데 칸에는 숫자 버튼이 들어갈 수 있도록 TableLayout을 넣어 그 속에 버튼을 넣어 주었습니다. 마지막 세번째 칸에는 OK 버튼을 넣어주었습니다.

TableLayout은 자식 View 위젯들을 테이블(행,열)로 나누어 표시하는 Layout 클래스입니다. TableLayout에 버튼 위젯들을 3*3행렬 형태로 배치하기위해 TableRow 3개에 각각 3개의 버튼들을 넣어주었습니다. 마지막 행에는 0과 Clear버튼 두개만 넣어주었습니다.

결과