[안드로이드 트레이닝]003_단순 사용자 인터페이스 빌딩

안드로이드 앱의 그래픽 사용자 인터페이스는 뷰와 뷰그룹 객체의 골격을 사용하여 빌드된다. 뷰 객체는 보통 버튼이나 텍스트필드 같은 UI 위젯이고 뷰그룹 객체는 그리드나 세로 리스트 같은 자식 뷰가 어떻게 레이아웃 되는지 정의를 포함하는 보이지 않는 뷰이다.

안드로이는 뷰나 뷰그룹의 보조클래스에 상응하는 XML 용어를 제공하므로, UI 요소의 구조를 사용하여 XML에서 당신의 UI를 정의할 수 있다.

뷰와 뷰그룹

선형 배치(Linear Layout) 생성하기
res/layout/ 디렉토리의 activity_main.xml 파일을 열자.

* 이클립스에서, 배치 파일을 열때 그래픽 배치 편집기를 첫째로 본다. 이것은 당신이 WYSIWYG 툴을 이용하여 배치를 빌드하는 것을 도와주는 편집기이다. 이번에는 XML을 이용하여 직접적으로 일을 할 것이다, 그러므로 화면 바닥의 activity_main.xml 탭을 클릭하여 XML 편집기를 연다.

이 프로젝트가 생성되었을 때 당신이 선택한 BlankActivity 템플릿은 RelativeLayout 루트 뷰와 TextView 자식 뷰로 된 activity_main.xml 파일을 포함한다.

첫째로, <TextView> 요소를 삭제하고 <RelativeLayout> 요소를 <LinearLayout>으로 변경한다. 그 뒤 android:orientation 속성을 추가하고 "horizontal"로 설정한다. 결과는 다음과 같다.

선형 배치는 android:orientation 속성에 의해 구성된 세로나 가로의 자식 뷰로 배치 된 뷰 그룹(Viewgroup의 보조클래스)이다. 선형 배치의 각 자식은 XML에 나타난 주문으로 화면에 나타난다.

다른 두 속성 android:layout_width와 android:layout_height는 그들 크기 특성을 주문의 모든 뷰를 위해 요구된다.

선형 배치는 배치에서 root뷰이기 때문에, 가로와 세로를 "match_parent"로 설정에 의해 유용한 앱의 전체 화면 영역을 채운다. 이 값은 뷰가 부모 뷰의 가로와 세로와 가로와 세로가 일치되도록 확장도록 선언한다.

레이아웃 속성에 관해 더 많은 정보는 레이아웃 가이드를 보라.


텍스트 필드 추가하기
사용자가 수정가능한 텍스트 필드 생성은 <LinearLayout>안에 <EditText> 요소를 추가하는 것이다.

모든 뷰 객체처럼, EditText 객체의 속성 특수화에 믿을 수 있는 XML 속성을 정의해야 한다. 다음은 <LinearLayout> 요소 안에 어떻게 정의하는지이다.

이 속성들에 대하여

• android:id
• 이것은 읽기나 객체 조작 같은 앱 코드에서 객체 참조에 사용 가능한 뷰를 위한 유일한 ID를 제공한다.
• 이 표시(@)는 XML의 어떤 자원 객체를 참조할 때 요구된다. 그것은 슬래쉬로 자원 종류(이 경우 id)와 자원 이름(edit_message)을 따른다.
• 자원 종류 앞의 더하기 표시(+)는 처음동안의 자원 ID를 정의 할때만 요구된다. 당신이 앱을 컴파일 할 때, SDK 툴은 당신의 프로젝트의 EditText 요소 참조에 gen/R.java 파일의 새로운 자원 ID 생성에 ID를 사용한다. 한번의 자원 ID는 한번의 방법으로 정의된다. 그 ID에 다른 참조는 더하기 표시를 필요로하지 않는다. 더하기 표시를 사용하는 것은 오직 새로운 자원 ID를 정의할 때만 이고 문자열이나 배치와 같은 고정된 자원을 위해서는 필요하지 않다.
• android:layout_width와 android:layout_height
• 뷰의 컨텐츠 고정에 필요한만큼 크게 뷰를 설정하는 것은 가로와 세로의 크기를 설정하는 대신에 "wrap_content" 값을 설정한다.
• "match_parent"를 사용하는 대신이라면, EditText 요소는 화면을 가득 채율 것이다. 왜냐하면 부모의 LinearLayout의 크기에 맞추기 때문이다.
• android:hint
• 이것은 텍스트 필드가 비어 있을 때 기본으로 보여주는 문자열이다. 하드코딩된 문자열 값을 사용하는 대신에 구분된 파일의 문자열 자원에 정의된 "@string/edit_message" 값을 참조한다. 왜냐하면 이것은 고정된 자원을 참조하고, 더하기 표시를 필요로 하지 않는다. 그러나, 문자열 자원에 아직 정의되지 않았으면 당신은 처음에 컴파일러 오류를 볼 것이다. 이것을 고치려면 다음을 보자.

문자열 자원 추가하기

사용자 인터페이스에 텍스트 추가하기를 필요로 할때, 당신은 항상 자원의 각각의 문자열을 정의해야 한다. 문자열 자원은 당신이 한곳에서 쉽게 만들고 찾고 갱신하는 모든 UI 텍스트를 관리하는 것을 허용한다.

기본적으로, 당신의 안드로이드 프로젝트는 res/values/strings.xml 문자열 자원 파일을 포함한다. "edit_message"로 명명된 새로은 문자열추가와 "Enter a message" 값 설정

버튼 추가하기
이제 <EditText> 요소 바로 뒤에 <Button>을 추가하자

이 버튼은 android:id 속성을 필요로 하지 않는다. 왜냐하면 액티비티 코드로부터 참조되지 않을 것이기 때문이다.


화면 가로로 가득 채우는 입력상자 만들기

앱 실행하기

실행 구성 하기

툴바의 [Run] 버튼 오른쪽의 작은 삼각형을 눌러 뜨는 팝업창에서 [Run Configurations..]를 선택한다.

뜨는 Run Configurations 창에서 좌측의 [Android Application] 항목을 더블클릭한다.

새로운 항목이 추가된 것을 확인할 수 있다. 우측의 [Browse..] 버튼을 클릭하여 실행하고자 하는 프로젝트를 선택하는 화면을 띄운다.

프로젝트 선택 화면에서 실행하고자 하는 프로젝트를 선택하고 [OK] 버튼을 누른다.

상단의 실행 구성의 이름을 원하는 이름으로 변경하고 [Apply] 버튼을 누르면 적용이 된다.

[Target] 탭을 클릭하여 실행되는 타겟을 설정한다.

실행을 하면 다음과 같이 에뮬레이터에서 실행되는 화면을 볼 수 있다.