간단한 UI(User Interface) 구축하기 2

Text Field( Text를 쓸수 있는 EditText) 추가하기

------------------------------------------

모든 View 객체와 마찬가지로 EditText 객체의 특징을 지정하기 위해 XML 에 속성들을 정의해야 만 합니다.

1. activity_my.xml 파일에서 <LinearLayout>의 요소로서 <EditText> 를 정의하고 id 속성을 "@+id/edit_message"로 지정하세요.

2. layout_widht 와 layout_height 속성은 "wrap_content" 로 정의하세요.

3. hint 속성은 'edit_message'로 이름지어진 문자열 객체(res/strings.xml 에 있는) 를 지정하세요.

<EditText> 요소는 아래처럼 되어 있어야 합니다.

res/layout/activity_my.xml

<EditText android:id="@+id/edit_message"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:hint="@string/edit_message" />

<EditText>에 추가된 속성들 :

android:id

 이 속성은 여러분의 앱 코드(java파일)에서 객체를 참조해서 컨트롤하거나 읽어서 사용할 수있도록 하는 View에 대한 유일한 식별자를 제공합니다.(다음 단원에서 이 방법을 보실 겁니다.)

 @ 기호는 여러분들이 XML로 부터 다른 resource 객체를 참조할 때 요구됩니다. 이어서 resource type을 지정합니다.(이번엔 id) 그리고 슬래시(/)하나를 쓰고 resource 이름을 직성합니다.(eidt_message)

 리소스 타입 전에 + 표시는 여러분이 리소스ID를 처음 주어질 때만 필요합니다. 여러분이 앱을 컴파일 할때, SDK tools는 EditText 요소를 참조하는 gen/R.java 파일안에 새로운 리소스 ID를 만들 때 이 ID 이름을 사용합니다. 리소스 ID가 선언된 것은 다른 것이 ID로 참조할 때 플러스 기호는 필요하지 않습니다. 플러스 기호는 오직 새로운 리소스 ID를 지정할 때만 필요합니다. 문자열이나 레이아웃들 같이 고정된 리소스의 값들은 필요하지 않습니다. 리소스 오브젝트에 대한 추가 정보는 아래 박스를 참고하세요.

Resource Objects

리소스 오브젝트는 bitmap, layout file, 또는 문자열 같은 조합된 앱 리소스의 정수형 이름입니다.  모든 리소스는 여러분 프로젝트의 gen/R.java 파일에 리소스 오브젝트에 대응되어 있습니다. 여러분은 android:hint 속성에 대한 문자열 값을 지정할 필요가 있을 때와 같이 여러분의 리소스를 참고하기 위해 R 클래스에 오브젝트 이름을 사용할 수 있습니다. 또한 다른 코드로부터 view를 참조하기 위해 android:id 를 사용하고 있는 view와 조합하여 임의의 리소스 ID를 만들 수 있습니다.  SDK tools 는 앱을 컴파일 할 때마다 R.java 파일에 자동으로 기록됩니다. 여러분들은 절대로 이 파일을 수정하시면 안됩니다. (실제로 수정되지도 않습니다.)  추가정보를 원하시면 개발자 사이트의 Providing Resources 가이드를 읽어보시기 바랍니다.

 

android:layout_width 와 android:layout_height

 width 와 height에 대한 사이즈 기입을 대신하여 "wrap_content" 값을 기입합니다. 이값은 뷰의 내용물을 감싸는데 필요한 만큼만 큰 뷰를 만들어 냅니다. 만약 이값을 "math_parent" 로 대체하면, EditText 요소는 부모뷰인 LinearLayout 의 사이즈를 맞추기 때문에 화면을 꽉 채우게 됩니다.  

 추가적인 정보를 원하시면 개발자 사이트의 Layouts 가이드를 참고하세요.

android:hint

 Text 영역이 비어있을 때 화면에 표시되는 기본 문자열 입니다. 다른 파일에 정의된 문자열 리소스를 참조하기 위해"@string/edit_message"를 직접 기입합니다. 왜냐하면 문자열 리소스는 고정된 값의 리소스 이기 때문입니다. 이것은 플러스 기호가 필요하지 않습니다. 어쨋든, 여러분이 아직 문자열 리소스를 정의하지 않았기 때문에 여러분들은 컴파일러 에러를 보게 될 겁니다. 여러분들은 다음 섹션에서 문자열을 정의함으로 이것을 확정할 것 입니다.

 

Note : 이 문자열 리소스는 ID:edit_message 요소로서 같은 이름을 가집니다. 어쨋든 리소스 참조는 항상 리소스 타입에 의해 범위가 스코프됩니다.(id 또는 string처럼) 그래서 같은 이름을 사용해도 충돌이 아닙니다.

Button 추가하기

-------------------------------

1. Android Studio에서 res/layout 디렉토리로 부터 activity_my.xml 파일을 작성합니다.

2. <LinearLayout> 요소 안에 <EditText> 요소에 바로 이어서 <Button> 요소를 정의합니다.

3. Button 의 width 와 height 속성에 "wrap_content" 를 설정합니다. 그래서 버튼은 항상 Button 의 Text 라벨을 감쌀 정도만의 사이즈를 가집니다.

4. android:text 속성은 이전 섹션에서 정의한  button_send 문자열 리소스의 값으로 Button 의 텍스트 라벨을 정의합니다.

여러분의 <LinearLayout>은 아래 처럼 보여야 합니다.

res/layout/activity_my.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="horizontal" >       <EditText android:id="@+id/edit_message"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:hint="@string/edit_message" />       <Button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/button_send" /> </LinearLayout>

Note : 이 Button 은 activity 코드에서 참조하지 않기 때문에 android:id 가 필요하지 않습니다.

그림2에 보여지는 것처럼 , 레이아웃은 현재 EditText 와 Button 위젯들 둘다 그것들의 내용물을 감쌀 정도의 사이즈로 디자인 되어 있습니다.

 

그림 2. EditText 와  Button 위젯은 그들의 폭을 "wrap_content" 로 설정되어 있습니다.

 이 작업은 사용자가 얼마나 길게 입력할 지 알 수 없기 때문에 button , Text field 모두 좋은 방식입니다. 이것은 Text field의 사용하지 않는 화면 폭을 채우는 좋은 방법입니다. 여러분들은 LinearLayout 이 가지고 있는 weight 특성을 android:layout_weight 속성을 사용하여 지정할 수 있습니다.

 weight 값은 뷰가 소비하고 남아있는 공간의 총합을 지정한 숫자 입니다. 같은 레이아웃 안에 있는 형제 뷰들에 의해 소비된 무게의 총합입니다. 이 작업은 음료수 레시피 " 소다 2, 시럽 1" 음료의 정수 총액과 같은 것입니다.  마치 2-3의 소다음료를 의미합니다.  예를들어, 한 뷰의 weight 이 2이고 다른 하나가 1 이라면 이 둘의 합은 3입니다. 그래서 첫번째 뷰가 2/3의 남은 공간을 가지게 되고 두번째 뷰가 남을 공간을 채웁니다. 만약 여러분이 세번째 뷰을 추가하고 weight 에 1을 주면, 첫번째 뷰(weight이 2인)는 남은 공간의 1/2를 갖게 되고, 남은 두 개의 뷰가 각 각 1/4씩 갖게 됩니다.

 모든 뷰의 기본 weight 값은 0 입니다. 그래서 혹시 어떤 weight 값도 0보다 큰 값이 없다면, 모든 뷰는 어디의 공간에서는 모두 같은 사이즈의 공간을 가지게 됩니다.

 Input Box 화면 폭 안에 꽉 채워 만들기 

--------------------------------------------------

EditText를 레이아웃의 남아있는 공간에 채우기 위해서는 아래의 내용을 따라합니다.

1. activity_my.xml 파일에서, <EditText>의 layout_weight 속성의 값을 1 로 배치하세요.

2. 또한, <EditText>의 layout_width 의 속성 값은 "0dp" 로 배치합니다.

res/layout/activity_my.xml

<EditText android:layout_weight="1" android:layout_width="0dp" ...........  />

 

 여러분이 weight 을 지정했을 때 레이아웃의 효과를 증명하기 위해, 여러분은 반드시 EditText 의 width 를 제로(0)로 변경해야만 합니다. "wrap_content" 을 사용하면 시스템은 남았는 공간에 대한 다른 width 값을 계산하고 궁극적으로 상관없는 width를 계산하기 때문에 0으로 width 을 설정해만 레이아웃에 효과가 입증된다. 

그림 3은 EditText 에 모든 weight 배치했을 때의 결과를 보여 줍니다.

 

그림 3. 모든 layout weight이 주어진 EditText 위젯, 그래서 이것은 LinearLayout 의 남아있는 공간을 꽉 채웁니다.

아래 완성된 activity_my.xml 레이아웃 파일을 보겠습니다.

res/layout/activity_my.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="horizontal">     <EditText android:id="@+id/edit_message"         android:layout_weight="1"         android:layout_width="0dp"         android:layout_height="wrap_content"         android:hint="@string/edit_message" />     <Button         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="@string/button_send" /> </LinearLayout>

앱 실행하기

----------------------------

 이 레이아웃은 여러분이 프로젝트를 만들 때 SDK tools가 자동으로 작성한 default Activity 클래스에 의해 적용되었습니다.

결과를 보기위해 앱을 실행합니다.

° Android Studio 에서 툴바에 있는 Run 을 클릭하세요.

° 또는 command line 에서는, 여러분의 안드로이드 프로젝트의 root 디렉토리로 변경하고 아래 명령을 실행합니다.

ant debug  adb install bin/MyFirstApp-debug.apk

 

 다음 포스트에서 버튼을 눌렀을 때 응답하는 방법, text field(EditText)로 부터 내용물을 읽어내는 방법, 다른 activity를 시작하는 방법과 추가적인 내용들을 계속이어서 진행하겠습니다.