디자이너를 통한 UI 레이아웃 수정

이 단계에서, HelloDroid 샘플 애플리케이션의 사용자 인터페이스는 배우 단순한 레이아웃에 기초하고 있다. UI 레이아웃은 res/layout 폴더에 위치한 main.xml 파일에 정의되어있다. 기본적으로, IntelliJ IDEA는 레이아웃 파일의 그래픽 뷰를 제공하지만 XML을 수동으로 입력하여 레이아웃을 수정하는 텍스트 기반 뷰로 전환할 수 있게 해주고 있다.

1. 레이아웃 파일 열기

Project 뷰에서 res/layout 폴더 아래에 있는 main.xml 파일을 선택한다.

자동으로 생성된 사용자 인터페이스를 수정해보자.

2. 기존의 텍스트 요소 삭제

첫 번째처럼, 뷰 안의 텍스트 레이블을 선택하기 위해 클릭하고 마우스 우측 버튼을 클릭해서 컨텍스트 메뉴를 연다. 컨텍스트 메뉴에서 사용자 인터페이스를 제거하기 위해 Delete를 클릭한다.

3. ImageView 위젯 추가

우측의 팔렛트에서 ImageView 컴포넌트를 선택하고 위젯을 추가하기 원하는 폼 위를 클릭하면 된다. 드래그-앤-드롭이 더 편하다면 위젯을 main.xml 뷰에 드래그-앤-드롭할 수도 있다.

이 부분에서, 뷰는 이미지를 위한 자리 표시를 하고 있는데 이것과 관련된 실제 이미지는 아직 없다. 프로젝트에 이미지를 추가하려면 res 폴더 아래의 drawable 폴더를 우선 만들 필요가 있다.

4. drawable 폴더 생성

res 노드에서 마우스 우측 버튼을 클릭하고 New|Android resource directory를 클릭한다. 드롭-다운 리스트의 리소스 타입에서 drawable를 선택하고 적합한 qualifiers를 설정한다. 화면의 폭, UI 모드, density, 로케일 등의 다른 집합을 사용하길 원한다면 small 같은 qualifiers를 사용한다.만약 단일 집합의 리소스를 사용하고 있다면 qualifier는 필요없고 만들어진 폴더의 이름은 단지 drawable가 될 것이다.

주: 간단히 IntelliJ IDEA에서 새로운 디렉토리를 만들듯이(다른 폴더를 만든것처럼) drawable 폴더를 만들 수도 있다.

이미지를 추가하기 위해서 윈도우 탐색기에서 이미지를 선택하고 IntelliJ IDEA의 drawable 폴더에 드롭하면 된다.

5. ImageView 위젯에 이미지 파일 연결

뷰 내부의 이미지 뷰에 추가된 이미지를 연결할 준비가 되었다. UI 디자이너에서는 위젯의 속성을 수정하기 위해서 위젯을 선택할 필요가 있다. 디자이너에서 위젯을 클릭하면 간단히 위젯을 선택할 수 있다. 그러나 때때로 이것이 어려운 작업이 될 수도 있다. 만약 이미지 위젯을 추가했지만 소스 이미지가 연결되지 않았다면 마우스로 선택하기 어려운 매우 작은 박스로 보여질 수도 있다. Component Tree는 필요한 시각 요소를 쉽게 선택하게 해주는 시나리오 중 하나이다.

Component Tree를 열려면 좌측의 Designer 수직 탭을 클릭해서 전면으로 visual designer를 가져온다. Components Tree 윈도우에서 이미지 뷰 컴포넌트를 선택하고 속성 테이블의 src 엔트리로 커서를 위치시킨다.

… 버튼을 클릭하면 애플리케이션의 drawable 리소스를 탐색하는 대화상자가 열릴 것이다: 이미지를 선택하고 OK를 클릭한다.

6. TextView 컴포넌트 추가

컴포넌트 팔렛트에서 TextView 컴포넌트를 선택하고 이미지 아래에 이 뷰를 놓는다.

기본적으로, TextView는 어떤 텍스트와 연결되어 있다: New Text. 이것을 바꾸려면, 그리고 지역화된 문자열을 그것과 연결하려면 새로운 텍스트 리소스를 만들 필요가 있다.

주: UI 레이아웃에서 그래픽 컴포넌트를 추가하고, 수정하고 삭제할 때, 디자이너에서와 같은 방법으로 Component Tree를 사용할 수 있다. 위젯을 Component Tree를 드롭하고 계층 구조에서 삭제하거나 편집할 수도 있다.

7. String 리소스 생성

Components Tree 패널에서 TextView를 선택하고 속성 테이블에서 text 속성을 선택한다. ellipsis 버튼을 클릭해서 기존의 문자열 값을 선택하거나 새로운 것을 추가할 수 있다. 편집 대화상자는 프로젝트의 res/values 폴더에 있는 strings.xml 파일에서 문자열을 선택한다.

필요한 경우에, strings.xml 파일을 직접 수정할 수도 있다.

8. 텍스트에 스타일 추가

텍스트를 좀 더 눈에 띄게 하려면 몇 가지 추가 속성을 설정하는 것이 필요하다. TextView 컴포넌트의 속성 테이블에서 디자이너를 통해서 할 수 있다.

먼저, 텍스트를 수평 중앙에 위치시키고 싶을 것이다. 이것은 gravity 속성에 center_horizontal을 설정한다.

다음, 텍스트에 약간의 여백을 주고 싶을 것이다: padding 속성으로 가서 10dp를 설정한다.

텍스트 색상을 변경하려면, textColor 속성을 변경한다. 이 속성을 색상 문자열인 #ffd764로 설정할 수도 있고 색상 리소스를 참조하도록 할 수도 있다. 색상 리소스를 추가하기 위해서는 ellipsis 버튼을 클릭하고 welcomeText라는 이름에 #ffd764 값을 가진 리소스를 만든다.

텍스트의 크기를 늘리리면 textSize 속성을 수정한다. 비슷한 방법으로, 직접 값을 설정하거나 크기 리소스로 설정한다. 크기 리소스를 설정하기 위해서 ellipsis 버튼을 클릭해서 largeText라는 이름에 폰트 크기를 가리키는 20dp 값을 가진 리소스를 만든다.

주: 단순 숫자로써 dimensions를 가리키게할 수 없다. 항상 dp 접미사를 추가해야 한다.

아래 그램은 현재의 사용자 인터페이스 상태를 보여준다.

9. 다른 테마 시도

UI 디자이너 윈도우는 상단에 미리보기를 돕는 몇 가지 옵션이 있다. 특히, 사전 정의된 테마 리스트를 가지고 있다. 테마는 전체 애플리케이션 UI의 모양을 몇 개의 공통된 시나리오로 어떻게 보이게 할지를 빠른 방법으로 확인할 수 있다. 예를 드면, 타이틀바가 없는 애플리케이션의 룩앤필을 빠르게 미리볼 수 있다.

테마에 의해 정해진 특징들 중 일부는 코드상에서 즉시 설정할 수도 있다. 코드 상에 이러한 변경 사항을 입력할 책임이 있다. 예를 들어, 타이틀바를 숨기려면 MyActivity.java에 코드를 추가할 필요가 있다.

public void onCreate(Bundle savedInstanceState)

{

   super.onCreate(savedInstanceState);

   // This is the line that removes the title bar

   requestWindowFeature(Window.FEATURE_NO_TITLE);

   setContentView(R.layout.main);

}

10. 디바이스 프로파일 생성

UI 디자이너 윈도우의 상단 툴바는 다양한 조건에서 레이아웃 미리보기를 위한 옵션을 제공한다: 가로보기 또는 세로보기, 작은 화면 또는 큰 화면, 로컬라이징, 다양한 플랫폼하에서의 환경 등등. 기본적으로, IntelliJ IDEA는 기본 프로파일에 따라 레이아웃을 그린다.

애플리케이션에 가장 맞는 조건의 레이아웃 프리뷰를 빠르게 보기 위해 커스텀 프로파일을 만들 수 있다. 새로운 디바이스 프로파일을 디자이너에서 만들려면 [Full] 드롭다운을 클릭하고 수정할 프로파일을 선택한다.

그 다음 +를 클릭하고 새로운 디바이스 프로파일을 설정한다. Visible 체크박스는 UI 디자이너에 해당 속성을 표시하게 해준다. 예를 들면, 새롭게 만들어진 프로파일은 테마, 독, 야간 모드 속성을 필터링하고 가로 모드로 설정한다. 새롭게 만들어진 프로파일은 드롭다운 리스트에 보여지고 나중에 빠르게 적용시킬 수 있다.