[안드로이드] ImageView scaleType 속성별 차이 예제

 

 

 

 

 

안드로이드의 이미지를 출력하는 ImageView의 속성중 scaleType에 대해서 알아본다.

 

 

위젯 ImageView를 아래와 같이 작성한다.

<ImageView      android:id="@+id/imageView"      android:layout_width="150dp"      android:layout_height="150dp"      android:scaletype="center"      android:src="@drawable/sample_image"      android:background="#000000"⁢/>

이미지뷰에 sample_image를 출력할 것이다.

 

이 때 android:scaleType 속성의 옵션값에 따라 이미지 비율, 크기 등이 다르게 출력된다.

 

 

* android:scaleType의 옵션값은 8개로 나누어진다.

 

1. android:scaleType="center" : 이미지 원본 크기와 비율을 유지하며 이미지의 중앙을 layout_width, layout_height 안에 출력한다. 이 때 레이아웃보다 이미지가 크면 레이아웃의 벗어난 이미지는 출력되지 않은다. 레이아웃보다 이미지가 작으면 이미지를 center 정렬 한다.

java코드일때 - ImageView.setSacleType(ScaleType.CENTER);

 

2. android:scaleType="centerCrop" : 이미지의 가로/세로의 길이 중 짧은 쪽을 ImageView의 레이아웃에 꽉 차게  크기를 맞춰서 출력한다. 이 때 원본 이미지 가로/세로의 비율은 유지되고 레이아웃 영역에서 벗어난 이미지는 출력되지 않는다.

java코드일때 - ImageView.setSacleType(ScaleType.CENTER_CROP);

 

3. android:scaleType="centerInside" : 이미지의 가로/세로의 길이 중 긴 쪽을 ImageView의 레이아웃에 맞춰서 출력한다. 이 때 원본 이미지의 가로/세로의 비율은 유지되고 레이아웃에 이미지외 빈공간은 background 속성의 color로 채워진다. fitCenter와 다른점은 원본 이미지가 ImageView이 레이아웃보다 작다면, 이미지의 크기가 유지 된다는 것이다.

java코드일때 - ImageView.setSacleType(ScaleType.CENTER_INSIDE);

 

4. android:scaleType="fitCenter" : 이미지의 가로/세로의 길이 중 긴 쪽을 ImageView의 레이아웃에 맞춰서 출력하다. 이 때 원본 이미지의 가로/세로의 비율은 유지되고 레이아웃에 이미지외 빈공간은 background 속성의 color로 채워진다. centerInside와 다른점은 이미지의 크기가 ImageView의 레이아웃에 크기에 따라 변한다는 것이다.

java코드일때 - ImageView.setSacleType(ScaleType.FIT_CENTER);

 

5. android:scaleType="fiStart" : ImageView 레이아웃 안에서 이미지의 가로/세로 비율을 유지하며 출력되지만 ImageView의 레이아웃의 왼쪽 상단을 기준으로 정렬된다.

java코드일때 - ImageView.setSacleType(ScaleType.FIT_START);

 

6. android:scaleType="fitEnd" : ImageView 레이아웃 안에서 이미지의 가로/세로 비율을 유지하며 출력되지만 ImageView의 레이아웃의 오른쪽 하단을 기준으로 정렬된다.

java코드일때 - ImageView.setSacleType(ScaleType.FIT_END);

 

7. android:scaleType="fitXY" : 가로/세로 비율에 상관없이 ImageView의 레이아웃의 각 면에 꽉 차게 출력된다.

java코드일때 - ImageView.setSacleType(ScaleType.FIT_XY);

 

8. android:scaleType="matrix" : 이미지 원본의 크기와 비율을 유지하며 이미지 원본대로 왼쪽 상단을 기준으로 출력된다. 이미지가 ImageView의 레이아웃 보다 크다면 나머지 이미지는 출력되지 않는다.

java코드일때 - ImageView.setSacleType(ScaleType.MATRIX);

 

 

 

 

 

 

 

아래는 위 옵션값의 출력물이다.

 

 

 

 

 

 

 

 

 

 

 

 

.아래는 위 출력물의 소스이다.

 

레이아웃만 작업했다.

 

작업하기전에 미리 res/drawable/ 폴더에 sample_image.png 를 저장하고 시작한다.

 

 

 

* sample_image.png 

 

 

* activity_main.xml

<?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"
    tools:context="com.studio572.sampleimagescaletype.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:background="#cccccc"
            android:orientation="vertical">
            <TextView
                android:id="@+id/textView000"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="원본 이미지: 298px * 531px"/>
            <ImageView
                android:id="@+id/imageView00"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:src="@drawable/sample_image"
                android:background="#000000"/>
            <TextView
                android:id="@+id/textView01"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="center"/>
            <ImageView
                android:id="@+id/imageView01"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:scaleType="center"
                android:src="@drawable/sample_image"
                android:background="#000000"/>
            <TextView
                android:id="@+id/textView02"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="30dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="centerCrop"/>
            <ImageView
                android:id="@+id/imageView02"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:scaleType="centerCrop"
                android:src="@drawable/sample_image"
                android:background="#000000"/>
            <TextView
                android:id="@+id/textView03"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="30dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="centerInside"/>
            <ImageView
                android:id="@+id/imageView03"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:scaleType="centerInside"
                android:src="@drawable/sample_image"
                android:background="#000000"/>
            <TextView
                android:id="@+id/textView04"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="30dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="fitCenter"/>
            <ImageView
                android:id="@+id/imageView04"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:scaleType="fitCenter"
                android:src="@drawable/sample_image"
                android:background="#000000"/>
            <TextView
                android:id="@+id/textView05"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="30dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="fitStart"/>
            <ImageView
                android:id="@+id/imageView05"
                android:layout_width="250dp"
                android:layout_height="150dp"
                android:scaleType="fitStart"
                android:src="@drawable/sample_image"
                android:background="#000000"/>
            <TextView
                android:id="@+id/textView06"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="30dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="fitEnd"/>
            <ImageView
                android:id="@+id/imageView06"
                android:layout_width="150dp"
                android:layout_height="350dp"
                android:scaleType="fitEnd"
                android:src="@drawable/sample_image"
                android:background="#000000"/>
            <TextView
                android:id="@+id/textView07"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="30dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="fitXY"/>
            <ImageView
                android:id="@+id/imageView07"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:scaleType="fitXY"
                android:src="@drawable/sample_image"
                android:background="#000000" />
            <TextView
                android:id="@+id/textView08"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:layout_marginTop="30dp"
                android:textSize="18dp"
                android:gravity="center"
                android:textColor="#000000"
                android:text="matrix"/>
            <ImageView
                android:id="@+id/imageView08"
                android:layout_width="150dp"
                android:layout_height="150dp"
                android:scaleType="matrix"
                android:src="@drawable/sample_image"
                android:background="#000000"/>
        </LinearLayout>

    </ScrollView>
</LinearLayout>