3. 사용자 인터페이스 구현 (3) - 뷰의 기초 공통 속성 2

 

 

 

앞서 살펴본 id 속성에 이어서, 계속해서 뷰의 공통 속성을 살펴보도록 하겠습니다. 

 

 

○ layout_width, layout_height

 

뷰의 화면 표시를 위한 속성 중 size(크기)는 필수 속성입니다. 선언하지 않으면 에러가 발생하게 되죠. 기본적으로 아래와 같은 형식으로 선언하게 됩니다. 

 

    <TextView
        android:id="@+id/myText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="hello!" />

 

 

기본적으로 크기를 지정하는 속성 값은 아래와 같이 네 가지로 지정할 수 있습니다. 

 

· match_parent
· fill_parent
· wrap_content
· 100px

 

match_parent와 fill_parent는 의미상 동일해 결과는 같습니다. 기본적으로 해당 속성이 적용된 뷰는, 부모 계층의 뷰가 지정한 크기에 꽉 들어차도록 자동으로 결정하게 됩니다. 뷰 계층 구조는 추후 따로 살펴볼 예정이니, 여기서는 TextView가 있으면 이를 감싸고 있는 다른 태그를 의미한다고 생각하면 됩니다. 

 

wrap_content는 해당 뷰의 내용을 화면에 출력하기 위한 적절한 크기를 산출하여 결정하는 경우입니다. 예를 들어 TextView에서 wrap_content를 적용하게 되면 문자열을 출력하기 위한 크기를 지정하게 됩니다. 폰트가 커지면 자연스럽게 뷰 자체의 크기도 커집니다. 

 

이런 상대 크기와 별개로 999px처럼 뷰의 크기를 절대 값으로 지정하는 것도 가능합니다. 

 

그럼 아래 예제를 통해서 적용 사례를 살펴보겠습니다.

 

 

---

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#F7FB08"
    tools:context=".Sample_2Activity">

    <TextView
        android:id="@+id/myText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#FF0000"
        android:text="hello!" />
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="world..."
        android:background="#0000FF"
        android:textColor="#FFFFFF" />
    
</LinearLayout>

 

 

 

 

 

일단 위의 구조에서는 LinearLayout 하위에 TextView가 두 개가 포함된 구조입니다. 일단 LinearLayout의 경우 모든 사이즈를 match_parent로 설정했습니다. 해당 레이아웃 뷰의 최상위 계층은 사실상 전체를 의미하니, 노란색 배경은 결국 전체를 채우게 됩니다. 

 

첫 번째 텍스트 뷰의 경우 가로 세로 길이가 모두 wrap_content로 선언되었습니다. 즉, 텍스트 "hello!"의 사이즈만큼만 표시되었습니다. 두 번째 텍스트 뷰는 가로길이를 match_parent로 설정했습니다. 이는 LinearLayout의 가로길이만큼을 의미하게 되죠.