안드로이드 - 뷰 속성 (텍스트뷰, 이미지뷰)

뷰 속성 - 높이와 크기

고정값

▼ TextView (고정값) 예제

<TextView
	android:text="안녕하세요!"
    android:background="@android:color/darker_gray"
    android:layout_width="150dp"
    android:layout_height="75dp" />

속성 중 크기와 관련된 width, height 등에는 숫자 뒤에 단위가 붙은 것을 확인할 수 있습니다. dp 는 안드로이드에서 사용하는 단위로 Density-Independent Pixels 의 약자입니다.

물리적인 크기가 같은 폰이라도 지원하는 해상도에 따라서 화면에 표시되는 크기가 달라질 수 있습니다. 때문에 이를 해상도와 관계없이 물리적으로 동일한 크기로 표시하기 위해서 사용합니다.

Wrap Content

하지만 이렇게 너비 속성을 숫자로 직접 지정하기보다는 View 내부의 컨텐츠의 양이 동적으로 변하는 경우를 고려하여 다음과 같이 사용할 수도 있습니다. 속성을 wrap_content 로 지정한다면 뷰의 크기는 컨텐츠(text)의 길이에 따라서 자동으로 조절됩니다.

▼ TextView (wrap_content) 예제

<TextView
	android:text="안녕하세요. 오늘은 날씨가 참 좋네요"
    android:background="@android:color/darker_gray"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

텍스트 크기

텍스트뷰의 텍스트의 크기를 변경하도록 합니다. 텍스트의 크기는 testSize 속성을 사용하여 지정합니다.

▼ TextView (TextSize) 예제

<TextView
	android:text="안녕하세요."
	android:textSize="20sp"
    android:background="@android:color/darker_gray"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

sp 는 글자의 크기를 지정하는 단위입니다.

택스트 색상

텍스트의 색상도 설정할 수도 있습니다. View 의 배경색 및 Contents(Text) 의 색상을 변경할 수 있습니다. 아래의 예시(darker_gray) 와 같이 지원되는 색상의 이름은 제한이 있습니다. blue 와 같은 이름을 넣으면 동작하지 않습니다. 이러한 경우에는 16진수 색상코드(hex color code) 를 이용해야 합니다. 색상코드는 샵(#) 기호와 6자리의 16진수 값을 따옴표로 묶어서 사용합니다.

▼ TextView (TextColor) 예제

<TextView
	android:text="안녕하세요."
    android:background="#0000d6"
    android:textColor="#E3F2FD"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

이미지뷰 - 속성

TextView 를 사용할 경우, 뷰의 내용이 Text 였던것 처럼, 이미지뷰는 이미지를 화면에 표시하기 위해서 사용합니다.

▼ ImageView 예제

<ImageView
    android:src="@drawable/cake"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="center" />

Src

우선 android:src="@drawable/cake"는 앞서 살펴보았던 TextView 에서 보지 못했던 속성으로, View 에 표시할 이미지 파일의 위치를 나타냅니다. 파일의 이름은 cake 입니다. 확장자는 사용하지 않습니다. @ 기호를 사용하여 안드로이드 앱 안의 자료를 참조하는데, drawable은 자료종류를 나타냅니다. drawable 은 안드로이드에서 화면에 보여질 그래픽을 의미합니다.

다음으로 나와있는 너비와 크기와 관련된 속성은 내부의 컨텐츠의 크기와 동일하다는 의미입니다.

Scale Type

마지막으로 android:scaleType 속성은 안드로이드에서 이미지를 표시할 때 화면과의 크기 차이로 인하여 확대/축소 등이 필요할 때 어떠한 기준으로 표시할 것인지를 의미합니다. 현재 예제에 설정되어 있는 center 는 단순 중앙정렬을 의미합니다. 반면 centerCrop 으로 설정할 경우, View 의 높이, 너비중 큰 쪽에 맞추어 이미지를 확대/축소한 후, 나머지는 잘라냅니다.

프로젝트를 통한 동작 확인

지금까지 기술한 내용을 Android 스튜디오에서 실행하여 확인해 볼 수 있습니다.

앞선 글에서 생성한 프로젝트를 재사용하도록 합니다.

먼저 Project 창이 열려 있고(View > Tool Windows > Project 선택) 상단의 드롭다운 목록에서Android뷰가 선택되었는지 확인합니다.

app > res > layout > activity_main.xml 로 이동합니다.

이 XML 파일은 activity UI의 레이아웃을 정의하며, “Hello world!” 텍스트가 있는 TextView 요소의 내용이 포함되어 있습니다. 이 파일의 내용을 본 글에서 기술한 View 의 내용으로 교체를 함으로써 동작을 직접 확인할 수 있습니다.