[Android Studio] ImageView 속성 알아보기 - ScaleType & Background vs Src

이미지 없는 앱을 본 적 있으신가요? 이미지가 들어가지 않은 앱이 있나..? 라고 생각할정도로 이미지는 많이 사용됩니다. 그 중 이미지를 띄우기 위해 가장 많이 사용하는 ImageView의 속성에 대해 알아보겠습니다.

---

1. Background vs Src

이 둘은 ImageView가 어떤 것을 출력하는지를 정한다는 공통점이 있습니다.

단, src는 padding이 적용되지만 background는 적용이 되지않는다는 차이점이 있습니다.

즉, background는 ImageView 전체를 덮는 것입니다. 전체를 덮는 이미지를 배경으로 글자를 넣는 등의 일은 거의 없기 때문에 이미지를 넣을 땐 웬만하면 src를 사용하는 것이 좋습니다.

 

src에 이미지를 넣고, 그 이미지가 작을 경우 ImageView의 여백에 background에 설정한 값이 뜨게 됩니다.

 

맨 아래 예제에서 확인하시면 좋을 듯 합니다.

 

 

2. ScaleType

<ImageView 
    android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:scaleType="center"/>

ImageView에서 제공하는 ScaleType의 값은 8가지로 나뉩니다.

 

1) android:scaleType = "Center"

이미지의 크기와 비율을 유지하며 이미지의 중앙을 ImageView의 중심에 맞춥니다. 이때, ImageView보다 이미지가 클 경우 이미지가 잘릴 수 있습니다.

 

2) android:scaleType = "centerCrop"

이미지의 비율을 유지하며 가로,세로 중 짧은 쪽을 ImageView에 꽉 차게 출력합니다. 이때도 마찬가지로 ImageView를 벗어나는 부분은 출력되지 않습니다.

 

3) android:scaleType = "centerInside"

이미지의 가로, 세로 중 긴 쪽을 ImageView의 레이아웃에 맞춰 출력합니다. 이미지의 비율은 유지되며 남는 공간은 background의 색으로 채워집니다. fitCenter와 달리 이미지가 ImageView보다 작을 경우 크기가 유지됩니다.

 

4) android:scaleType = "fitCenter"

centerInside와 매우 유사합니다. 단, 이미지의 크기가 ImageView보다 작다면 ImageView의 크기에 따라 달라집니다.

 

5) android:scaleType = "fitStart"

ImageView 안에서 가로, 세로 비율을 유지하며 fit하게 출력됩니다. 단, fitCenter와 다르게 왼쪽 상단을 기준으로 정렬됩니다.

 

6) android:scaleType = "fitEnd"

감이 오시나요? fitStart와 마찬가지로 가로&세로 비율을 유지하며 fit하게 출력됩니다. 우측 하단을 기준으로 정렬됩니다.

 

7) android:scaleType = "fitXY"

가로, 세로 비율에 상관 없이 ImageView에 꽉 차게 보여집니다. 이미지가 찌그러진 상태로 보입니다.

 

8) android:scaleType = "matrix"

이미지의 크기, 비율을 유지하며 ImageView의 좌측상단을 기준으로 정렬됩니다. 이미지가 크다면 ImageView 외의 부분은 출력되지 않습니다.

 

 

 

실행 결과입니다.

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

        <ImageView
            android:layout_marginTop="30dp"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@drawable/img"
            android:scaleType="center"
            android:background="#76F8ED"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="center"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:src="@drawable/img"
            android:scaleType="centerCrop"
            android:background="#76F8ED"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="centerCrop"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:src="@drawable/img"
            android:scaleType="centerInside"
            android:background="#76F8ED"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="centerInside"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:src="@drawable/img"
            android:scaleType="fitCenter"
            android:background="#76F8ED"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fitCenter"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:src="@drawable/img"
            android:scaleType="fitStart"
            android:background="#76F8ED"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fitStart"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:src="@drawable/img"
            android:scaleType="fitEnd"
            android:background="#76F8ED"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fitEnd"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:src="@drawable/img"
            android:scaleType="fitXY"
            android:background="#76F8ED"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="fitXY"/>

        <ImageView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_marginTop="30dp"
            android:src="@drawable/img"
            android:scaleType="matrix"
            android:background="#76F8ED"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="matrix"/>
    </LinearLayout>