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

Intro

사용자가 애플리케이션을 쉽게 사용하려면 그래픽 기반의 사용자 인터페이스를 반드시 제공하여야 합니다. 안드로이드에는 버튼, 리스트, 스크롤 바, 체크 박스, 메뉴, 대화 상자 등이 포함되어 있어 이들을 이용하여 사용자 인터페이스를 제작할 수 있습니다.

설명

사용자 인터페이스를 작성하는 방법에는 두 가지가 있습니다. 첫 번째는 XML로 사용자 인터페이스를 작성하는 것입니다. XML을 이용해서 사용자 인터페이스를 선언합니다. XML 요소들을 이용하여 화면을 설계하고 속성을 설정합니다. 두번째는 코드로 사용자 인터페이스를 작성하는 방법입니다. 코드 안에서 뷰와 뷰그룹 객체들을 생성하고 속성들을 설정하는 것 입니다. 저는 이번 과제에서 비주얼 도구를 이용하여 초기 화면을 작성한 후, XML 파일을 수정하여 계산기 인터페이스를 작성하였습니다.

모든 뷰와 레이아웃의 width와 height의 속성 값은 match_parent로 지정하여 가로 세로 방향으로 부모의 크기를 꽉 채울 수 있도록 하였습니다. XML 속성 앞에 layout이 붙으면 뷰그룹 객체가 배치를 위하여 사용하는 속성이 됩니다. 픽셀 단위로 지정할 수도 있지만 대부분 match_parent(fill_parent)나 wrap_content와 값을 줍니다. wrap_content는 뷰가 나타내는 내용물의 크기에 맞추라는 의미입니다.

배경 색을 변경하기 위해서 background 속성을 검정색으로 지정하였고 버튼들의 색은 기본 값에 없어 색상 값을 추가하여 변경 하였습니다.

LinearLayout은 자식들을 수직이나 수평으로 배치할 수 있도록 해주는 레이아웃 입니다. 저는 horizontal(수평)과 vertical(수직) 두가지 속성을 모두 사용하였습니다. 수직 레이아웃에는 상단에서부터 차례대로 에이트 텍스트, 수평 레이아웃, 테이블 레이아웃을 넣어주었습니다.

중간부분에 위치한 수평 레이아웃에는 비활성 버튼(눌리지않도록 설정)과 DELETE 버튼 두개를 배치시켜주었습니다.

테이블 레이아웃에는 계산기 인터페이스에 가장 많이 사용된 뷰인 버튼들이 들어가 있습니다. 버튼은 푸시버튼 위젯을 나타내며 사용자가 클릭할 수 있는 가장 기본적인 위젯입니다. Button 클래스도 TextView 클래스를 상속받아서 작성되었기 때문에 TextView의 모든 속성을 사용할 수 있습니다. 각 TableRow에 4개의 버튼을 배치시켰습니다.

선형 레이아웃의 자식 뷰에는 가중치를 부여할 수 있으며 layout_weight로 정수로 표현됩니다. 가중치가 높으면 자식 뷰가 부모 뷰 안의 비어있는 공간으로 확장할 수 있습니다. 가장 상단에 위치한 EditText의 가중치는 0.85, 중간의 수평 레이아웃은 1, 테이블 레이아웃은 0.4로 설정하였습니다. 수평 레이아웃 속의 버튼들은 각각 0.4와 1로 지정하였습니다. 모든 TableRow와 Button의 가중치는 1로 설정하였습니다. 모든 버튼의 마진 값은 3dp로 4방향 모두 통일하여 깔끔하고 정돈되 느낌을 주었습니다. 마진(margin)은 자식 뷰 주위의 여백을 의미합니다. 이들 속성은 자식 뷰의 속성으로 정의됩니다. 4방향의 여백을 같은 값으로 설정하기 위해 layout_margin에 값을 3dp로 대입하였습니다.

결과