안드로이드(Android) 의 ImageView 레이아웃 옵션과 사용예제들

(3) 안드로이드(Android) 의 ImageView 레이아웃 옵션과 사용예제들 - 2

다음은 이미지를 표시해주는 레이아웃 ImageView 의 옵션중 android:ScaleType 에 대한

설명이다. 이것은 ImageView 의 크기에 맞게 이미지 크기를 조작하거나 이동시키는 옵션이다

xml 에서는 표에서 나온 android:scaleType=”matrix” 로 표현하며 소스에서는

ImageView::setScaleType(ImageView.ScaleType.MATRIX) 로 구현된다.

 

이제 각각의 값들이 적용되는 예를 살펴보도록 하자.

그림에서 빨간색은 ImageView 의 틀을 보여주기 위해 ImageView 의 Background 값으로

준것이다. 그리고 Padding 값을 3으로 주었기 때문에 이미지가 조금 안쪽으로 당겨져 표현된다.

(1) MATRIX : ImageView 의 틀을 기준으로 해서 왼쪽 상단을 꼭지점으로 정렬된다.

이미지를 틀에 맞게 재조정하지 않는다. 틀보다 작거나 커도 그대로 표현된다.

XML : android:scaleType=”matrix”

Source : setScaleType(ImageView.ScaleType.MATRIX);

ImageView : width=287, height=316

Image : width=150, height=250

위의 경우는 이미지가 틀보다 작으므로 정상적으로 보이지만  ImageView 의 틀보다 키우게

되면 줄이지 않기 때문에 잘라져서 보이게 된다.

ImageView : width=287, height=316

Image : width=400, height=400

(2) FIT_XY : 이미지가 ImageView 틀 보다 작거나 크든지 간에 이미지를 틀에 맞추는 것이다.

비율과 상관없이 틀에 맞추기 때문에 좌우 크기가 맞지 않은 그림일 경우에는 찌그러져

보일것이다.

(3) FIX_START : 이미지크기를 틀에 맞게 비율을 줄이되 이미지 시작지점을 ImageView 왼쪽

상단에 맞추어 그림을 표현한다.

XML : android:scaleType=”fitStart”

Source : setScaleType(ImageView.ScaleType.FIT_START);

ImageView : width=287, height=316

Image : width=450, height=350

 

(4) FIX_CENTER : 이미지크기를 틀에 맞게 비율을 줄이되 ImageView 중앙에 맞추어 표현한다.

XML : android:scaleType=”fitCenter”

Source : setScaleType(ImageView.ScaleType.FIT_CENTER);

ImageView : width=287, height=316

Image : width=450, height=350

(5) FIX_END : 이미지크기를 틀에 맞게 비율을 줄이되 ImageView 의 오른쪽 아래에 맞추어

이미지를 표현한다.

XML : android:scaleType=”fitEnd”

Source : setScaleType(ImageView.ScaleType.FIT_END);

ImageView : width=287, height=316

Image : width=450, height=350

(6) CENTER : 이미지크기 그대로 표현하되 이미지를 틀에 맞게 줄이지는 않는다. 그리고

ImageView 틀의 중앙에 위치시킨다.

XML : android:scaleType=”center”

Source : setScaleType(ImageView.ScaleType.CENTER);

ImageView : width=287, height=316

Image : width=450, height=200

 

(7) CENTER_CROP : 6번에서의 그림은 높이가 ImageView 의 틀과 맞지 않다. 이것처럼

한쪽이 틀과 맞지 않다면 틀에 맞게 이미지를 늘이면서 다른 한쪽도 같이 비율에 맞게

증가 시킨다. 그러면 6번 그림은 높이가 증가한 비율만큼 넓이가 증가하여 표현되게 된다.

그리고 그림의 위치는 틀의 중앙에서 표현된다.

XML : android:scaleType=”centerCrop”

Source : setScaleType(ImageView.ScaleType.CENTER_CROP);

ImageView : width=287, height=316

Image : width=450, height=200

(8) CENTER_INSIDE : 7번에서의 내용과 반대로 ImageView 의 틀에 벗어나는 쪽을 맞추어

비율을 줄여 표현한다. 만약 넓이가 틀에서 벗어난다면 넓이를 틀에 맞추고 그 비율만큼

높이를 줄이게 될것이다. CENTER_CROP, CENTER_INSIDE 는 ImageView 의 틀에 맞게

이미지를 조정하는 것이 공통적인 특징이다.

XML : android:scaleType=”centerInside”

Source : setScaleType(ImageView.ScaleType.CENTER_INSIDE);

ImageView : width=287, height=316

Image : width=450, height=200

전체소스와 XML 설정값

 

구현한 소스

01	import android.app.Activity;

02	import android.graphics.Bitmap;

03	import android.graphics.BitmapFactory;

04	import android.os.Bundle;

05	import android.view.View;

06	import android.view.View.OnClickListener;

07	import android.widget.ImageView;

08

09	public class ViewDetail extends Activity {

10	/** Called when the activity is first created. */

11

@Override

12	public void onCreate(Bundle savedInstanceState) {

13	super.onCreate(savedInstanceState);

14	setContentView(R.layout.view_detail);

15	ImageView iv = (ImageView)findViewById(R.id.imageView);

16

17	Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.test02);

18	Bitmap resized = Bitmap.createScaledBitmap(image, 450, 200, true);

19	iv.setImageBitmap(resized);

20	iv.setScaleType(ImageView.ScaleType.CENTER_INSIDE); // 레이아웃 크기에 이미지를 맞춘다

21	iv.setPadding(3, 3, 3, 3);

22	iv.setOnClickListener(new OnClickListener(){

23	public void onClick(View arg0) {

24

finish();

25

}

26

});

27

}

28

}

view_detail.xml 설정 내용

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:orientation="vertical"     android:layout_width="fill_parent"     android:layout_height="fill_parent">     <ImageView         android:id="@+id/imageView"         android:layout_width="287px"        android:layout_height="316px"        android:maxWidth="287px"        android:maxHeight="316px"        android:background="#FF9900"/>     <LinearLayout         android:orientation="vertical"         android:layout_width="fill_parent"         android:layout_height="50px"         android:gravity="center" >        <Button            android:text="New Game"           android:id="@+id/btnNew"           android:layout_width="fill_parent"           android:layout_height="fill_parent"/>      </LinearLayout> </LinearLayout>