Home » Android -3. 기본 위젯 및 레이아웃

Android -3. 기본 위젯 및 레이아웃

  • 안드로이드의 화면을 구성하는 요소는 크게 레이아웃(Layout)과 위젯(Widget)으로 나눌 수 있다.
  • 위젯은 텍스트를 표시해주는 TextView, 그림을 표시해주는 ImageView, 버튼, EditText, RadioButton, CheckBox 등 사용자의 입력을 받거나 화면에 데이터를 표시해주는 것들이며, 레이아웃은 이러한 위젯들을 어떠한 방식으로 화면에 배치해줄지를 결정해주는 하나의 “컨테이너” 역할을 한다.

3.1. LinearLayout

  • 가장 기본적이면서도 가장 많이 사용되는 레이아웃. 레이아웃 내의 요소들을 수직, 수평으로 배치한다.
  • 배치 방향을 결정하는 속성은 orientation으로, vertical로 설정 시 레이아웃 내의 요소들을 수직으로, horizontal로 설정 시 수평으로 배치한다.


그림 14. LinearLayout
[php]
<linear_layout_sample.xml>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" (1)
android:layout_height="match_parent" (2)
android:orientation="vertical" (3)
android:weightSum="2" > (4)

<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" (5)
android:layout_marginBottom="30dp" (6)
android:orientation="vertical" >

… 생략
[/php]

번호 설명
(1) 레이아웃/위젯의 가로길이 지정. match_parent는 모두 채우는 속성이며 wrap_content를 쓸 경우 해당 레이아웃/위젯의 크기만큼 가변적으로 늘어난다. 또한 직접 숫자를 넣어 고정적인 수치를 입력해 줄 수 있다.(ex. 150dp)
(2) 레이아웃/위젯의 세로 길이지정. 들어가는 값은 layout_width와 동일하다.
(3) LinearLayout에서 정렬 방식을 지정. 값에 vertical을 줄 경우 세로로, horizontal을 주면 가로로 배치된다.
(4) 레이아웃/위젯의 크기를 비율적으로 주고 싶을 때 사용하며 LinearLayout에서만 제공된다. 예제의 경우 2를 주었는데 화면의 전체 크기를 2로 본다는 의미로 해석된다. 안드로이드의 경우 width, height를 고정값으로 줄 경우 해상도마다 다르게 나타나기 때문에 이를 해결하기 위해 많이 사용된다.
(5) 위의 weightSum의 2중 1 즉, 절반의 비율을 레이아웃의 크기로 지정한다. 다만 사용 할 경우 width / height 에 0dp를 넣어주어야 한다. 예제의 경우 height를 0에로 주고 layout_weight를 1로 주었으므로 세로방향으로 전체크기 2 중 1만큼 차지하게 된다.
(6) 레이아웃/위젯의 아래 영역에 입력한 수치만큼 마진을 적용한다. 같은 기능으로 layout_marginTop, layout_marginLeft, layout_marginRight가 있으며 네 방향 모두 한번에 적용하고 싶을 경우 layout_margin을 사용한다.

3.2. RelativeLayout

  • RelativeLayout은 레이아웃 내의 요소들간에 위치관계를 부여하고, 그 관계에 따라 화면을 구성한다.
  • RelativeLayout도 LinearLayout만큼 많이 쓰이는 레이아웃이며, LinearLayout에 비해 각 요소의 위치를 조금 더 세밀하게 조정하는 것이 가능하기에 복잡한 화면을 구성할 때 주로 사용한다.
  • RelativeLayout은 LinearLayout처럼 레이아웃 자체에서 지정해주는 속성은 따로 없으며, 레이아웃 내의 요소들이 가지는 속성에 따라 각 요소의 위치가 결정된다. 아래에 RelativeLayout 내의 요소들이 가질 수 있는 속성들을 정리한 것이다.

  • 레이아웃 내 요소들간의 관계를 지정하는 속성
    • Layout above : 해당 요소가 이곳에 지정한 ID를 가지는 요소의 바로 위에 위치하도록 한다.
    • Layout below : 해당 요소가 이곳에 지정한 ID를 가지는 요소의 바로 아래에 위치하도록 한다.
    • Layout to left of : 해당 요소가 이곳에 지정한 ID를 가지는 요소의 바로 왼쪽에 위치하도록 한다.
    • Layout to right of : 해당 요소가 이곳에 지정한 ID를 가지는 요소의 바로 오른쪽에 위치하도록 한다.
    • Layout align left : 해당 요소의 왼쪽 끝 선을 이곳에 지정한 ID를 가지는 요소의 왼쪽 끝선과 일치시킨다.
    • Layout align right : 해당 요소의 오른쪽 끝 선을 이곳에 지정한 ID를 가지는 요소의 오른쪽 끝선과 일치시킨다.
    • Layout align top : 해당 요소의 윗선을 이곳에 지정한 ID를 가지는 요소의 윗선과 일치시킨다.
    • Layout align bottom : 해당 요소의 아랫선을 이곳에 지정한 ID를 가지는 요소의 아랫선과 일치시킨다.

  • 레이아웃과 요소간의 관계를 지정하는 속성
    • Layout align parent left : 해당 요소의 왼쪽 끝선을 parent(레이아웃)의 왼쪽 끝과 일치시킨다.
    • Layout align parent right : 해당 요소의 오른쪽 끝선을 레이아웃의 오른쪽 끝과 일치시킨다.
    • Layout align parent top : 해당 요소의 윗선을 레이아웃의 윗선과 일치시킨다.
    • Layout align parent bottom : 해당 요소의 아랫선을 레이아웃의 아랫선과 일치시킨다.


그림 15. RelativeLayout

[php]
<relative_layout_sample.xml>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<Button
android:id="@+id/relativeLayoutSampleButton1" (1)
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" (2)
android:layout_alignParentTop="true" (3)
android:text="@string/common_button1" /> (4)

<Button
android:id="@+id/relativeLayoutSampleButton2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true" (5)
android:layout_below="@+id/relativeLayoutSampleButton1" (6)
android:layout_marginLeft="29dp"
android:layout_marginTop="22dp"
android:text="@string/common_button2" />

<Button
android:id="@+id/relativeLayoutSampleButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/relativeLayoutSampleButton1"
android:layout_marginRight="66dp"
android:layout_marginTop="40dp"
android:text="@string/common_button3" />

… 생략
[/php]

번호 설명
(1) 레이아웃/위젯을 구분해줄 id를 지정한다. @+id는 리소스에 +id 즉, id를 추가한다는 의미.
(2) 해당 레이아웃/위젯을 왼쪽 끝에 맞춤. 값은 true/false
(3) 해당 레이아웃.위젯을 가장 위에 맞춤. 값은 true/false
(4) TextView, Button 등의 위젯에 있는 속성이며, 말그대로 나타낼 텍스트를 지정한다. 예제의 경우 @string/common_button1 로 되어 있는데, 이 경우 string.xml에 정의 되어 있는 common_button1의 이름을 찾아 그 값을 가져온다. 예제의 경우 common_button1은 Button1이라는 값으로 정의되어 있다.
(5) 해당 레이아웃.위젯을 가장 왼쪽 끝 맞춤. 값은 true/false. 예제의 경우 marginLeft가 적용되어 왼쪽에 좀 더 떨어져 있는 것을 알 수 있다.
(6) id값을 지정해 해당 id를 가진 레이아웃/위젯의 아래에 배치하겠다는 의미

3.3. FrameLayout

  • FrameLayout은 각 요소들을 모두 왼쪽 상단을 기준으로 포개는 방식으로 배치한다.


그림 16. FrameLayout

[php]
<frame_layout_sample.xml>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<Button
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="@string/common_button1" />

<Button
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="@string/common_button2" />

</FrameLayout>
[/php]

  • 기본적으로 배치는 왼쪽상단에 배치가 되며, 레이아웃/위젯이 몇 개가 되든 왼쪽 상단에 겹쳐서 표시 된다. 위의 예제의 경우 width 100dp 버튼과 width 300dp 버튼이 왼쪽 상단에 겹쳐져 표시 되어 있다.

3.4. TableLayout

  • TableLayout 또한 이름에서 알 수 있듯이 표 형태의 레이아웃을 제공한다. 일정한 선에 맞추어 정렬되어야 하는 요소 (다이얼 버튼 등)를 정렬 할 때 주로 사용한다.

  • 레이아웃 내 자주 쓰이는 속성
     android:stretchColumns 속성 : 지정된 번호의 열은 해당하는 행에서 남아 있는 공간을 없앨 수 있는 만큼 늘어난다.
     android:shrinkColumns 속성 : 지정된 번호의 열을 텍스트를 줄 내림하는 등의 방법으로 차지하는 폭을 최대한 줄인다.
     android:collapseColumns 속성 : 지정된 열은 처음 화면에 나타날 때 쑴겨진 상태로 보이지 않는다.
     andorid:layout_span 속성 : 셀에 해당하는 뷰에 들어가는 속성. HTML의 colspan과 비슷.

  • 열의 지정은 숫자를 콤마로 구분하거나 *로 전체를 지정할 수 있다.


그림 17. TableLayout

[php]
<table_layout_sample.xml>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="*" >

<TableRow> (1)

<Button
style="?android:attr/buttonStyle" (2)
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/common_button1" />

<Button
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/common_button2" />

<Button
style="?android:attr/buttonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/common_button3" />
</TableRow> (3)

… 생략
[/php]

번호 설명
(1) TableLayout TableRow의 집합으로 이루어져 있으며, TableRow 태그안에 내용이 표시 된다.
(2) 레이아웃/위젯의 스타일 적용. 위의 경우 android button의 기본 스타일
(3) TableRow의 마침 태그

3.5. ScrollView

  • 한 화면에 표시해야 할 내용이 많을 경우 사용한다.
  • 리스트에서 내용이 많아지면 스크롤바가 생기는 것처럼, ScrollView 내에의 요소들이 한 화면에 표시되기 어려울 만큼 공간을 많이 차지한다면 스크롤바를 표시하여 스크롤을 통해 한 화면에 표시되지 않는 요소를 볼 수 있게 해준다.
  • ScrollView는 단 하나의 요소만을 포함할 수 있으므로, ScrollView에 요소들을 넣기 전에 해당 요소들은 모드 LinearLayout이나 RelativeLayout 등의 레이아웃에 미리 포함시켜 놓고, 그 레이아웃이 ScrollView의 하위 요소로 포함되도록 구성해야 한다.

[php]
<scroll_view_sample.xml>
<ScrollView xmlns:android=http://schemas.android.com/apk/res/android (1)
android:id="@+id/scrollView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="3dp" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical" >

… 생략
[/php]

번호 설명
(1) 이 레이아웃의 안의 내용이 화면을 넘어설 경우 자동으로 스크롤할 수 있도록 해주며, ScrollView 안에는 하나의 레이아웃만 들어가야만 한다.

3.6. TextView

  • TextView는 화면에 텍스트를 출력하는 위젯이다.
  • 단순히 문자열을 보여 주기만 할 뿐이며 사용자의 입력은 받아들이지 않는다.
  • 고정된 텍스트를 보여준다거나 다른 위젯의 제목을 표시할 때 사용된다.

  • 레이아웃 내 자주 쓰이는 속성
     text : 텍스트 뷰의 가장 중요한 속성으로 출력할 문자열을 지정한다. 디폴트로 빈 문자열을 가지며 이 상태로 출력하면 존재 자체가 보이지 않으므로 이 속성은 반드시 대입해야 한다. 문자열을 지정하는 여러 가지 형식이 제공된다.

 textColor : 문자열의 색상을 지정한다. #rrggbb나 #aarrggbb 형식으로 각 색상 요소의 강도를 지정한다. 별다른 지정이 없을 때는 디폴트 색상인 불투명한 밝은 회색이 적용되는데 검정색 배경에서 보면 거의 흰색에 가깝다. 밝은 배경색에서는 눈에 잘 띄지 않으므로 적당히 어두운 색으로 바꾸는 것이 좋다.

 textSize : 텍스트의 폰트 크기를 지정한다. 실수 타입으로 정밀한 크기를 지정할 수 있으며 숫자 뒤에 sp, dp, px, in, mm 등의 단위를 같이 지정해야 한다. 16px, 10pt, 15sp 등과 같이 지정한다. 텍스트는 폰트 크기에 따라 가변적인 sp 단위를 쓰는 것이 가장 합리적이다.

 textStyle : 폰트의 속성을 지정한다. normal, bold, italic 중 하나를 쓰거나 아니면 | 로 묶어 두 개 이상의 상수값을 지정할 수도 있다. 이때 |의 앞뒤로 공백이 있어서는 안되며 반드시 붙여서 써야 한다. 보기 좋게 한답시고 “bold | italic”으로 쓰면 에러 처리되므로 좀 갑갑해 보여도 “bold|italic”으로 써야 한다. XML은 형식이 엄격한 문서이므로 공백 하나도 규칙에 맞게 써야 한다. 이후 여러 개의 플래그 조합을 지정하는 모든 속성들도 마찬가지이다.


그림 18. TextView

<text_view_sample.xml>
[php]
<TextView
android:id="@+id/helloAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true" (1)
android:layout_centerVertical="true" (2)
android:text="@string/text_view_sample"
android:textColor="@android:color/holo_red_dark" (3)
android:textSize="30sp" (4)
android:textStyle="bold" (5)
/>
[/php]

번호 설명
(1) 가로 가운데 정렬
(2) 세로 가운데 정렬
(3) 텍스 트 색 지정
(4) 텍스트 크기 지정
(5) 텍스트 스타일 지정(굵기, 기울임 등)

3.7. Button

  • 특정 기능을 실행하도록 명령할때 사용하는 위젯.
  • TextView를 상속 받기 때문에 TextView의 속성들도 사용 가능하다.(text, textSize 등)


그림 19. Button

<button_sample.xml>
[php]
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/button_sample" />
[/php]

3.8. EditText

  • 사용자로부터 입력을 받을 수 있는 위젯.


그림 20. EditText

<edit_text_sample.xml>
[php]
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:hint="@string/edit_text_sample" (1)
android:inputType="text" (2)
/>
[/php]

번호 설명
(1) 말 그대로 hint가 되는 텍스트를 보여준다. 실제 텍스트 값은 아니며 보여주기만 하며, 다른 텍스트가 입력되면 자동으로 사라진다.
(2) 입력 형식이나 소프트 키보드의 형식을 결정한다. text의 경우 일반 텍스트를 의미하며 textPassword로 설정할 경우 비밀번호 타입으로 보여지게 된다. 또한 textEmailAddress로 설정할 경우 소프트 키보드가 나타날 때 이메일(@) 기호가 포함된 키보드 타입이 나타나게 된다. 이 외에도 숫자 키보드가 나타나는 number 등이 존재한다.

3.9. ImageView

  • 이미지뷰는 아이콘이나 비트맵을 출력하는 위젯.
  • 다양한 경로의 이미지를 받을 수 있는데 리소스, 파일 등은 물론이고 컨텐트 프로바이더나 웹상의 이미지도 표시할 수 있다.

  • 자주 쓰이는 속성
     src: 출력할 이미지를 지정하는 가장 중요한 속성. 이미지를 출력할 수 있지만 #rrggbb 형태의 색상값을 출력할 수도 있다. 리소스에 이미지를 두고 @drawable/ID 형식으로 불러와서 이미지를 표시할 수 있다.
     maxHeight, maxWidth :  이미지가 출력될 최대 크기를 지정한다. 지정을 안하면 이미지의 원래크기대로 출력되지만 스마트폰의 해상도가 충분하지 않으므로 크기를 적당히 제한해야 한다.
     adjustViewBounds : 이미지의 종횡비를 맞추기 위해 이미지 뷰의 크기를 적당히 조정할 것인가를 정하는 속성. true / false로 지정.
     cropToPadding : true / false 값으로 지정하고 true일 경우 주어진 여백에 맞추기 위해 이미지의 일부를 잘라버린다. 이 속성을 사용하면 이미지 전체가 보이지 않을 수 도 있다.


그림 21. ImageView
<image_view_sample.xml>
[php]
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:contentDescription="@string/sample_img_desc" (1)
android:adjustViewBounds="true" (2)
android:src="@drawable/icon9" /> (3)
[/php]

번호 설명
(1) 해당 이미지의 설명. 사용하지 않아도 상관은 없지만 쓰지 않을 경우 warning이 발생한다.
(2) true로 할 경우 이미지의 종횡비를 맞춰준다.
(3) 이미지의 경로 지정

3.10. ListView / Adapter

  • ListView란 Data를 List 형식으로 출력해주는 View이며, Adapter는 ListView에 출력할 Data를 보관하는 장소로 보통 리스트뷰와 어댑터는 항상 함께 사용된다.


그림 22. ListView / Adapter

<list_view_adapter_sample.xml>
[php]
<ListView
android:id="@+id/listViewAdapterSample_listView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
>
</ListView>
[/php]

<step1/ListViewAdapterSample.java>
[php]
… 중략
setContentView(R.layout. list_view_adapter_sample); (1)
setData();
list = (ListView) findViewById(R.id.listViewAdapterSample_listView); (2)
adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, data); (3)
list.setAdapter(adapter); (4)
}
public void setData() {
data = new ArrayList<String>();
for(int i=0; i<DATA_SIZE; i++) {
data.add("data " + (i+1));
}
}
[/php]

번호 설명
(1) 지정된 layout을 현재 액티비티에 세팅하고 보여준다.
(2) xml에 정의된 id 값을 통해 listview 객체를 만들어준다.
(3) 어댑터 생성. 인자로는 Context 객체, 레이아웃, 데이터가 들어간다. Context 객체는 현재 액티비티의 여러가지 정보를 담고 있는 객체며, 레이아웃은 각 리스트마다 표시될 레이아웃이 들어간다. 데이터는 표시하고자 하는 데이터를 보내준다. 예제에서 레이아웃은 안드로이드에서 기본 제공하는 레이아웃을 사용했으나 사용자가 커스텀하여 사용할 수도 있다.
(4) 리스트에 어댑터를 연결한다. 리스트에 실제 데이터를 가지고 있는 어댑터를 연결시켜 리스트를 출력한다.