안드로이드(Android) ImageView scale type 별로 이미지 배치 하는 방법

ImageView 에서 속성값중 scale 있습니다. scale 속성값에 따라 ImageView 위젯에 이미지들이 어떻게 배치 되는지 알아 보겠습니다. 이미지를 자주 다루는 앱을 만드시는 분들은 필히 숙지해야될 옵션이죠.

 

 

▼ 아래 XML 은 넓이와 높이의 값을 이미지 크기만큼 늘어나도록 둔 기본적인 옵션값입니다. 갈색으로 표현된 부분은 ImageView 의 빈 공간입니다. 이미지가 가로 길이가 세로보다 크다보니 공백이 생겼네요.

 

<ImageView
    android:id="@+id/imgView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#541121"
    android:src="@drawable/desuert" />

 

 

▼ scaleType=”center” 은 이미지뷰의 가로/세로 크기에 맞게 원본 크기의 이미지를 잘라서 맞추게 됩니다. 400px 로 정해진 ImageView 의 크기에 맞추기 위해 이미지 중앙을 잘라 내서 표현했습니다. .

<ImageView
    android:id="@+id/imgView"
    android:layout_width="400px"
    android:layout_height="400px"
    android:scaleType="center"
    android:background="#541121"
    android:src="@drawable/desuert" />

 

▼ scaleType=”centerCrop” 는 ImageView 의 크기에 이미지를 끼워 맞추는 옵션입니다. 빈공간 없이 맞추기 때문에 가로/세로 균형이 맞지 않는다면 이미지가 찌그러져 보이겠죠.

<ImageView
    android:id="@+id/imgView"
    android:layout_width="400px"
    android:layout_height="400px"
    android:scaleType="centerCrop"
    android:background="#541121"
    android:src="@drawable/desuert" />

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 스마트폰 안드로이드 개발을 위한 개발자 모드 켜고 끄는 방법 ▶ 안드로이드 gravity, layout_gravity 차이점을 알아보자. ▶ 안드로이드 스튜디오 설치해서 사용하는 방법 ▶ 안드로이드 스튜디오 Logcat 에뮬레이터와 연결이 끊겨서 안보이는 경우 ▶ 갤럭시 스마트폰 안드로이드 버전 확인 및 업데이트 하는 방법

 

 

 

 

▼ scaleType=”centerInside” 옵션은 centerCrop 달리 이미지를 줄이는 비율을 가로/세로 동일하게 가져갑니다. 아래 그림처럼 가로 비율이 세로보다 더 크기 때문에 갈색으로 표시된 ImageView 의 배경색이 나온것이죠. 이렇게 하시면 이미지가 찌그러질 염려가 없어지겠죠. 이미지가 ImageView 레이아웃 보다 작다면 원본 크기 그대로 두고 중앙을 맞춥니다.

<ImageView
    android:id="@+id/imgView"
    android:layout_width="400px"
    android:layout_height="400px"
    android:scaleType="centerInside"
    android:background="#541121"
    android:src="@drawable/desuert" />

 

▼ scaleType=”fitCenter” 옵션은 이미지의 비율에 맞게 줄여서 ImageView 위젯에 넣습니다. 동일한 비율로 줄이기 때문에 찌그러질 염려가 없겠죠. centerInside 와 차이점은 이미지가 ImageView 보다 작아도 화면에 맞추기 위해서 확대 시킨다는 것입니다.

<ImageView
    android:id="@+id/imgView"
    android:layout_width="400px"
    android:layout_height="400px"
    android:scaleType="fitCenter"
    android:background="#541121"
    android:src="@drawable/desuert" />

 

▼ scaleType=”fitXY” 는 ImageView 크기에 이미지를 맞춥니다. 이미지가 클 경우 centerCrop 과 결과값이 같지만 작을 경우에 fitXY 는 이미지를 확대시켜서 맞추게 됩니다.  

<ImageView
    android:id="@+id/imgView"
    android:layout_width="400px"
    android:layout_height="400px"
    android:scaleType="fitXY"
    android:background="#541121"
    android:src="@drawable/desuert" />

 

▼ scaleType=”fitStart” 는 이미지가 크거나 작을 경우 가로/세로를 동일한 비율로 줄여서 ImageView 상단에 맞춥니다. 이미지의 가로/세로 크기가 동일하지 않기 때문에 아래쪽이 비게 됩니다.

<ImageView
    android:id="@+id/imgView"
    android:layout_width="400px"
    android:layout_height="400px"
    android:scaleType="fitStart"
    android:background="#541121"
    android:src="@drawable/desuert" />

 

▼ scaleType=”fitEnd” 는 fitStart 와 반대로 끝에서 맞추게 됩니다. ImageView 의 크기가 이미지와 동일한 비율이 아니라면 상단에 여백이 생기게 됩니다. 

<ImageView
    android:id="@+id/imgView"
    android:layout_width="400px"
    android:layout_height="400px"
    android:scaleType="fitEnd"
    android:background="#541121"
    android:src="@drawable/desuert" />

 

▼ 마지막으로 scaleType = “matrix” 로 설정하시면 이미지를 다양한 방법으로 조절할수 있습니다. 아래는 이미지를 200px 만큼 잘라서 ImageView 에 넣도록 설정한 XML 입니다. 이 외에 matrix 는 아주 다양하게 설정할수 있어서 다음 아티클에서 자세하게 다루겠습니다.

<ImageView
    android:id="@+id/imgView"
    android:layout_width="400px"
    android:layout_height="400px"
    android:scaleType="matrix"
    android:scrollX="200px"
    android:scrollY="200px"
    android:background="#541121"
    android:src="@drawable/desuert" />

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 스마트폰 안드로이드 개발을 위한 개발자 모드 켜고 끄는 방법 ▶ 안드로이드 gravity, layout_gravity 차이점을 알아보자. ▶ 안드로이드 스튜디오 설치해서 사용하는 방법 ▶ 안드로이드 스튜디오 Logcat 에뮬레이터와 연결이 끊겨서 안보이는 경우 ▶ 갤럭시 스마트폰 안드로이드 버전 확인 및 업데이트 하는 방법