Please Enable JavaScript!
Gon[ Enable JavaScript ]

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

 

환경:Eclipse Mars,Android 4.2.2

 

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" />

 

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

 

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" />

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

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" />

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

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" />

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

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" />

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

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" />

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

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" />

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

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" />

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

▼ 마지막으로 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" />

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

 

Posted by 녹두장군

댓글을 달아 주세요