텍스트 에디터를 통한 UI 레이아웃 수정

애플리케이션의 메인 뷰에 다른 요소들을 추가하고 수작업으로 UI 레이아웃을 어떻게 수정하는지 보자.

1. 텍스트 보기로 전환

파일 편집기의 하단에 있는 Text 탭을 클릭한다. IntelliJ IDEA는 현재 선택된 레이아웃 파일의 XML 소스 코드를 보여준다.

2. 수평선 추가하기

이 튜토리얼의 목적을 위해 구분자와 새로운 TextView를 삽입하는 마크업을 추가하자. 수평선을 갖는 가장 쉬운 방법은 다름 코드를 추가하는 것이다.

<View android:layout_width="fill_parent"      android:layout_height="5dp"      android:layout_marginTop="60dp"      android:background="#00ff00" />

구분자는 5 단위를 두깨이고 녹색 배경을 갖고 있으며 가장 가까운 요소의 아래로부터 60 단위만큼 위치해있다.

3. TextView 추가하기

또 다른 TextView를 추가하기 위해서 아래의 마크업을 입력하라.

<TextView android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:layout_marginTop="60dp"          android:text="Warning! Don't touch the droid..."          android:id="@+id/message"          android:layout_gravity="center_horizontal" />

이 요소는 구분자의 아래로 60  단위에 위치한다; 수평 중앙에 위치하고 기본 텍스트 색상을 사용한다. 이 요소와 관련있는 문자열은 명백히 지정되어 있다. 구분자와는 다르게, TextView는 또한 이상한 문자열로 설정된 id 속성을 가지고 있다. 이 문법은 / 기호 다음에 ID 리소스로 다뤄지는 문자열을 가지고 있고, 뷰 요소를 참조하기 위해 사용될 것이다. 안드로이드 런타임은 적절하게 정보를 사용하고 이것은 TextView와 상호 작용하는 Java 코드를 작성할 수 있게 해준다.

4. 프로젝트 빌드

이 단계에서 동일한 프로젝트를 컴파일한다면 아래 그림과 같은 결과를 얻을 것이다.