Designing Your Screen in XML(andorid XML디자인)

IT(Old)/Android 2007. 11. 28. 17:42

Designing Your Screen in XML

소스코드 안에다 화면 디자인하는것이 성가신 작업이 될 수 있기에, Android는 XML문법으로 화면 디자인하는 것을 지원한다. Android는 아주 많은수의 custom elements를 정의하고 있고, 그것들은 독특한 Android View subclass를 대표한다. 당신은 일련의 태그기반의 HTML파일을 생성한것과 같은 방법으로 화면을
디자인할수 있고, 그 파일은 application의 res/layout 디렉토리 안에 XML 파일로 저장된다. 어떤 elements가 표현되는지 그리고 XML파일 포맷을 배우기 위해서 Layout Resources를 보아라. 각 파일은 single android.view.View를 설명하고 있다. 하지만 이 element는 단순한 visual element 또는 자식 객체들의 collection을 포함하는 layout element가 될수도 있다(screen 또는 screen의 일부). Android가 당신의 application을 compiles 할때, 그것은 android.view.View 리소스로 complie하고, 당신의  Activity.onCreate() 안에 구현된 setContentView(R.layout.layout_file_name)을 호출하는 것으로 당신의 코드안에서 그것을 load할 수 있다.

각 XML파일은 android GUI classes에 상응하는 태그들로 구성된다. 이 태그들은 class안에 있는 methods에 상응하는 attributes를 가지고 있다.(예를 들면, EditText는 text attibute를 가지고 그것은 EditText.setText와 같다.)

class와 method 이름들 그리고 element와 attribute 이름들이 정확하게 일치하는 것은 아니라는걸 명심해라. - 거의 비슷하다, 하지만 항상 1대1 관계는 아니다.

또한 Android는 XML안에 그들이 나타나는 순서대로 elements를 그리는 경향이 있다. 그래서 elements가 겹치게 되면, XML파일안에 마지막놈이 같은 공간에 있는 이전에 listing된 elements들중 1순위로 그려지게 될 것이다.

각 XML파일은 single View 또는 ViewGroup 객체에 기반을 둔 tree로 컴파일된다. 그래서 single root 태그를 포함해야 한다. 다음 예제에서, 그것은 가장 바깥에 있는 LinearLayout 객체를 evaluate한다.

layout_somthing이라 이름 붙여진 Attriutes는 객체의 LayoutParams멤버로 적용된다.  Layout Resources는 또한 LayoutParams의 peroperties를 상세하기 위한 문법을 어떻게 배우는지 설명한다.

다음 값들은 치수를 지원한다.(TypedValue에 설명되어 있음)

  • px (pixels)
  • dip (device independent pixels)
  • sp (scaled pixels — best for text size)
  • pt (points)
  • in (inches)
  • mm (millimeters)

Example: android:layout_width="25px"

이 dimensions에 대한 더많은 정보를 원한다면, Dimension Values를 보아라.

다음 XML파일은 (오른쪽과같이)보여지는 screen을 생성한다. screen의 상단에 위치한 text는 Activity.setTitle라 불리는 것에 의해 set되는 것을 기억해라. 관련된 elements(layout_toLeft)를 가리키는 attributes는 연관된 resource의 문법을 사용하는 ID를 참조한다.(@id/id_number)

The following XML file creates the screen shown. Note that the text on the top of the screen was set by calling Activity.setTitle. Note that the attributes that refer to relative elements (i.e., layout_toLeft) refer to the ID using the syntax of a relative resource (@id/id_number).

<?xml version="1.0" encoding="utf-8"?>
<!-- Demonstrates using a relative layout to create a form -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content"
                android:background="@drawable/blue"
                android:padding="10px">

    <TextView id="@+id/label" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:text="Type here:"/>

    <EditText id="@+id/entry" 
              android:layout_width="fill_parent" 
              android:layout_height="wrap_content" 
              android:background="@android:drawable/editbox_background"
              android:layout_below="@id/label"/>
  
    <Button id="@+id/ok" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_below="@id/entry"
            android:layout_alignParentRight="true"
            android:layout_marginLeft="10px"
            android:text="OK" />

    <Button android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:layout_toLeft="@id/ok"
            android:layout_alignTop="@id/ok"
            android:text="Cancel" />
</RelativeLayout>
Screen shot showing how this layout XML file is rendered.

Loading the XML Resource

컴파일된 layout resource를 loading하는 것은 매우 쉽고 application의 onCreate()를 호출하는것에 의해 실행된다. 아래와같다

protected void onCreate(Bundle savedValues)
{
   // Be sure to call the super class.
   super.onCreate(savedValues);

   // Load the compiled layout resource into the window's
   // default ViewGroup.
   // The source file is res/layout/hello_activity.xml
    setContentView(R.layout.hello_activity);
  
   // Retrieve any important stored values.
   restoreValues(savedValues);
}